HTML과 CSS 첫걸음 초안(1~10)

href의 의미: 하이퍼텍스트 참조(hypertext reference), 인터넷이나 컴퓨터의 리소스에 대한 다른 이름
내부 링크에는 상대 경로를 사용하고, 외부 링크에는 URL을 사용하는 것이 좋습니다
어떤 운영체제에서든 HTML 경로에는 슬래시(/)만 사용합니다
<q>는 짧은 인용에 사용되는 인라인(inner) 요소입니다
<blockquote>는 긴 인용에 사용되며, 자동으로 들여쓰기되는 블록(block) 요소입니다
블록 요소는 독립적이고, 인라인 요소는 흐름에 따릅니다
블록 요소의 내용 앞뒤에는 각각 개행이 있습니다
블록 요소는 페이지의 주요 구성 요소이며, 인라인 요소는 짧은 내용을 표시하는 데 사용됩니다
페이지를 설계할 때는 더 큰 블록 요소부터 시작하고, 페이지를 완성할 때 인라인 요소를 추가합니다
일반적인 블록 요소: <h1>~<h6>, <p>, <blockquote>
일반적인 인라인 요소: <q>, <a>, <em>
void 요소(실제 내용이 없는 요소): <br>, <img>
<br>과 <br/>는 완전히 동일하며, XHTML과 호환되는 페이지에서는 <br/>를 사용합니다
HTML 요소를 선택할 때는 항상 내용 구조의 의미에 가장 가까운 요소를 선택하는 것이 좋습니다. 이렇게 하면 더 큰 유연성과 유용성을 가집니다
정렬되지 않은 목록 = ul
정렬된 목록 = ol
목록 항목 = li
정의 목록 = dl
정의 용어 = dt
정의 설명 = dd
전체 HTML 문서는 여러 중첩으로 구성되어 있으며, 중첩의 일치를 확인해야 합니다
문자 엔터티: HTML 엔터티 - 유니코드 문자 백과사전 참조
www.starbuzzcoffee.com은 웹사이트 이름이고, starbuzzcoffee.com은 도메인 이름입니다
하나의 도메인은 여러 웹사이트에 사용될 수 있습니다: home.starbuzzcoffee.com, employees.starbuzzcoffee.com 등
URL(통합 자원 위치)을 http://www.starbuzzcoffee.com/index.html 예로 들면:
http: 프로토콜 부분, 브라우저가 리소스를 얻는 방법을 알려줍니다
www.starbuzzcoffee.com: 웹사이트 이름, 브라우저가 인터넷의 어떤 컴퓨터에서 리소스를 가져올지 알려줍니다
/index.html: 절대 경로, 서버에서 어떤 리소스를 찾아야 하는지 알려줍니다
서버 루트 디렉토리에서 기본 파일을 반환하려면 파일을 index.html 또는 default.htm로 명명하면 됩니다
파일 URL: file:///C:/Users/ZhangKai/Desktop/JS引擎基本工作流程.png
URL 뒤에는 선택적인 포트 번호가 있으며, 웹의 모든 것은 기본적으로 80 포트로 전송됩니다
<a>에 title 속성을 추가하면 링크에 정보를 추가할 수 있습니다. 대부분의 브라우저에서 마우스를 올렸을 때 링크의 도구 설명이 표시됩니다
일반적으로 <a> 태그에 많은 내용을 넣지 않으며, 많은 내용은 title 속성에 넣습니다
의미 있는 링크를 제공하면 페이지의 가독성을 향상시킬 수 있습니다
<a>를 사용하여 페이지의 특정 지점에 접근하려면: 먼저 id 속성으로 대상 지점을 표시한 다음, href 속성에 지정된 경로나 URL 뒤에 "#대상id"를 추가하면 됩니다
모든 요소에서 속성 순서는 중요하지 않습니다
어떤 요소에든 도구 설명을 추가할 수 있습니다 (모든 요소에 title 속성을 추가할 수 있음). id 속성을 추가하면 id는 페이지에서 고유해야 합니다
링크에 링크할 수 있습니다
브라우저는 URL 뒤에 자동으로 "/"를 추가합니다
id 이름은 문자로 시작해야 하며, 문자, 숫자, 하이픈, 밑줄, 콜론 또는 점으로 구성된 이름을 사용해야 합니다
소스 코드 보기는 링크 대상을 찾는 가장 좋은 방법입니다
새 창이나 새 탭에서 링크 열기: target = _blank 속성
동일한 대상 이름을 지정하면, 이후 동일한 대상 이름을 가진 모든 링크는 동일한 탭에서 열립니다
웹에서 일반적으로 사용되는 3가지 이미지 형식:
.jpeg: 사진과 복잡한 이미지에 사용
"손실" 형식, 투명도 지원 안 함, 파일 크기 작음, 애니메이션 지원 안 함
1600만 가지 다른 색상의 이미지를 표현할 수 있습니다
.png: 단색 이미지, 로고, 기하학적 도형에 사용
"무손실" 형식, 투명도 지원
수백만 가지 다른 색상의 이미지, PNG-8, PNG-16, PNG-24의 3가지 유형이 있으며, 색상 수에 따라 다릅니다
.gif: 단색 이미지, 로고, 기하학적 도형에 사용
"무손실" 형식, 하나의 색상을 투명하게 설정할 수 있음, .jpeg 파일보다 큼, 애니메이션 지원
최대 256가지 다른 색상의 이미지를 표현할 수 있습니다
HTML 페이지는 순수 텍스트이며, 이미지는 페이지의 일부로 직접 포함될 수 없습니다. 별개로 존재합니다
이미지 URL 가져오기:
이미지를 마우스 오른쪽 버튼으로 클릭 → 이미지 주소 복사
이미지를 마우스 오른쪽 버튼으로 클릭 → 새 창에서 이미지 열기 → 브라우저 주소 표시줄에서 이미지 URL 가져오기
<img>의 alt 속성을 사용하여 이미지 정보를 제공합니다
width 속성과 height 속성을 사용하여 이미지의 너비와 높이를 설정합니다 (픽셀 단위). 이 두 속성으로 이미지를 확대/축소하는 것은 피하는 것이 좋습니다
브라우저가 이미지를 확대/축소하기 전에 전체 큰 이미지를 가져와야 합니다
픽셀 수와 화면상 이미지 크기의 관계: 일반적으로 인치당 96픽셀(96ppi)
<img>는 인라인 요소이며, 다른 설정을 하지 않으면 이미지 사이에는 간격이 없습니다
체스판 패턴은 이미지의 투명 영역입니다
투명도(transparency)
마테(matte): 배경 색상에 따라 텍스트 가장자리를 부드럽게 만듭니다
투명한 이미지를 웹 페이지에 배치하려면 이미지의 마테 색상이 웹 페이지의 배경색과 일치하는지 확인해야 합니다
뒤로 호환성(Backwards compatibility): 요소나 속성의 작동 방식을 변경해도 브라우저는 이전 방식을 계속 지원합니다
HTML은 더 이상 버전 6, 7, 8 등이 없을 것입니다. 이제부터는 그냥 HTML입니다
<meta>는 브라우저에 페이지에 대한 일부 정보를 알려줍니다
W3C 유틸리티 도구 The W3C Markup Validation Service는 페이지를 검사하여 모든 마크업이 유효한지 확인합니다
HTML 5와 이전 버전의 비교: 새로운 요소와 속성을 제공하며, 웹 애플리케이션을 만들 수 있게 하고, 이전 버전보다 더 강력합니다
CSS 규칙 예:

p {
  color: maroon;  /* 글자 색상이 갈색입니다 */
}

color: 글자 색상
font-family: 글꼴
공통 스타일을 그룹화: 여러 HTML 태그에 하나의 스타일을 적용할 때, 여러 태그를 쉼표로 구분합니다
border-bottom: 요소의 하단 테두리
text-decoration: 텍스트 장식
하나의 요소에 여러 규칙이 있을 수 있으며, 각 규칙은 기존 스타일 정보 앞에 새로운 스타일 정보를 추가합니다

/* 하나의 선택자 */
p {
  color: maroon;
}

/* 다른 선택자 */
h1, h2 {
  font-family: sans-serif;
  color: maroon;
}

상속: 부모 요소의 스타일을 변경하면 그 안에 있는 자식 요소의 스타일도 함께 변경됩니다
모든 스타일이 상속되는 것은 아니며, 일부 스타일만 상속됩니다: 일반적으로 텍스트 외관에 영향을 미치는 스타일은 상속됩니다
상속 덮어쓰기: 더 구체적인 선택자를 사용하여 부모 요소로부터 상속된 속성을 덮어쓸 수 있습니다
CSS에서는 항상 가장 구체적인 규칙을 사용합니다
CSS에 주석을 작성하려면 /* ... */로 묶기만 하면 됩니다
클래스 선택자: HTML과 CSS를 결합하여 특정 유형의 요소를 정의하고 해당 클래스에 속한 모든 요소에 스타일을 적용합니다

/* <h2> 태그의 class 속성에 greentea 클래스 이름을 지정합니다 */
h2.greentea {
  color: aqua;
}

여러 태그가 클래스 선택자를 통해 스타일을 적용될 때, 태그는 쉼표로 구분됩니다
요소 이름을 생략하면 스타일이 해당 클래스의 모든 멤버에 적용됩니다
하나의 요소에 여러 클래스를 추가할 수 있습니다. 각 클래스 이름을 태그의 class 속성에 넣고 클래스 이름을 공백으로 구분합니다
여러 선택자가 동일한 특정성을 가질 때, CSS 파일에서 마지막에 나열된 규칙이 선택됩니다
CSS 파일에 오류가 있으면, 일반적으로 이 오류 아래의 모든 다른 규칙이 무시됩니다
CSS 유틸리티 도구: W3C CSS 유효성 검사 서비스
top: 요소 상단 위치 제어
text-align: 텍스트 정렬 방식
letter-spacing: 문자 간격
background-color: 배경 색상
font-weight: 텍스트 굵기
left: 요소 왼쪽 위치 지정
list-style: 목록 항목 외관 변경
padding: 내부 여백
line-height: 텍스트 요소의 행 간격
background-image: 요소 배경 이미지
<blockquote>에 대한 CSS 규칙은 없습니다
<p>는 일부 요소의 색상을 덮어씁니다
글꼴 계열 font-family
셰리프(serif): 문자 끝의 장식적인 "작은 선"
산세리프(sans-serif): 셰리프가 없는 글꼴 계열로, 컴퓨터 화면에서 더 쉽게 읽을 수 있습니다
셰리프: 셰리프가 있는 글꼴 계열
모노스페이스 글꼴 계열: 이 계열의 글꼴은 고정 너비 문자를 포함하며, 주로 소프트웨어 코드 예제를 표시하는 데 사용됩니다
필기체(Cursive) 글꼴 계열: 손으로 쓴 것처럼 보이는 글꼴로, 제목에 사용됩니다
판타지(Fantasy) 글꼴 계열: 특정 스타일의 장식성 글꼴
font-family 속성을 사용하면 여러 글꼴을 지정할 수 있습니다(후보 글꼴 그룹 또는 글꼴 우선 순위 목록)
하나의 글꼴 이름에 여러 단어가 포함된 경우, font-family 속성에서 지정할 때 큰따옴표로 묶어야 합니다
serif와 sans-serif는 구체적인 글꼴 이름이 아닙니다
웹 글꼴: @font-face 규칙은 글꼴의 이름과 위치를 정의할 수 있게 하여 페이지에서 사용할 수 있도록 합니다
웹 글꼴의 표준 글꼴 형식: .woff(Web Open Font Format)
다른 웹 글꼴 형식: .ttf(TrueType 글꼴), .otf(OpenType 글꼴), .eot(Embedded OpenType 글꼴), .svg(Scalable Vector Graphics, SVG 글꼴)
웹 글꼴 사용 방법:

/* 먼저, 글꼴을 찾아서 이 글꼴 파일을 웹 서버에나 로컬 프로젝트 폴더에 저장합니다 */
......

/* .css 파일 맨 위에 @font-face 규칙을 추가합니다 */
@font-face {
    font-family: adelia;             /* font-family 속성은 설정할 글꼴 이름을 지정합니다 */
    src: url(),                        /* src 속성은 글꼴 파일의 위치를 지정합니다 */
          url();             /* 여러 형식이 있을 경우 각각 위치를 지정해야 합니다 */
}

/* CSS 규칙에서 설정한 글꼴을 사용합니다 */
h1 {
   font-family: adelia, sans-serif;      /* 안전을 위해 sans-serif를 대체 글꼴로 지정합니다 */
}

다른 내장 CSS 규칙:
@import: 다른 CSS 파일 가져오기
@media: 인쇄 페이지, 데스크톱 화면, 휴대폰 등 특정 "미디어" 유형에 대한 CSS 규칙 생성
웹 글꼴의 단점:
웹 글꼴을 가져올 때 페이지 성능에 영향을 줄 수 있습니다
일부 장치는 웹 글꼴을 지원하지 않습니다
너무 많은 웹 글꼴은 페이지 로딩 시간을 늘립니다
웹 글꼴 호스팅 서비스: Browse Fonts - Google Fonts
px - 픽셀 단위로 글꼴 크기 지정

body {
   font-size: 14px;                      /* 글꼴 높이를 14픽셀로 설정합니다 */
}

% - 백분율로 다른 글꼴에 대한 크기 지정

body {
     font-size: 14px;
}
h1 {
     font-size: 150%;
}

em - 비율 인자 지정

body {
     font-size: 14px;
}
h1 {
     font-size: 1.2em;       /* 14 * 1.2 = 16.8px, 브라우저는 이를 17px로 반올림합니다 */
}

키워드로 글꼴 크기 지정: xx-small, x-small, small, medium, large, x-large, xx-large
팁: 페이지의 <body>에 크기를 설정(키워드 사용)하고, 다른 글꼴 크기를 상대적으로 설정(% 또는 em 사용)
px로 글꼴 크기를 설정하면 IE 사용자는 글꼴 크기를 조정할 수 없습니다
<body>에서 글꼴 크기를 정의하면 페이지에 기본 글꼴 크기를 설정하는 것과 같습니다
제목의 기본 크기:
<h1>: 본문(<body>)의 200%
<h2>: ...의 150%
<h3>: ...의 120%
<h4>: ...의 100%
<h5>: ...의 90%
<h6>: ...의 60%
<body>에서 상대 측정 단위(% 또는 em)를 사용할 때, 기본 글꼴 크기를 기준으로 합니다
글꼴 굵기 변경(font-weight):
bold: 굵은 텍스트
normal: 굵기 스타일 제거
bolder/lighter: 상속된 값보다 더 굵게/얇게
글꼴 스타일 추가(font-style):
italic: 기울임
oblique: 기울임 텍스트
웹 색상은 빨강, 초록, 파랑 세 분량의 비율로 결정됩니다
CSS는 약 150개의 색상 이름을 정의하지만, 실제로는 1600만 가지 색상의 팔레트를 사용할 수 있습니다
색상을 지정하는 세 가지 방법:
색상 이름
빨강, 초록, 파랑 분량 - rgb로 시작하여 각 분량의 백분율을 지정
16진수 색상 코드 - #으로 시작하여 두 자리씩 분량을 나타냅니다
텍스트 장식(text-decoration):
line-through: 텍스트 중앙을 가로지르는 가로선
underline: 밑줄
overline: 윗줄
none: 텍스트 장식 제거
<del>: 삭제할 내용 표시
<ins>: 삽입할 내용 표시
line-height: 행 높이 설정. em 또는 백분율 또는 px 단위를 사용합니다
박스 모델(box model):
CSS는 각 요소를 박스로 표시된다고 간주합니다
외부 여백은 요소 간의 간격을 제공하며, 내부 여백은 콘텐츠 주변에 추가 공간을 제공합니다
내부 여백, 테두리, 외부 여백은 모두 선택 사항이며 서로 의존하지 않습니다
background-image: 요소의 배경 이미지 설정
background-position: 이미지 위치 설정. 픽셀, 백분율 또는 위치 키워드를 사용할 수 있습니다
background-repeat: 기본적으로 배경 이미지는 "타일" 방식으로 즉, 반복되어 전체 배경 공간을 채웁니다
내부/외부 여백 설정 순서는 매우 중요합니다
테두리 스타일(border-style): solid, dotted, double, dashed, groove, inset, outset, ridge
테두리 너비(border-width): thin, medium, thick
테두리 색상(border-color): 글꼴 색상 설정과 유사합니다
둥근 테두리(border-radius): 하나의 값으로 4개 모서리의 반지름 크기를 지정합니다
ID 선택자:

/* HTML에서 <p>에 id="footer"를 지정합니다 */
......

/* CSS에서 스타일 적용 */
#footer {
    color: red;                  /* id가 footer인 모든 요소 선택
}

p#footer {
    color: red;                  /* id가 footer인 <p> 요소 선택
}

id와 class의 차이점:
하나의 id는 페이지의 하나의 요소만 일치시키지만, 여러 클래스에 속할 수 있습니다
id 이름은 숫자나 문자로 시작해야 하며, 클래스 이름은 문자로 시작합니다
id 이름은 고유해야 합니다
여러 스타일시트를 사용할 때 순서가 중요합니다. 가장 아래에 있는 스타일시트가 가장 높은 우선순위를 가집니다
하나의 스타일시트를 기본 스타일로 사용하고, 그 아래에 자신의 스타일시트를 연결하여 수정하려는 스타일을 지정합니다
미디어 쿼리를 사용하여 다른 장치에 다른 스타일시트를 지정할 수 있습니다:
min-device-width/max-device-width: 장치의 실제 너비에 따라 다릅니다
min-width/max-width: 브라우저 창의 최대/최소 너비를 나타냅니다
orientation: 가로(landscape) 또는 세로(portrait)
"미디어 쿼리"는 CSS에 직접 작성할 수도 있습니다 - @media 규칙 사용

@media screen and (min-device-width: 481px) {
    #guarantee {
        ...
        margin-right: 250px;        // 화면 너비가 480px보다 큰 장치는 이 규칙을 사용합니다
    }
}

@media screen and (max-device-width: 481px) {
    #guarantee {
        ...
        margin-right: 30px;        // 화면 너비가 480px 이하인 장치는 이 규칙을 사용합니다
    }
}

@media print {
    body {
        ......
        font-family: Times, serif; // 페이지를 인쇄할 경우 이 규칙을 사용합니다
    }
}

p.specials {
    color: red;      // 다른 일반 규칙은 모든 페이지에 적용됩니다
}

태그: HTML CSS 웹개발

5월 28일 11:50에 게시됨

괴물 클럽

HTML과 CSS 첫걸음 초안(1~10)

인기 태그