위치잡기 - Web 개발 학습하기

위치잡기
====

* 이전
* Overview: CSS layout
* 다음

당신이 일반 문서 레이아웃 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 `position` 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.

|  |  |
| --- | --- |
| 선결 사항: | HTML의 기초 (HTML 입문서)와 CSS 작동 방식에 대한 개념(CSS 입문서를 공부하세요.) |
| 목표: | CSS 위치잡기가 작동하는 방법 배우기 |

가능하면 우리 깃허브 저장소에 있는 `0_basic-flow.html` 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (여기 소스 코드)가 있으니 그걸 착수 파일로 이용하십시요.

위치잡기 소개
-------

크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 레이아웃 내부의 일부 상자의 위치를 기본 레이아웃 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 레이아웃 작업을 가능하게 합니다.

HTML 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 `position` 속성을 사용합니다.

### 정적 위치잡기

정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 레이아웃 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."

이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 HTML상에 두 번째 `<p>` 요소에 `positioned`라는 클래스를 추가하십시오:

```html
<p class="positioned">...</p>
```

이제 다음과 같은 규칙을 당신의 CSS 하단에 추가하십시요:

```css
.positioned {
  position: static;
  background: yellow;
}
```

이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!

**참고:** **주석**: 이 시점에 예제의 실제 구현 장면을 `1_static-positioning.html`에서 볼 수 있습니다.(소스 코드는 여기서 보세요).

### 상대 위치잡기

상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 레이아웃 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 `position` 선언을 업데이트하십시요.

```css
position: relative;
```

현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, `top` (en-US), `bottom` (en-US)과 `left` (en-US), `right` (en-US)을 사용해야 합니다.

### 상하 좌우 위치잡기 소개

`top` (en-US), `bottom` (en-US)와 `left` (en-US), and `right` (en-US)는 `position`과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 CSS `.positioned` 규칙에 추가하십시오:
```

top: 30px;
left: 30px;
```

**참고:** 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 단위를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.

이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:
```

<h1>상대 위치잡기</h1>

<p>
  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
  자리합니다.
</p>

<p class="positioned">
  기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총
  높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.
</p>

<p>
  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
  구분됩니다. 두게의 여백이 아니라.
</p>

<p>
  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
  됩니다. 인라인 요소가 대열이탈할 경우
  <span
 >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
    접혀들어갑니다.)</span
 >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
  것처럼: <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, `top: 30px;`를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.

**참고:** 이 시점에 예제의 실제 구현 장면을 `2_relative-positioning.html`에서 확인할 수 있습니다(소스 코드 보기).

### 절대 위치잡기

절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.
```

position: absolute;
```

지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:
```

<h1>절대 위치잡기</h1>

<p>
  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
  자리합니다.
</p>

<p class="positioned">
  기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총
  높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.
</p>

<p>
  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
  구분됩니다. 두게의 여백이 아니라.
</p>

<p>
  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
  됩니다. 인라인 요소가 대열이탈할 경우
  <span
 >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
    접혀들어갑니다.)</span
 >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
  것처럼: <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 레이아웃 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…

둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 `top` (en-US), `bottom` (en-US)과 `left` (en-US), `right` (en-US)가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.

**참고:** 당신이 필요하다면 요소의 크기를 재지정하기 위해 `top` (en-US), `bottom` (en-US)과 `left` (en-US), `right` (en-US)를 사용할 수 있습니다. 당신이 위치잡기한 요소에 `top: 0; bottom: 0; left: 0; right: 0;`과 `margin: 0;`를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...

**참고:** **주석**: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.

**참고:** 당신은 `3_absolute-positioning.html`에서 예제를 확인할 수 있습니다(소스 코드를 보세요).

### 위치잡기 상황

어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See 콘테이너 블록 식별하기).

조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 **initial containing block**에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 `<html>` 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 `<html>` 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.

위치잡기한 요소는 HTML 소스의 `<body>` 안에 중첩되지만 최종 레이아웃에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 **positioning context**(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 `body` 규칙에 추가하십시요:
```

position: relative;
```

이로써 다음과 같은 결과가 나와야 합니다.
```

<h1>위치잡기 상황</h1>

<p>
  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
  자리합니다.
</p>

<p class="positioned">
  이제 나는 <code><html></code> 요소가 아닌
  <code><body></code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.
</p>

<p>
  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
  구분됩니다. 두게의 여백이 아니라.
</p>

<p>
  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
  됩니다. 인라인 요소가 대열이탈할 경우
  <span
 >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
    접혀들어갑니다.)</span
 >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
  것처럼: <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

위치잡기한 요소는 이제 기준이 되는 `<body>` 요소와 비례한 위치에 놓이게 된다.

**참고:** 당신은 이 시점에 예제의 실제 구현 장면을 `4_positioning-context.html`에서 볼 수 있습니다(소스 코드 보기).

### z-인덱스 소개

이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?

다음을 CSS에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.
```

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}
```

이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 `.positioned` 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 `.positioned` 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.

스택 순서를 변경할 수 있습니까? 네, `z-index` 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).

웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). `z-index` 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 `z-index`가 `auto` 값을 가지며, 이는 사실상 0입니다.

스택 순서를 변경하려면 다음 선언을 `p:nth-of-type(1)` rule: 규칙에 추가하십시오.
```

z-index: 1;
```

이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.
```

<h1>z-인덱스</h1>

<p>
  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
  자리합니다.
</p>

<p class="positioned">
  이제 나는 <code><html></code> 요소가 아닌
  <code><body></code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.
</p>

<p>
  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
  구분됩니다. 두게의 여백이 아니라.
</p>

<p>
  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
  됩니다. 인라인 요소가 대열이탈할 경우
  <span
 >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
    접혀들어갑니다.)</span
 >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
  것처럼: <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
  z-index: 1;
}
```

z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.

**참고:** 이 시점에 예제의 실제 구현 장면을 `5_z-index.html`에서 볼 수 있습니다(소스 코드 보기).

### 고정 위치잡기

이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 `<html>` 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.

우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 CSS에서 기존 `p:nth-of-type(1)`과 `.positioned` 규칙을 삭제합니다.

이제 `position: relative;` 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 `body` 규칙에 업데이트합니다:
```

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}
```

이제 우리는 `<h1>` 요소에 `position: fixed;`를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 CSS에 추가하세요.
```

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}
```

화면 상단에 고정시키려면 `top: 0;`이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 `margin: 0 auto;`를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.

지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:
```

p:nth-of-type(1) {
  margin-top: 60px;
}
```

당신은 이제 완성된 예제를 볼 수 있어야 합니다:
```

<h1>고정 위치잡기</h1>

<p>
  나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에
  자리합니다.
</p>

<p class="positioned">나는 더 이상 특별한 위치를 차지하지 않습니다...</p>

<p>
  우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로
  구분됩니다. 두게의 여백이 아니라.
</p>

<p>
  인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은
  라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게
  됩니다. 인라인 요소가 대열이탈할 경우
  <span
 >(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로
    접혀들어갑니다.)</span
 >, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는
  것처럼: <img src="long.jpg" />
</p>
```

```
body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}

p:nth-of-type(1) {
  margin-top: 60px;
}
```

**참고:** 당신은 이 시점에 예제의 실제 구현 장면을 `6_fixed-positioning.html`에서 볼 수 있습니다 (소스 코드는 여기서 보세요).

### position: sticky

이용할 수 있는 `position: sticky`라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.
```

<h1>흡착 위치잡기</h1>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>

<div class="positioned">흡착</div>

<p>
  Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
  ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
  est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
  tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus
  sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
  vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
  penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
  dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
  ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
  laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum,
  tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus
  neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat
  volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros
  pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec
  lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
</p>
```

```
body {
  width: 500px;
  margin: 0 auto;
}

.positioned {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
```

```css
.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}
```

`position: sticky`의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:

```html
<h1>흡착 위치잡기</h1>

<dl>
  <dt>A</dt>
  <dd>Apple</dd>
  <dd>Ant</dd>
  <dd>Altimeter</dd>
  <dd>Airplane</dd>
  <dt>B</dt>
  <dd>Bird</dd>
  <dd>Buzzard</dd>
  <dd>Bee</dd>
  <dd>Banana</dd>
  <dd>Beanstalk</dd>
  <dt>C</dt>
  <dd>Calculator</dd>
  <dd>Cane</dd>
  <dd>Camera</dd>
  <dd>Camel</dd>
  <dt>D</dt>
  <dd>Duck</dd>
  <dd>Dime</dd>
  <dd>Dipstick</dd>
  <dd>Drone</dd>
  <dt>E</dt>
  <dd>Egg</dd>
  <dd>Elephant</dd>
  <dd>Egret</dd>
</dl>
```

CSS는 다음과 같이 보일 수 있다. 일반 대열에서는 `<dt>` 요소가 콘텐츠와 함께 스크롤됩니다. `top` (en-US) 값이 0이고 `<dt>` 요소에 `position: sticky`를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.

```css
dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}
```

```
body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

dt {
  background-color: black;
  color: white;
  padding: 10px;
  position: sticky;
  top: 0;
  left: 0;
  margin: 1em 0;
}
```

```
<h1>흡착 위치잡기</h1>

<dl>
  <dt>A</dt>
  <dd>Apple</dd>
  <dd>Ant</dd>
  <dd>Altimeter</dd>
  <dd>Airplane</dd>
  <dt>B</dt>
  <dd>Bird</dd>
  <dd>Buzzard</dd>
  <dd>Bee</dd>
  <dd>Banana</dd>
  <dd>Beanstalk</dd>
  <dt>C</dt>
  <dd>Calculator</dd>
  <dd>Cane</dd>
  <dd>Camera</dd>
  <dd>Camel</dd>
  <dt>D</dt>
  <dd>Duck</dd>
  <dd>Dime</dd>
  <dd>Dipstick</dd>
  <dd>Drone</dd>
  <dt>E</dt>
  <dd>Egg</dd>
  <dd>Elephant</dd>
  <dd>Egret</dd>
</dl>
```

**참고:** 당신은 이 시점에 예제의 실제 구현 장면을 `7_sticky-positioning.html`에서 볼 수 있습니다(소스 코드는 여기서 보세요).

요약정리
----

기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 레이아웃에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.

* 이전
* Overview: CSS layout
* 다음
참조 항목
-----

* `position` 속성 참조.
* 좀 더 유용한 구상을 위한 실용적인 위치잡기 사례 (en-US)


레거시 레이아웃 메서드 - Web 개발 학습하기

레거시 레이아웃 메서드
============

* 이전
* Overview: CSS layout
* 다음

격자 시스템은 CSS 레이아웃에서 사용되는 매우 일반적인 기능이며, CSS 격자 레이아웃 이전에는 부동체 또는 기타 레이아웃 기능을 이용하여 격자 레이아웃이 구현되는 경향이 있었습니다. 당신의 레이아웃을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 당신의 콘텐츠 열을 그 가상의 열 안에 끼워맞춥니다. 이 문서에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.

|  |  |
| --- | --- |
| 선결 사항: |
 HTML 기본 (HTML 입문
 학습), CSS의 작동 방식
 CSS 입문 및
 (박스 양식 지정 학습)
  |
| 목표: |
 CSS 격자 레이아웃 이전에 사용된 격자 레이아웃 시스템의 기본 개념을
 브라우저에서 사용할 수 있습니다.
  |

CSS 격자 레이아웃 이전의 레이아웃 및 격자 시스템
-----------------------------

CSS가 아주 최근까지 내장된 격자 시스템을 갖고 있지 않았고, 그 대신 격자와 같은 디자인 생성을 위해 최적화에 못 미치는 다양한 방법을 사용했다니 디자인 배경의 경력자 관점에서 보면 놀랍게 보일 듯합니다. 우리는 이제 이것을 "래거시"라고 부릅니다.

새로운 프로젝트의 경우 모든 레이아웃의 기초를 형성하기 위해 대체로 CSS 격자 레이아웃이 하나 이상의 다른 현대 레이아웃 메서드와 연동되어 사용됩니다. 그러나 여러분은 이러한 레거시 메서드를 사용하는 "격자 시스템"을 수시로 접하게 될겁니다. 그들 레거시 메서드의 작동 방식, 그리고 CSS 격자 레이아웃과 다른 이유에 대해 이해할 가치가 있습니다.

이번 단원은 부동체와 플렉스박스 작동 방식을 기반으로 한 격자 시스템과 격자 프레임워크가 어떻게 작동하는지 설명합니다. 당신이 격자 레이아웃을 공부한 상태라면 이 모든 것이 얼마나 복잡해 보이는지 놀랄 겁니다! 이러한 지식은 새로운 메서드를 지원하지 않는 브라우저를 위한 대체 코드를 작성해야 할 경우에 도움이 될 뿐만 아니라 이러한 유형의 시스템을 사용하는 기존 프로젝트에서 작업할 수 있게 해줄 것입니다.

우리가 이들 격자 시스템을 탐구할 때, 그것들 중 어느 것도 CSS 격자 레이아웃(CSS Grid Layout)이 격자를 만드는 방식으로 격자를 만들지는 않는다는 사실을 염두에 두어야 합니다. 그들은 항목의 크기를 부여하고, 항목 무리 주변을 밀어내어 격자 *모양*처럼 정렬해 보여주는 식으로 작동합니다.

2열 레이아웃
-------

가능한 가장 간단한 예시인 두 개의 열 레이아웃으로 시작하겠습니다. 아래 내용을 따라하려면 당신의 컴퓨터에 `index.html` 파일을 새로 작성하여, 거기에 간단한 HTML 템플릿으로 채우고, 파일 내부의 적절한 위치에 아래 코드를 삽입하면 됩니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.

우선, 우리는 칼럼에 넣을 몇 가지 콘텐츠가 필요합니다. 현재 HTML의 바디 내부에 있는 것을 아래 내용으로 대체하십시오:

```html
<h1>2열 레이아웃 예제</h1>
<div>
  <h2>첫 번째 열</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>
</div>

<div>
  <h2>두 번째 열</h2>
  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
```

각 열에는 자체 콘텐츠를 포함하게 되고, 모든 콘텐츠를 한꺼번에 조작할 수 있게 해주는 외부 요소가 필요합니다. 이번 예제에서 우리는 `<div>` (en-US)를 선택했지만, 당신은 `<article>`와 복수의 `<section>`, `<aside>`, 그 밖에 무엇이 됐건 한층 의미적으로 적절한 것을 선택할 수 있습니다.

이제 CSS 내용입니다. 우선 다음을 HTML에 적용해 몇 가지 기본적인 설정을 제공합니다.

```css
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}
```

HTML 바디 요소는 900px의 너비가 될 때까지 뷰포트 너비의 90%를 차지할 것이며, 이 경우 그 너비에 고정될 것이며, 뷰포트 안에 중심부에 자신을 위치시킬 겁니다. 기본값으로 바디 요소의 자녀들(`<h1>`와 두 개의 `<div>` (en-US)는 바디 너비 100%까지 확장될 것입니다. 두 개의 `<div>` (en-US)가 나란히 부동하길 원한다면, 자녀 요소의 너비를 부모 요소의 너비의 총합계가 100% 또는 그 이하로 설정해 상대 요소와 나란히 들어맞을 수 있도록 해야 합니다. 다음을 당신의 CSS의 맨 아래에 추가하세요:

```css
div:nth-of-type(1) {
  width: 48%;
}

div:nth-of-type(2) {
  width: 48%;
}
```

여기서 우리는 두 요소의 너비를 부모 요소의 48%로 설정했습니다. 너비의 총합은 96%로써 결국 4% 남는 공간이 두 열 사이의 배수구 역할을 하게 됩니다. 이제 우리는 열을 부동(浮動)시킬 필요가 있습니다. 다음과 같이:

```css
div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}
```

이 모든 것을 종합하면 다음과 같은 결과가 나와야 합니다.
```

<h1>2 column layout example</h1>

<div>
  <h2>첫 번째 열</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
    aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
    pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at
    ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer
    ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur
    vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus.
    Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus
    sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus.
    Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis,
    eget fermentum sapien.
  </p>
</div>

<div>
  <h2>두 번째 열</h2>
  <p>
    Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
    ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
    est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
    tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
    lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis
    vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </p>
</div>
```

```
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}
```

여기서 여러분은 우리가 모든 너비에 대해 백분율을 사용하고 있음을 알아차릴 것입니다. 이것은 **liquid layout**을 생성하기 때문에 꽤 좋은 전략입니다. 이것은 서로 다른 화면 크기에 적응하고 더 작은 화면 크기에서 열 너비에 대해 동일한 비율을 유지하게 됩니다. 브라우저 창의 너비를 조정해 보십시오. 이같은 특징은 반응형 웹 디자인을 위한 귀중한 도구입니다.

**참고:** 당신은 이 예제가 작종하는 장면을 여기서 0\_two-column-layout.html 볼 수 있습니다. (또한, 여기 소스 코드)도 있습니다.

간단한 레거시 격자 프레임워크 생성하기
---------------------

레거시 프레임 워크의 대부분은 격자처럼 보이는 것을 만들기 위해한 열을 다른 열 옆에 부동시키기 위해 `float` 속성의 동작을 이용합니다. 부동을 포함한 격자 생성 과정을 통해 이 방법이 어떻게 작동하는지 여러분에게 보여주고, 여러분이 부동 및 해제 단원에서 배운 것을 바탕으로 능력을 배가하기 위해 더 발전된 개념을 도입합니다.

격자 프레임워크를 생성할 수 있는 가장 편리하게 유형은 고정 너비입니다. 즉, 우리는 우리가 목표로 하는 디자인의 총 너비, 우리가 원하는 열의 수, 배수로의 너비 및 열의 너비를 계산할 필요가 있습니다. 대신 브라우저 너비에 따라 커지고 축소되는 열이 있는 격자상에 디자인을 배치하기로 한다면 열 무리에 대한 백분율 너비와 열 사이 배수로 너비를 계산해야 할 겁니다.

다음 절에서는 두 가지를 어떻게 생성할지 살펴볼 것입니다. 우리는 12개의 열 격자를 생성할 것입니다. 12열이 6, 4, 3, 2로 잘 나눌 수 있다는 점을 감안할 때, 매우 일반적인 선택입니다.

### 간단한 고정 너비 격자

먼저 고정 너비 열을 사용하는 격자 시스템을 생성해 봅시다.

먼저, 우리 예제인 simple-grid.html 사본 파일을 만듭니다. 여기에는 바디 부분에 다음과 같은 마크업을 포함하고 있습니다.

```html
<div class="wrapper">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col span1">13</div>
    <div class="col span6">14</div>
    <div class="col span3">15</div>
    <div class="col span2">16</div>
  </div>
</div>
```

우리의 목표는 이것을 12열 격자상에 2행 격자를 시연하는 것입니다. 상단 행은 개별 열의 크기를 나타내고 두 번째 행은 격자 크기가 서로 다른 영역입니다.

![](/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods/simple-grid-finished.png)

`<style>` 요소에는 외곽(래퍼) 컨테이너에 980픽셀의 너비를 부여하는 아래와 같은 코드를 추가하고 오른쪽에 패딩으로는 20픽셀 우측을 추가합니다. 이로써 열 및 배수로의 총 너비를 위해 960픽셀이 주어집니다. 이 경우, 사이트의 모든 요소에 `box-sizing`을 `border-box`로 설정했기 때문에 패딩은 총 콘텐츠 너비에서 제외할 수 있습니다(자세한 설명은 상자 모델의 전면 변경 (en-US)을 참조하세요).

```css
\* {
  box-sizing: border-box;
}

body {
  width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 20px;
}
```

이제 격자의 각 행을 둘러싸는 행 컨테이너를 사용하여 한 행을 다른 행으로부터 정리하여 구분합니다. 다음과 같은 규칙을 이전 규칙 아래에 추가하십시오:

```css
.row {
  clear: both;
}
```

이렇게 정리를 적용한다는 것은 요소 무리가 딸린 각각의 행을 요소 무리로 가득 채울 필요가 없다는 것을 의미합니다. 행은 계속 분리된 채로 있으며, 서로 간섭하지 않습니다.

열 사이의 배수로는 20픽셀 너비입니다. 컨테이너의 우측 편에 패딩 20픽셀을 부여해 균형을 잡기 위해 첫 번째 열을 포함하여 각 열의 왼편에 여백의 형태로 배수로를 생성했습니다. 그래서 우리는 총 12개의 배수로 가지고 있습니다. 따라서 12 x 20 = 240입니다.

우리는 총 너비 960 픽셀에서 배수로 부분을 빼야 함으로 우리의 열 무리를 위해 720픽셀이 주어집니다. 당장에 그것을 12로 나눈다면, 각 열은 60 픽셀이어야 한다는 것을 알 수 있습니다.

다음 단계는 클래스 `.col`에 대한 규칙을 생성하는 일입니다. 동 클래스에 속한 요소를 왼쪽으로 부동시키고, 배수구를 형성하기 위해 20픽셀의 `margin-left`와 60픽셀의 `width` 값을 동 요소에 부여합니다. 다음 규칙을 당신의 CSS의 맨 아래에 추가하십시오:

```css
.col {
  float: left;
  margin-left: 20px;
  width: 60px;
  background: rgb(255, 150, 150);
}
```

이제 단일 열 무리 형태의 상단 행은 격자처럼 깔끔하게 배치됩니다.

**참고:** **주석**: 각 열에 밝은 빨간색 색상을 부여하여 각 공간이 얼마나 많은지 정확하게 볼 수 있습니다.

두 개 이상의 열을 하나로 합치길 원하는 레이아웃 컨테이너에 대해선 해당 컨테이너에 `width` 값을 필요한(합치기 할) 열 갯수에 맞춰(아울러 열 사이 배수구 숫자까지 포함해) 조정하기 위해 특별한 클래스를 부여할 필요가 있습니다. 우리는 컨테이너 무리가 2열에서 12열까지 (원하는 열 갯수만큼) 하나로 합칠 수 있도록 추가 클래스를 만들 필요가 있습니다. 각 열의 너비는 (하나로 합쳐질) 해당 열 갯수의 열 너비와 배수구 너비를 합산한 결과입니다. 여기서 배수구 숫자는 항상 열 갯수에서 하나가 빠집니다.

당신의 CSS 맨 아래에 다음을 추가하십시요.

```css
/\* Two column widths (120px) plus one gutter width (20px) \*/
.col.span2 {
  width: 140px;
}
/\* Three column widths (180px) plus two gutter widths (40px) \*/
.col.span3 {
  width: 220px;
}
/\* And so on... \*/
.col.span4 {
  width: 300px;
}
.col.span5 {
  width: 380px;
}
.col.span6 {
  width: 460px;
}
.col.span7 {
  width: 540px;
}
.col.span8 {
  width: 620px;
}
.col.span9 {
  width: 700px;
}
.col.span10 {
  width: 780px;
}
.col.span11 {
  width: 860px;
}
.col.span12 {
  width: 940px;
}
```

이러한 클래스를 생성해 놓았다면 격자에 서로 다른 너비의 열 무리를 배치할 수 있습니다. 페이지를 저장하고 브라우저에 불러들여 효과를 확인하십시오.

**참고:** **참조**: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 완성된 버전과 비교해보세요. (라이브로도 보세요).

당신의 요소 무리에 적용한 클래스를 수정하거나 일부 컨테이너를 추가 및 제거해보며 당신이 어떻게 레이아웃에 변경을 가할 수 있는지 확인하십시오 예를 들어 두 번째 행을 이렇게 만들 수 있습니다:

```css
<div class="row">
  <div class="col span8">13</div>
  <div class="col span4">14</div>
</div>
```

이제 격자 시스템이 작동합니다. 여러분은 단순히 행 무리를 정의하고 각 행에 열 갯수를 정의한 다음 각 컨테이너에 필요한 내용을 채울 수 있습니다. 대단하죠!

### 유동 격자 생성하기

우리 격자는 잘 작동하지만, 고정 너비를 가지고 있습니다. 우리는 브라우저 viewport에서 사용 가능한 공간과 함께 확대되고 축소될 가변 (유동) 격자를 정말로 원합니다. 이를 위해 기준 픽셀 너비를 백분율로 바꿀 수 있습니다.

고정 너비를 유연한 백분율 기반으로 변환하는 방정식은 다음과 같습니다.
```

target / context = result
```

열 너비의 경우 목표 너비는 60픽셀이고 콘텐츠는 래퍼 클래스의 총합 960픽셀입니다. 우리는 백분율을 계산하기 위해 다음을 사용할 수 있습니다.
```

60 / 960 = 0.0625
```

그리고 나서 우리는 소수점을 2자리 옮기면 백분율 6.25%가 주어집니다. 그래서 우리의 CSS에서 60픽셀의 열 너비를 6.25%로 대체할 수 있습니다.

우리는 여러분의 배수로 너비에도 똑같이 적용해야 합니다.
```

20 / 960 = 0.02083333333
```

따라서 우리는 `.col` 규칙에 있는 20픽셀의 `margin-left`과 `.wrapper` 규칙에 있는 20픽셀의 `padding-right`를 2.08333333%로 대체해야 합니다.

#### 여러분의 격자 업데이트 하기

이번 절을 시작하려면 이전 예제 페이지의 새 사본을 만들거나 simple-grid-finished.html를 착수파일로 사용하십시오.

다음과 같이 (`.wrapper` 선택기에 해당하는) 두 번째 CSS 규칙을 업데이트 하십시오:

```css
body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}
```

우리는 백분율 너비를 부여했을뿐만 아니라 레이아웃이 과도하게 확대되는 것을 막기 위해 `max-width` 속성을 추가했습니다.

다음은 아래와 같이 (`.col` 선택기에 해당하는) 네 번째 CSS 규칙을 업데이트 하십시오:

```css
.col {
  float: left;
  margin-left: 2.08333333%;
  width: 6.25%;
  background: rgb(255, 150, 150);
}
```

이제 약간 노동력이 투여되어야 할 부분이 있습니다. 픽셀 너비보다는 백분율을 사용하기 위해 모든 `.col.span` 규칙을 업데이트해야 합니다. 계산기를 사용하려면 시간이 좀 걸립니다. 여러분들의 노력을 아끼기 위해, 아래와 같이 여러분을 대신해 우리가 마무리지었습니다.

다음을 통해 CSS 규칙의 하위 블록을 업데이트합니다.

```css
/\* Two column widths (12.5%) plus one gutter width (2.08333333%) \*/
.col.span2 {
  width: 14.58333333%;
}
/\* Three column widths (18.75%) plus two gutter widths (4.1666666) \*/
.col.span3 {
  width: 22.91666666%;
}
/\* And so on... \*/
.col.span4 {
  width: 31.24999999%;
}
.col.span5 {
  width: 39.58333332%;
}
.col.span6 {
  width: 47.91666665%;
}
.col.span7 {
  width: 56.24999998%;
}
.col.span8 {
  width: 64.58333331%;
}
.col.span9 {
  width: 72.91666664%;
}
.col.span10 {
  width: 81.24999997%;
}
.col.span11 {
  width: 89.5833333%;
}
.col.span12 {
  width: 97.91666663%;
}
```

이제 코드를 저장하고 브라우저에 내용을 불러들이면 뷰포트 너비를 변경해보십시오. 열 너비가 멋지게 조정되는 것을 볼 수 있어야 합니다.

**참고:** **참조**: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 완성된 버전과 비교해보세요. (라이브로도 보세요).

### calc() 함수를 사용한 편리한 계산법

CSS 내부에서 직접 calc() 함수를 사용하여 수학 계산을 할 수 있습니다. 이것은 여러분의 CSS 값에 단순한 수학 방정식을 삽입하고 값이 무엇인지 계산할 수 있게 해줍니다. 복잡한 수학이 있을 때 특히 유용하며, 예를 들어 "나는 이 요소의 높이가 항상 부모의 높이의 100% 마이너스 50px가 되기를 원한다"와 같은 서로 다른 단위를 사용하는 셈법까지 계산할 수 있습니다. MediaRecorder API 자습서에 있는 예제를 보십시요 (en-US).

어쨌든, 다시 여러분의 격자로 복귀합시다! 여러분의 격자에서 한 열 이상을 하나로 합치기하고자 하는 어떤 열은 총 너비가 6.25%이고, 거기에 하나로 합치기할 열 갯수를 곱하고, 거기에 2.08333333%를 배수로 갯수로 곱하기합니다(실제 배수로의 갯수는 항상 열 갯수에서 하나 빼기가 됩니다.) 여러분은 `calc()` 함수을 통해서 여러분이 이러한 셈법을 너비 값 내부에서 바로 계산을 할 수 있으므로, 4열 합치기할 항목에 대해서는 다음과 같이 할 수 있습니다.

```css
.col.span4 {
  width: calc((6.25% * 4) + (2.08333333% * 3));
}
```

여러분의 CSS 규칙의 하단 블록을 다음 값으로 대체한 다음 브라우저에서 다시 불러들여 동일한 결과를 얻을 수 있는지 확인하십시오:

```css
.col.span2 {
  width: calc((6.25% * 2) + 2.08333333%);
}
.col.span3 {
  width: calc((6.25% * 3) + (2.08333333% * 2));
}
.col.span4 {
  width: calc((6.25% * 4) + (2.08333333% * 3));
}
.col.span5 {
  width: calc((6.25% * 5) + (2.08333333% * 4));
}
.col.span6 {
  width: calc((6.25% * 6) + (2.08333333% * 5));
}
.col.span7 {
  width: calc((6.25% * 7) + (2.08333333% * 6));
}
.col.span8 {
  width: calc((6.25% * 8) + (2.08333333% * 7));
}
.col.span9 {
  width: calc((6.25% * 9) + (2.08333333% * 8));
}
.col.span10 {
  width: calc((6.25% * 10) + (2.08333333% * 9));
}
.col.span11 {
  width: calc((6.25% * 11) + (2.08333333% * 10));
}
.col.span12 {
  width: calc((6.25% * 12) + (2.08333333% * 11));
}
```

**참고:** 여러분은 최종 버전을 fluid-grid-calc.html에서 확인할 수 있습니다. (라이브로도 보세요).

**참고:** 여러분의 실습 과정에서 이 같은 내용이 제대로 작동되지 않았다면 여러분의 브라우저가 `calc()` 함수를 지원하지 않기 때문일 수 있습니다. 다만 이 함수는 멀게는 인터넷 익스플로러 9까지 브라우저 구분없이 지원됩니다.

### 말 되는 VS "말 안되는" 격자 시스템

레이아웃을 정의하기 위해 여러분의 마크업에 클래스를 추가하면 콘텐츠와 마크업이 시각적 프리젠테이션과 결부됩니다. 당신은 때때로 콘텐츠를 설명하는 클래스에 말되는 이름을 사용하기보다는 콘텐츠가 어떻게 보일지 설명하는 "말 안되는" 이름을 사용하는 CSS 클래스 용례를 접하게 됩니다. 여기서 `span2`, `span3`, 기타 등등과 같은 클래스의 경우가 그렇습니다.

이런 식의 접근 방법만 있는게 아닙니다. 대신 여러분이 격자를 결정한 다음 말 되게 명명된 기존 클래스 규칙에 크기 정보를 추가할 수 있습니다. 예를 들어, 여러분이 8열을 하나로 합치기 원하는 `<div>` (en-US) 요소에 `content`라는 클래스를 부여할 경우 `span8` 클래스가 출처인 너비 계산값을 복사해 쓸 수 있는데, 그와 같은 규칙은 이렇게 제공됩니다:

```css
.content {
  width: calc((6.25% * 8) + (2.08333333% * 7));
}
```

**참고:** 당신이 Sass와 같은 전처리기를 사용하려면, 당신을 위해 해당 값을 삽입해주는 간단한 `maxin`를 생성할 수 있다.

### 격자 내부에 컨테이너 오프셋 가동

우리가 생성한 격자는 컨테이너 무리 전체를 격자의 왼쪽편과 일치시켜 출발하길 원하는 경우에 잘 작동합니다. 첫 번째 컨테이너 또는 컨테이너 사이에 빈 열 공간을 남기고 싶다면 여러분의 사이트에 왼쪽 여백을 추가하여 격자를 시각적으로 밀어 넣을 수 있는 오프셋 클래스를 생성해야 합니다. 또 다시 수학을!

이렇게 해봅시다.

이전 코드에서 출발하거나, fluid-grid.html을 착수 파일로 사용합니다.

컨테이너 요소를 한 열 너비만큼 밀어낼 클래스를 여러분의 CSS 안에 생성합니다. 다음을 당신의 CSS의 맨 아래에 추가하세요:

```css
.offset-by-one {
  margin-left: calc(6.25% + (2.08333333% * 2));
}
```

Or if you prefer to calculate the percentages yourself, use this one:

```css
.offset-by-one {
  margin-left: 10.41666666%;
}
```

이제 여러분이 왼편에 하나의 열 너비의 빈 공간을 남기길 원하는 컨테이너는 어느 것이든 이 클래스를 추가할 수 있습니다. 예를 들면 여러분의 HTML에 이런 내용이 있다면:

```html
<div class="col span6">14</div>
```

그걸 다음으로 대체하세요.

```html
<div class="col span5 offset-by-one">14</div>
```

**참고:** 간격띄우기를 위한 공간을 만들기 위해, 합쳐질 열의 갯수를 줄여야 한다는 걸 놓치지 마세요!

달라진 모습을 보려면 브라우저에 불러들이거나 새로고침을 하세요. 아니면 fluid-grid-offset.html 예제가 실제 실행되는 장면을 보세요. 완성된 예는 다음과 같이 보여야 합니다.

![](/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods/offset-grid-finished.png)

**참고:** 추가 연습의 하나로 여러분은 `offset-by-two`(2칸 간격띄우기) 클래스를 구현할 수 있습니까?

### 부동 격자 제한

이런 시스템을 사용할 때는 총 너비가 정확하게 합산되는지, 행이 수용할 수 있는 것보다 더 많은 열을 하나로 합치려는 요소 무리를 행에 포함하지 않도록 주의해야 합니다. 부동체가 작동하는 방식 때문에 격자 열의 갯수가 해당 격자에 비해 너무 과대해지면 끝 부분에 있는 요소 무리가 다음 행으로 떨어지면서 격자가 깨집니다.

또한 요소 무리의 콘텐츠가 그들 요소들이 점유하는 행보다 넓어지면, 대열이탈되어 엉망으로 보일 것이라는 점을 염두에 두십시오.

이 시스템의 가장 큰 한계는 본질적으로 1차원이라는 점에 있습니다. 우리가 지금 여러 열에 걸쳐 요소를 하나로 합치도록 처리하자는 것이지 행 처리가 아닙니다. 이러한 오래된 레이아웃 메서드는 요소의 높이를 명시적으로 설정하지 않고서는 요소의 높이를 제어하기가 매우 어렵습니다. 이는 매우 유연하지 않은 접근 방식이기도 합니다. 이는 여러분의 콘텐츠가 특정 높이라고 예상될 경우에만 먹힙니다.

플렉스박스 격자?
---------

플렉스박스에 대한 이전 기사를 읽으면 플렉스박스가 격자 시스템을 생성하는 데 이상적인 해결책이라고 생각할 수 있습니다. 이용할 수 있는 플렉스박스 기반 격자 시스템이 많이 있으며, 플렉스박스는 상기한 내용에서 격자를 만들 때 이미 발견한 많은 문제를 해결할 수 있습니다.

그러나 플렉스박스는 격자 시스템처럼 디자인되지 않았으며 그런 식의 시스템으로 사용할 때 일련의 새로운 도전 과제를 던져줍니다. 간단한 예로 위에서 사용한 것과 동일한 예제 마크업을 채택해 아래의 CSS를 사용하여 `wrapper`와 `row` 및 `col` 클래스를 사용하여 스타일링할 수 있습니다.

```css
body {
  width: 90%;
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  padding-right: 2.08333333%;
}

.row {
  display: flex;
}

.col {
  margin-left: 2.08333333%;
  margin-bottom: 1em;
  width: 6.25%;
  flex: 1 1 auto;
  background: rgb(255, 150, 150);
}
```

이 대체 요소를 여러분의 예제에서 만들거나, 우리의 flexbox-grid.html 예제 코드를 볼 수 있습니다(실제 실행 장면도 참조하세요).

여기에서 우리는 각 행을 플렉스 컨테이너로 탈바꿈하고 있습니다. 플렉스박스 기반 격자가 있다고 하더라도 요소를 다합쳐 100% 미만를 차지하는 요소 무리를 확보하려면 여러분은 여전히 행이 필요합니다. 우리는 해당 콘테이너를 `display: flex`로 설정했습니다.

우리는 `.col` 클래스상에 `flex` 속성의 첫 번째 값인 (`flex-grow`)를 1로 설정하여 항목 무리가 확장할 수 있게 하고, 두 번째 속성값인 (`flex-shrink`)를 1로 설정하여 항목 무리가 축소할 수 있게 하며 세 번째 값인 (`flex-basis`)를 `auto`로 설정했습니다. 우리의 요소는 `width`(너비)가 설정되어 있고, `auto` 값을 통해 해당 너비값을 `flex-basis` 값으로 사용하게 됩니다.

맨 위 라인에는 격자 위에 12개의 깔끔한 상자가 있고, 뷰포트 너비를 변경할 때 상자는 똑같이 확장하고 수축합니다. 그러나 다음 행에서는 4개의 항목만 있으며, 이들은 60px 기준에서 확장하고 축소됩니다. 그 중 단 4개만 상위 행에 있는 항목보다 훨씬 더 많이 확장할 수 있습니다. 그 결과 두 번째 행에서 모두 같은 너비를 차지합니다.

![](/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods/flexbox-grid-incomplete.png)

이를 수정하려면 해당 요소에 대해 `flex-basis`가 사용하는 값을 대체할 너비를 제공하기 위해 `span` 클래스를 포함해야 합니다.

또한 상위 항목 무리가 사용하는 격자를 존중하지 않습니다. 왜냐하면 그들은 그것에 대해 아무것도 모르기 때문입니다.

플렉스박스는 디자인 자체로 **one-dimensional**입니다. 그것은 1차원 즉 행이나 열을 다룹니다. 열과 행에 대해 엄격한 격자를 만들 수는 없습니다. 즉, 여러분의 격자에 플렉스박스를 사용하려면 부동 레이아웃에서와 같이 백분율을 계산해야 합니다.

당신이 참여하는 프로젝트에서 부동체보다 플렉스박스가 제공하는 공간 배분 능력이나 추가적인 정렬 기능을 이유로 여전히 플렉스박스 '격자'를 선택해 사용할 수도 있습니다. 하지만 당신이 사용하는 것이 원래 설계된 목적 이외의 다른 목적의 도구를 사용하고 있다는 것을 알아야 합니다. 그래서 당신은 이런 느낌이 들지도 모르겠다. 내가 원하는 최종 결과를 얻으려는 나에게 이놈이 추가적인 장애물을 통과하도록 만들고 있구나.

제3자 격자 시스템
----------

이제 우리는 격자 셈법의 배경이 되는 수학을 이해하게 되면서, 널리 이용되고 있는 제3자 격자 시스템 중 일부를 살펴 볼만한 좋은 여건을 갖췄습니다. 웹에서 "CSS 격자 프레임워크"를 검색하면 선택할 수 있는 옵션 목록이 엄청납니다. Bootstrap와 Foundation같은 인기 프레임워크에는 격자 시스템이 포함되어 있습니다. 또한 CSS 혹은 전처리기를 사용하여 개발된 독립형 격자 시스템도 있습니다.

이 독립형 시스템 중 하나를 살펴봅니다. 이 시스템은 격자 프레임워크를 사용하는 일반적인 기술을 보여줍니다. 우리가 사용할 격자는 단순한 CSS 프레임워크인 Skeleton의 일부입니다.

시작하려면 Skeleton website를 방문하고 ZIP 파일을 다운로드하기 위해 "다운로드"를 선택합니다. 압축파일을 풀고 skeleton.css와 normalize.css를 새 폴더에 복사하십시오.

html-skeleton.html파일의 복사본을 만들어, skeleton과 normalize CSS 파일이 위치한 폴더와 같은 폴더에 저장합니다.

다음과 같은 내용을 복사본 파일의 헤드 섹션에 skeleton과 normalize CSS 파일에 포함시킵니다:

```html
<link href="normalize.css" rel="stylesheet" />
<link href="skeleton.css" rel="stylesheet" />
```

Skeleton에는 격자 시스템 이외에도 많은 내용이 포함되어 있습니다. 타이포그래피를 위한 CSS 및 착수점으로 사용할 수 있는 다른 페이지 요소도 포함되어 있습니다. 하지만 지금은 이들을 기본값으로 남겨둘 겁이다. 우리가 정말로 관심을 갖고 있는 것은 격자입니다.

**참고:** Normalize는 니콜라스 겔러거가 작성한 정말로 유용한 소형 CSS 라이브러리로, 자동으로 몇 가지 유용한 기본 레이아웃의 수정을 수행하고, 기본 요소 스타일링을 브라우저를 막론하고 보다 일관되게 만들어 줍니다.

우리는 이전 예와 비슷한 HTML을 사용할 것입니다. 다음을 여려분의 HTML 바디에 추가하십시요:

```html
<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>
    <div class="col">5</div>
    <div class="col">6</div>
    <div class="col">7</div>
    <div class="col">8</div>
    <div class="col">9</div>
    <div class="col">10</div>
    <div class="col">11</div>
    <div class="col">12</div>
  </div>
  <div class="row">
    <div class="col">13</div>
    <div class="col">14</div>
    <div class="col">15</div>
    <div class="col">16</div>
  </div>
</div>
```

Skeleton을 사용하기 위해서는 `container` 클래스를 랩퍼(바깥쪽) `<div>` (en-US)에 부여할 필요가 있습니다. 이 내용은 이미 우리 HTML에 포함되어 있습니다. 이것은 최대 너비가 960픽셀인 콘텐츠를 중심부에 위치시킵니다. 이제 상자의 너비가 어떻게 960픽셀을 절대 초과할 수 없는지 볼 수 있습니다.

이 클래스를 적용할 때 사용되는 CSS를 보려면 skeleton.css 파일을 직접 볼 수 있습니다. `<div>`는 `auto` 좌우 여백 을 사용하여 중심부 위치에 놓이고, 20픽셀의 패딩을 좌우로 적용한다. 또한 Skeleton은 `box-sizing` 속성을 우리가 이전에 했던 것처럼 `border-box`로 설정하므로 이 요소의 패딩과 경계가 전체 너비에 포함됩니다.

```css
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
```

요소는 행 안에 있는 경우에만 격자의 일부가 될 수 있으므로, 이전 예제와 마찬가지로 추가적인 `<div>`가 필요하거나 `content`와 `<div>`, 실제 콘텐츠 컨테이너 `<div>` 무리 사이에 중첩된 `row` 클래스가 부여된 다른 요소가 필요합니다. 우리는 이미 이것을 완성했습니다.

이제 컨테이너 상자를 정리해 봅시다. Skeleton은 12개의 열 격자 기반입니다. 맨 위 라인의 상자 전체는 그 상자 무리를 하나의 열로 합치기 위해 모두 `one column`이란 클래스가 필요합니다.

아래에 나온 HTML 조각 내용을 지금 추가하십시오.

```html
<div class="container">
  <div class="row">
    <div class="one column">1</div>
    <div class="one column">2</div>
    <div class="one column">3</div>
    /* and so on */
  </div>
</div>
```

다음으로 아래와 같이 하나로 합치기할 열의 수를 설명하는 클래스를 두 번째 행에 놓인 컨테이너에 부여합니다.

```html
<div class="row">
  <div class="one column">13</div>
  <div class="six columns">14</div>
  <div class="three columns">15</div>
  <div class="two columns">16</div>
</div>
```

HTML 파일을 저장하고 브라우저에 불러들여 효과를 확인하십시오.

**참고:** 위의 예제를 제대로 적용하기가 어렵다면, 그것을 우리의 html-skeleton-finished.html 파일과 비교해 보십시오. (그것을 라이브로도 보세요).

당신이 (앞서 다운로드한) skeleton.css 내용을 보면 어떻게 작동하는지 알 수 있습니다. 예를 들어, Skeleton 파일에는 다음과 같이 "three columns" 클래스가 적용되는 요소를 스타일링하기 위한 정의가 부여되어 있습니다.

```css
.three.columns {
  width: 22%;
}
```

모든 Skeleton(또는 다른 격자 프레임워크)은 여러분의 마크업에 추가하여 사용할 수 있는 미리 정의된 클래스를 설정하는 것입니다. 해당 백분율을 계산하는 작업은 마치 당신이 직접 한 것과 똑같습니다.

보시다시피, 우리는 Skeleton을 사용할 때 CSS를 거의 쓰지 않아도 됩니다. 그것은(Skeleton) 당신의 마크업에 클래스를 추가할 때 우리를 대신해 모든 부동 요소를 처리합니다. 격자 시스템에 대한 프레임워크를 사용하여 만들어진 무언가에 레이아웃에 대한 책임을 넘겨주는 이러한 능력을 갖춘 Skeleton은 설득력있는 선택입니다. 그러나 요즘 CSS 격자 레이아웃도 있고해서 많은 개발자가 CSS가 제공하는 내장형 고유 격자를 사용하기 위해 이러한 프레임 워크에서 멀어지고 있습니다.

요약정리
----

이제 다양한 격자 시스템이 어떻게 만들어지는지 이해하게 되었는데, 이는 구형 사이트에서 작업할 때와 CSS 격자 레이아웃이 제공하는 기본 격자와 이들 구형 시스템 간의 차이를 이해하는 데 유용합니다.

* 이전
* Overview: CSS layout
* 다음


내용물 - Web 개발 학습하기

내용물
===

**경고:** 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.

CSS 시작하기 안내서 9번째 장; 이번에는 CSS에서Document에 표시될 내용물을 추가 하는 방법을 알아보자. stylesheet를 수정해서 텍스트 내용과 이미지를 수정해 보자.

정보: 내용물
-------

CSS사용상의 가장 큰 장점은 document의 스타일과 내용물을 분리할 수 있도록 도와준다. 하지만 아직은 Document의 일부가 아니라 Stylesheet의 일부로서 존재해야 이치가 맞아 보이는 내용들도 있다.

stylesheet에 놓여진 내용물(content)은 텍스트나 이미지로 구성될 수 있다. Document의 구조와 밀접하게 연결된 내용물(content)은 stylesheet에 명시 할수 있다.

좀더 자세히

stylesheet에 내용물(content)을 표시하는 것은 복잡한 문제를 발생 시킬 수도 있다. 예를 들면, 동일한 stylesheet를 사용하는 여러 언어를 지원하는 Document의 경우이다. 만약 stylesheet일 일부분이 번역되어야 하는 경우가 있다면 이 부분은 stylesheet와는 분리된 파일로 저장하고 Document 언어에 맞는 파일이 연결 되도록 할당 해야 한다.

이미지나 심볼 혹은 모든 언어나 문화에 공통으로 사용되는 것을 쓴다면 이러한 문제는 발생하지 않는다.

stylesheet에 작성된 내용물(Content)은 DOM의 일부가 될 수는 없다.

### 텍스트 내용물

CSS는 element 전후로 텍스트 내용물을 넣을 수 있다. 이를 위해서는, 규칙을 만들고 `:before`나 `:after`를 구분자로 넣고 여기에 추가 하라. 선언부에 `content`속성선언과 그 값으로 텍스트를 추가 하라.

예제

이 규칙은 모든 'ref' class element 앞에 'Reference :'텍스트를 추가 한다.

```css
.ref:before {
  font-weight: bold;
  color: navy;
  content: "Reference: ";
}
```

좀더 자세히

stylesheet의 코드셋은 UTF-8이 기본이다. 그러나 링크 내나 stylesheet내 혹은 다른 방법으로 코드셋을 설정 할 수 있다. CSS 사양서의 4.4 CSS style sheet representation를 참고 하라.

독특한 캐릭터도 백슬레쉬(\)와 함께 사용하는 escape 표시법으로 사용 할 수 있다. 예를 들어 \256B는 블랙퀸 체스 심볼(♛)이다. 좀더 자세히는 CSS 사양서의 문자열 코드표에 없는 문자열 참조나 CSS 사양서의 Characters and case를 참고하라.

### 이미지 내용물

element 전/후로 이미지를 추가 하려면, `content`속성에 이미지의 URL을 넣어라.

예제

이 규칙은 `'glossary`' class 다음에 공백과 하나의 아이콘을 추가한다.

```css
a.glossary:after {
  content: " " url("../images/glossary-icon.gif");
}
```

element의 배경으로 이미지를 추가 하고자 한다면, `background`속성 값에 이미지의 URL을 할당 하라. 이것이 배경색이나, 이미지를 설정하거나, 이미지를 반복하거나 혹은 다른 사항을 설정하는 단순한 방법이다.

예제

이 규칙은 특정 element의 배경을 이미지 URL로 지정 하는 것이다.

이 설렉터는 element의 id를 나타낸다. `'no-repeat'` 값은 이미지가 한번만 나타나는 것을 말한다.

```css
#sidebar-box {
  background: url("../images/sidebar-ground.png") no-repeat;
}
```

좀더 자세히

배경설정에 관한 특별한 속성이나 이미지 설정 옵션에 관한 자세한 정보는 `background` 참조 페이지를 보라.

액션: 배경 이미지 추가 하기
----------------

이 이미지는 아래쪽에 파란색 줄이 있는 흰사각형이다.:

| Image:Blue-rule.png |
| --- |

1. 이 이미지를 다운 받아 예제파일들이 있는 폴더에 저장하라. (이미지에서 왼쪽 클릭을 하여 나타나는 메뉴에서 "다른 이름으로 사진저장"을 선택하여 예제가 있는 폴더를 선택하여 저장)
2. CSS파일을 열어 아래 규칙을 body부분에 추가 하여 전체 배경으로 해당 이미지를 설정하라.

```css
background: url("Blue-rule.png");
```

일단 위의 값은 이미지를 반복적으로 보여주는데, 기본 설정이므로 따로 표시 해 줄 필요는 없다. 이미지는 수직/수평적으로 반복되어 아래와 같이 편지지 같은 화면을 제공한다.

 ![Image:Blue-rule-ground.png](/ko/docs/Learn/CSS/Howto/Generated_content/blue-rule-ground.png)
**C**ascading **S**tyle **S**heets
 **C**ascading **S**tyle **S**heets

도전

아래 아미지를 다운 받아보라.

| Image:Yellow-pin.png |
| --- |

Stylesheet에 하나의 규칙을 추가 하여 아래와 같이 각라인 맨 앞에 나타나도록 하라.

![Image:Blue-rule-ground.png](/ko/docs/Learn/CSS/Howto/Generated_content/blue-rule-ground.png)

![image:Yellow-pin.png](/ko/docs/Learn/CSS/Howto/Generated_content/yellow-pin.png) **C**ascading **S**tyle **S**heets
 ![image:Yellow-pin.png](/ko/docs/Learn/CSS/Howto/Generated_content/yellow-pin.png) **C**ascading **S**tyle **S**heetsPossible solution

Add this rule to your stylesheet:

```css
p:before {
  content: url("yellow-pin.png");
}
```

Hide solution정답 확인.

다음에는?
-----

Stylesheet에 내용물을 추가 하는 일반 방법으로 리스트로 표기하는 방법이 있다. 다음장에는 specify style for 리스트 elements를 위한 스타일 표기법에 대해 알아보자. (en-US)


HTML 테이블 - Web 개발 학습하기

HTML 테이블
========

HTML에서 매우 일반적인 작업으로 표 형식의 데이터를 구조화하는 것이며, 이 목적을 위해 여러 요소와 속성을 가지고 있습니다. 스타일링을 위해 약간의 CSS 와 HTML을 함께 사용하면 학교 수업 계획, 지역 수영장 시간표 또는 좋아하는 공룡이나 축구 팀 통계와 같은 웹 테이블 정보를 쉽게 표시 할 수 있습니다. 이 모듈은 HTML을 사용하여 표 형식의 데이터를 구성하는데 필요한 모든 정보를 제공 합니다.

전제조건
----

이 모듈을 시작하기 전에, 당신은 이미 HTML의 기본 지식을 가지고 있어야 합니다. — Introduction to HTML.

**참고:** 컴퓨터/태블릿/기타 장치에서 자신만의 파일들을 생성 할 수 없다면, 대부분의 예제 코드는 JSBin 또는 Thimble 같은 온라인 코딩 프로그램에서 시도해 볼 수 있습니다.

가이드
---

이 모듈은 다음의 내용을 담고 있습니다.

HTML 테이블 기본

이 내용에서는 행(row)과 셀(cell), 머리말, 셀을 여러 열(col)과 행(row)으로 확장(span)하는 것과 같은 기본 사항을 다루는 HTML 표를 시작하고 스타일 지정을 위해 열의 모든 셀을 함께 그룹화하는 방법에 대해 설명합니다.

HTML 테이블 고급 기능 및 접근성

이 모듈의 두 번째 내용에서는 HTML 테이블의 캡션/요약 및 행을 테이블 머리, 본문 및 바닥글 세션으로 그룹화 하는 것과 같은 몇 가지 고급 기능을 살펴볼 뿐만 아니라 시각 장애가 있는 사용자를 위한 테이블의 접근성도 살펴보게 됩니다.

평가
--

행성 데이터 구성

우리의 테이블 평가에서 태양계의 행성에 대한 데이터 일부를 당신에게 제공하며, 그것을 가지고 HTML 테이블로 구성 하도록 합니다.


HTML 소개 - Web 개발 학습하기

HTML 소개
=======

HTML은 문서의 특정 텍스트 영역이 문단인지 목록인지 표의 일부인지 구분 할 수 있도록 의미를 부여하고, 헤더인지, 콘텐츠 컬럼인지, 네비게이션 메뉴인지 알수 있도록 논리적인 영역으로 구조화 하고, 이미지와 비디오 같은 콘텐츠를 삽입할 수 있게 해주는 요소들로 구성된 지극히 간단한 언어입니다. 이번 과정은 이 두 가지 주제에 대한 소개와 HTML을 이해하기 위해 알아야 하는 기본 개념과 문법을 설명합니다.

전제 조건
-----

이번 과정을 시작하기 전에, HTML에 대한 사전 지식은 필요하지 않습니다만, 기본적으로 컴퓨터 사용에 친숙해야 하고, 웹사이트의 콘텐츠를 탐색하는 정도의 웹을 사용할 줄 알아야 합니다. 기본 소프트웨어 설치에 있는 기본적인 작업 환경이 구축되어 있어야 하고, 파일 다루기에 있는 파일을 생성하고 관리하는 방법을 이해하고 있어야 합니다. 이 두가지 내용은 웹 시작하기를 위한 초급 과정입니다.

**참고:** 혹시, 파일을 생성하기 힘든 컴퓨터/테블릿 혹은 다른 기기에서 작업한다면, JSBin 이나 Thimble 같은 온라인 코딩 프로그램을 이용하여 대부분의 코드 예제를 작성해 볼 수 있습니다.

안내서
---

이 과정은 HTML의 모든 기초 이론을 학습하고, 몇몇 기법을 실습해 볼 수 있는 충분한 기회를 제공합니다. 아래와 같은 내용을 담고 있습니다.

HTML 시작하기

HTML을 시작하기 위한 초급 내용을 다룹니다. 요소, 속성을 정의하고, 한번쯤은 들어봤을지도 모르는 중요한 용어들을 알아보고 어디에 사용되는지 살펴봅니다. 또, HTML 요소를 구조화 하는 방법, 일반적인 HTML 페이지가 어떻게 구조화되는지를 알아보고, 언어의 중요한 기본 특징에 대해 설명합니다. 그러면서, 여러분들이 흥미를 가질 수 있도록 HTML 코드를 직접 작성해 보도록 하겠습니다.

head 안에는 무엇이 있나? HTML 메타 데이터

HTML 문서의 헤드는 페이지가 로딩될 때 웹 브라우저에는 보이지 않는 부분입니다. 페이지의 `<title>`, (HTML 콘텐츠에 스타일을 적용하고 싶다면) CSS 링크, 파비콘 링크, 그리고 메타데이터(문서의 작성자, 문서를 설명하기 위한 중요한 키워드와 같은 HTML에 대한 정보)와 같은 정보를 담고 있습니다.

HTML 텍스트 기본

HTML을 사용하는 주요 목적 중의 하나는 텍스트에 의미를 부여(**시맨틱**)하는 것인데, 그렇게 하면 브라우저는 화면에 어떻게 노출되어야 하는지 명확하게 알 수 있습니다. 이 글에서는 HTML을 이용하여 글의 제목과 문단의 구조에서 텍스트를 분리해 보고, 단어에 강조/중요도를 부여해보고, 리스트 만드는 법 등을 살펴 보겠습니다.

하이퍼링크 만들기

하이퍼링크는 웹을 웹(web, 거미줄, 연결을 의미)으로 만들어주는 것이기 때문에 굉장히 중요합니다. 이 글에서는 링크를 만드는데 필요한 문법을 설명하고, 링크의 사례들을 논의해 봅니다.

텍스트 조작 고급기법

HTML에는 텍스트를 조작하기 위한 많은 요소들이 있습니다. 이 글에는 다 담을 수는 없습니다. 이 글에서는 잘 알려지진 않았지만 알아두면 굉장히 유용한 요소들을 살펴보겠습니다. 인용구, 설명 목록, 소스 코드 혹은 관련 텍스트, 위첨자, 아래첨자, 연락 정보 등을 마크업 하는 방법을 알아보겠습니다.

문서와 웹사이트 구조 (en-US)

'문단'이나 '이미지'와 같은 페이지의 부분을 정의하는 것처럼, HTML은 '헤더', '네비게이션 메뉴', '주요 내용 컬럼'과 같은 웹사이트의 영역을 정의하는데도 사용됩니다. 이 글에서는 기본 웹사이트 구조를 설계하는 법을 살펴보고, 이 구조를 표현하기 위해 HTML로 직접 작성해 보겠습니다.

HTML 디버깅 (en-US)

HTML 작성은 잘 되었는데, 무언가 잘못되었고, 작업을 할 수 없다면 코드에서 에러가 발생하는 부분은 어디일까요? 이 글은 이런 상황에 도움을 줄 수 있는 도구들을 소개합니다.

평가
--

다음의 평가들은 위의 가이드에 있는 HTML 기본을 얼마나 이해하고 있는지 테스트 합니다.

마크업

우리는 모두 글자를 쓰는 법을 금방 배우게 됩니다. 텍스트를 꾸미고 조작하는 것을 테스트 해볼 수 있는 유용한 예제들이 있습니다. 여러분이 마크업 하는 것을 평가합니다.

페이지 콘텐츠 구조화

이 평가는 헤더, 푸터, 네비게이션 메뉴, 주요 콘텐츠, 사이드바를 담고 있는 간단한 웹 페이지의 구조를 HTML로 작성하는 능력을 테스트합니다.

같이 보기
-----

웹 지식 기본 1

HTML 소개 과정에서 논의된 많은 기법들을 살펴보고 테스트 해볼 수 있는 Mozilla 재단 과정이 있습니다. 학습자들은 이 여섯 가지의 과정에서 글을 읽고, 글을 작성하고, 참석하는데 친숙해 질 것입니다. 만들어 보고 협업하면서 탄탄한 웹의 토대를 찾아보세요.


멀티미디어와 임베딩 - Web 개발 학습하기

멀티미디어와 임베딩
==========

우리는 이 과정에서 지금까지 많은 텍스트를 살펴 봤지만 텍스트만을 사용한 웹은 따분합니다. 보다 흥미로운 내용으로 웹을 생생하게 만드는 방법을 살펴 보도록 합시다! 여기에서는 HTML을 사용하여 이미지를 포함 할 수있는 다양한 방법과 비디오, 오디오 및 웹 페이지 전체를 포함하는 방법을 비롯하여 웹 페이지에 멀티미디어를 포함하는 방법을 살펴 보도록 하겠습니다.

전제조건
----

이 단원을 시작하기 전에 앞서 HTML소개에서 설명한대로 HTML에 대한 기본 지식이 있어야합니다. 이 모듈 (또는 이와 비슷한 것)을 사용해 보지 않았다면, 처음부터 다시 시작후 돌아오세요!

**참고:** 자신만의 파일을 만들수 없는 컴퓨터/테블릿/그외 기기에서 작업하는 경우, 코드 예제를 (대부분을) JSBin 이나 Glitch같은 온라인 코딩 프로그램을 통해 수행해 볼 수 있습니다

가이드
---

이 단원에는 웹 페이지에 멀티미디어를 삽입하는 모든 기본 사항을 설명하는 다음 문서가 포함되어 있습니다.

HTML 이미지

여기에는 고려해야할 다른 종류의 멀티미디어들이 있지만, 간단한 이미지를 웹페이지에 삽입하는데 사용되는 일반적인 `<img>` 엘리먼트를 사용하는것이 합리적입니다. 이번 내용에서는 `<figure>` 사용하여, 기본적인 내용 및 캡션을 주석으로 추가하는 방법, CSS 배경 이미지와의 관계에 대해 자세히 다룰 것입니다.

비디오와 오디오 컨텐츠 (en-US)

다음으로, `<video>` 와`<audio>` (en-US) 엘리먼트를 사용하여 페이지에 비디오 및 오디오를 포함하는 방법을 살펴 보겠습니다. 기본기능을 포함, 여러종류의 브라우저에 다양한 파일 포맷에 접근하는 법, 캡션 및 자막 추가, 구형 브라우저에 대한 폴백 (fallback) 추가 방법 등 다양한 기능을 제공합니다.

<object> 로부터 <iframe>까지 — 기타 임베딩 기술

여기서는 웹 페이지에 다양한 콘텐츠 유형을 삽입 할 수있게 해주는 몇가지 추가적인 요소를 살펴봅니다 : `<iframe>` (en-US), `<embed>` 그리고 `<object>` 엘리먼트입니다. `<iframe>`은 다른 웹 페이지를 삽입하기위한 것이고, 나머지 두 개는 PDF, SVG 및 플래시까지 포함 할 수 있습니다. — 이 기술들은 사라지는 중이지만 여전히 볼수 있을것입니다.

Vector graphics 웹에 추가하기

Vector graphics 는 특정한 상황에서 매우 유용할 수 있습니다. Vector graphics 는 PNG/JPG와 같은 일반적인 형식과 달리 확대 시 왜곡/픽셀레이트가 발생하지 않으며, 스케일링 시 매끄러운 상태를 유지할 수 있습니다. 이 글에서는 Vector graphics 가 무엇인지, 웹 페이지에 인기 있는 SVG 포맷을 포함시키는 방법에 대해 소개합니다.

Responsive images(반응형 이미지)

휴대전화에서 데스크톱 컴퓨터에 이르기까지, 웹을 검색할 수 있는 매우 다양한 유형의 장치들로 인해서 형성된 현대 웹 세계를 마스터하기 위한 필수적인 개념은 반응형 디자인입니다. 이는 다양한 화면 크기, 해상도 등에 맞춰 기능을 자동으로 변경할 수 있는 웹 페이지를 만드는 것을 말합니다. 이것은 나중에 CSS 모듈에서 훨씬 더 자세히 살펴보겠지만, 현재로서는 HTML이 `<picture>` (en-US) 요소를 포함하여 반응형 이미지를 만드는 데 사용할 수 있는 도구를 살펴보기로 하겠습니다.

평가
--

아래의 평가는 위의 가이드에서 다루는 HTML 기본 사항에 대한 이해를 테스트합니다.

Mozilla 스플래시 페이지 (en-US)

이 평가에서, 우리는 당신이 Mozilla 에 관한 모든 펑키한 스플래시 페이지에 몇 개의 이미지와 비디오를 추가하도록 하며, 이 모듈의 기사에서 논의된 몇 가지 기술에 대하여 당신의 지식을 테스트할 것입니다!

같이 보기
-----

이미지 위에 히트맵 추가 (en-US)

이미지 맵은 이미지 링크의 다른 부분을 다른 곳에 연결하는 메커니즘을 제공합니다(당신이 클릭하는 각 나라에 대한 추가 정보들과 연결되는 지도를 생각해 봅시다). 이 기술은 때때로 유용하게 활용될 수 있습니다.

Web literacy basics 2

멀티미디어 및 임베딩 모듈에서 다룬 몇 가지 기술을 탐구하고 테스트하는 훌륭한 Mozilla 기초 과정입니다. 웹 페이지 작성, 접근성을 위한 디자인, 리소스 공유, 온라인 미디어 사용, 오픈 작업(콘텐츠를 다른 사람이 자유롭게 사용할 수 있고 공유할 수 있도록 하는 것)의 기본 사항에 대해 자세히 알아볼 수 있습니다.


Tips for Authoring Fast-loading HTML Pages - Web 개발 학습하기

Tips for Authoring Fast-loading HTML Pages
==========================================

Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 이 글의 토론 페이지에 조언해 주시기 바랍니다.

최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.

페이지 불러오기 성능을 최적화하는 것이 저대역폭 방문자를 위한 컨텐츠에만 해당하는 것은 아닙니다. 이것은 고대역폭 컨텐츠에도 똑같이 중요하며 고속 인터넷 사용자들에게도 상당한 성능 향상을 기대할 수 있습니다.

### Tips

#### 페이지 무게를 줄여라

페이지 무게는 지금까지 페이지 불러오기 성능의 가장 중요한 요소이다.

불필요한 공백, 주석을 없애고 인라인 스크립트와 CSS를 외부파일로 옮기면 페이지 구조의 변화를 최소화하면서 다운로드 성능을 향상시킬 수 있다

HTML Tidy등의 도구를 사용, 바른 HTML 소스로부터 첫 공백과 여분의 빈라인을 자동으로 줄일 수 있다. 다른 도구는 재형식화하거나 긴 식별자를 짧은 버전으로 줄여 JavaScript를 압축할 수 있다.

#### 파일 수를 최소화하라

웹 페이지에서 참조하는 파일의 수를 줄이면 페이지를 다운로드하는데 필요한 HTTP 접속 횟수가 감소합니다.

브라우저의 캐시 설정에 따라서, 브라우저는 각각의 CSS와 JavaScript, 그림 파일에 대해서 마지막으로 다운로드한 이후로 해당 파일이 변경되었는지 확인하기 위해 `If-Modified-Since` 요청을 웹 서버로 보내게 됩니다.

웹 페이지에서 참조하는 파일의 수를 줄이면, 이러한 요청을 보내고 그에 해당하는 응답이 도착하는데 필요한 시간을 줄일 수 있습니다.

브라우저는 페이지를 표시하기 전에 각각의 CSS와 JavaScript 파일의 변경시간을 반드시 확인해야 합니다. 따라서 웹 페이지에서 참조하는 파일들에 대한 마지막 변경시간을 확인하는데 너무 많은 시간을 소비하면 웹 페이지의 초기 표시 시간이 오래 걸릴 수 있습니다.

#### 도메인 검색을 줄이라

각각의 도메인은 DNS 검색에 시간을 소비하기 때문에, CSS와 JavaScript 및 이미지를 참조하는데 사용되는 도메인 수를 줄이면 페이지를 불러오는 시간이 단축됩니다.

이것이 항상 실현가능한 것이 아닐지라도, 가능한한 최소한의 도메인을 사용하도록 주의해야 합니다.

#### 재사용되는 내용을 캐시하라

캐시가능한 내용이 적절한 만료시간으로 캐시되었는지 확인해야 합니다.

특히 `Last-Modified` 헤더에 신경써야 합니다. 이것은 페이지의 효율적인 캐싱을 가능케 합니다. 이것에 의해 브라우저가 읽어들이고자 하는 파일이 마지막으로 변경된 시간에 대한 정보가 전달됩니다. 정적인 페이지(예를 들면, `.html`, `.css`)는 대부분의 웹 서버가 파일 시스템에 저장된 마지막 변경시간을 토대로 자동적으로 `Last-Modified` 헤더를 추가합니다. 동적인 페이지(예를 들면, `.php`, `.aspx`)는 물론 불가능합니다.

그러므로, 특히 동적으로 생성되는 페이지들에 대한 이 부분의 연구가 중요합니다. 이것은 조금 복잡하지만, 정상적으로 캐시 불가능한 페이지들에 대한 페이지 요청을 대폭 줄일 수 있게 합니다.

추가 정보:

1. RSS 해커들을 위한 HTTP 조건부 GET
2. HTTP 304: Not Modified
3. On HTTP Last-Modified and ETag

#### 페이지 컴포넌트의 순서를 최적화

사용자가 페이지를 읽어들일 때 페이지의 내용 요소를 가장 먼저 다운로드하면 가장 빠른 응답시간을 얻을 수 있습니다.

페이지의 내용 요소는 페이지의 표시를 위해 필요한 모든 CSS 및 JavaScript와 함께 가장 먼저 다운로드되어야 합니다. 이러한 내용 요소들은 일반적으로 텍스트로 되어 있고 모뎀상에서 텍스트 압축효과를 얻을 수 있기에 사용자에게 가장 빠른 응답 시간을 제공합니다.

페이지를 모두 읽어들인 후에야 사용가능한 모든 DHTML 기능들은 초기에는 사용하지 못하게 설정되어 있어야 하며 페이지 불러오기가 끝난 후에만 사용가능해야 합니다. 이것은 페이지의 내용 요소를 먼저 읽어들인 다음에 DHTML JavaScript를 읽어들이게 하여 전체적인 페이지 불러오기 성능을 향상시킵니다.

#### inline script 수를 최소화

inline script는 페이지 구조를 바꿀 수 있다는 것을 파서가 가정해야 하므로 페이지 불러오기에 비용이 많이 들 수 있다. 일반적으로 inline script 사용을 줄이고 내용을 출력하기 위해 `document.write()`의 사용을 줄여 전체페이지의 불러오는 시간을 향상시킬 수 있다. `document.write()`에 기반한 오래된 방식 대신 현대의 W3C DOM방법을 사용하여 페이지 내용을 다루라.

#### 최신 CSS와 올바른 markup을 사용하라

최신 CSS는 markup의 양을 줄여주며, 레이아웃 측면에서 그림의 사용을 줄여줍니다. 또한 다양한 방법으로 텍스트를 나타내는 그림의 사용을 줄여줍니다. 텍스트를 나타내는 그림을 사용하면 텍스트와 CSS를 사용할 때보다 부하가 큽니다.

 올바른 markup을 사용하는 것에는 추가적인 장점이 있습니다. 브라우저가 HTML을 처리할 때 "오류 정정"을 하지 않아도 될 뿐만 아니라, 웹 페이지를
 *전처리(pre-process)*
 할 수 있는 다른 도구들을 마음대로 사용할 수 있습니다. 예를 들면, HTML Tidy는 웹 페이지상의 공백과 불필요한 종료 태그들을 삭제해 줍니다. 그러나 웹 페이지에 심각한 markup 오류가 있다면 이 도구는 사용할 수 없습니다.

#### 내용을 조각내라

table기반의 레이아웃을 `<div>`를 쓰거나 table을 작은 table로 나누면 전체 페이지 내용을 내려받지 않고 표시할 수 있다.

아래와 같이 깊게 중첩된 table 대신

```html
<table>
  <table>
    <table>
      ...
    </table>
  </table>
</table>
```

중첩되지 않은 table 또는 div를 쓰라

```html
<table>
  ...
</table>
<table>
  ...
</table>
<table>
  ...
</table>
```

#### 그림과 표의 크기를 명시하라

브라우저가 그림과 표의 크기를 바로 알아낼 수 있다면, 내용을 바꾸지 않고도 웹 페이지를 표시하는게 가능합니다. 이것은 페이지를 표시하는 속도를 빠르게 할 뿐만 아니라 페이지 불러오기가 끝났을 때 페이지의 배치가 바뀌는 것을 막아줍니다. 그런 이유로, 가능하면 그림의 `height`와 `width`가 명시되어야 합니다.

표는 CSS 선택자:속성 조합이다.

```css
table-layout: fixed;
```

그리고 `COL`과 `COLGROUP` 태그를 사용하여 열(column)의 넓이를 명시해야 합니다.

#### 사용자 에이전트의 요구사항을 적절하게 선택하라

웹 페이지의 디자인 향상을 위해서는 사용자 에이전트의 요구사항을 적절하게 선택해야 합니다. 모든 브라우저, 특히 저사양의 브라우저에서까지 웹 페이지의 내용이 픽셀 하나하나까지 완벽하게 표현되기를 원하지는 않습니까?

이상적으로, 기본적인 최소 요구사항은 관련된 표준을 지원하는 현대적인 브라우저를 기준으로 해야 합니다. 이것은 모든 플랫폼 상의 Netscape 7/Gecko 1.0.2+, Windows의 Internet Explorer 5.5+, Windows의 Opera 7+, Mac OS X의 Safari에 해당합니다.

그러나 여기에 나와있는 대부분의 팁들은 사용자 에이전트 요구사항과 관계 없이 모든 사용자 에이전트와 웹 페이지에 해당하는 일반적인 내용임을 알아두시기 바랍니다.

### 페이지 구조 예

* ``<html>``
    + ``<head>``
        - ``<link>``
         페이지의 표시를 위해 CSS 파일이 필요하다. 유지보수를 위해 관련되지 않은 CSS 파일을 분리하고 성능을 위해 파일 수를 최소화하라.
        - ``<script>``
         JavaScript 파일은 페이지를 불러들일 때 필요하지만 DHTML은 페이지 불러오기가 끝난 후에만 동작합니다.
         유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
    + ``<body>``
     User visible page content in small chunks (``<header>``/ ``<main>`/` ``<table>` (en-US)`) that can be displayed without waiting for the full page to download.
        - ``<script>``
         DHTML을 위해 어떠한 스크립트라도 사용될 수 있습니다. 일반적으로 DHTML 스크립트는 페이지 불러오기가 완전히 끝나고 필요한 객체들이 모두 초기화된 후에만 동작합니다. 따라서 페이지 내용을 불러오기 전에 이러한 스크립트들을 먼저 읽어들일 필요가 없습니다. 오직 페이지 로딩시간을 증가시킬 뿐입니다.
         유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
         만약 롤오버 효과를 위해 사용되는 그림이 있다면, 페이지 내용을 읽어들인 후에 그 그림을 미리 읽어들여야 합니다.
### 관련 링크

* 책: "Speed Up Your Site" by Andy King
* Site Optimization Tutorial (WebMonkey)
### 원문 정보

* 저자: Bob Clary, Technology Evangelist, Netscape Communications
* 최종 갱신일: Published 04 Apr 2003
* 저작권 정보: Copyright © 2001-2003 Netscape. All rights reserved.
* 알림: 이 문서는 본래 DevEdge 사이트의 일부분이었습니다.


데이터 속성 사용하기 - Web 개발 학습하기

데이터 속성 사용하기
===========

HTML은 특정 요소와 연관되어야 하지만, 정의된 의미를 갖지 않는 데이터에 대한 확장성을 고려하여 설계되었습니다. `data-*` 속성은 표준이 아닌 속성이나 추가적인 DOM 속성과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있게 도와줍니다.

HTML 문법
-------

문법은 간단합니다. 속성의 이름이 `data-`로 시작하는 모든 속성은 데이터 속성입니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있습니다. 아래 `data` 사용법이 있습니다.

```html
<article
 id="electriccars"
 data-columns="3"
 data-index-number="12314"
 data-parent="cars">
  ...
</article>
```

JavaScript에서 접근하기
-----------------

JavaScript에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 `getAttribute()` (en-US)를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다. 예를 들어, `DOMStringMap` (en-US)은 `dataset` (en-US) 속성을 통해 읽어낼 수 있습니다.

`dataset` 객체를 통해 `data` 속성을 가져오기 위해선, `data-` 뒤의 속성 이름 부분을 사용해 속성을 가져옵니다(대시들은 camel case (en-US)로 변환되는 것에 주의하세요).

```js
const article = document.querySelector("#electric-cars");
// 아래 코드도 작동합니다.
// const article = document.getElementById("electric-cars")

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
```

각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 `article.dataset.columns = 5`와 같이 설정하면 해당 속성을 `"5"`로 변경할 것입니다.

CSS에서 접근하기
----------

데이터 속성은 평문 HTML 속성이기 때문에 CSS에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 `attr()` (en-US) 함수의 생성된 content 를 사용하면 됩니다.

```css
article::before {
  content: attr(data-parent);
}
```

CSS의 속성 선택자도 데이터에 따라 스타일을 변경하는 데 사용할 수 있습니다.

```css
article[data-columns="3"] {
  width: 400px;
}
article[data-columns="4"] {
  width: 600px;
}
```

JSBin 예제에서 함께 작동하는 것을 볼 수 있습니다.

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS 선택자와 JavaScript 접근을 이용해서, display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 이 screencast를 확인하세요(JSBin 예제).

데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.

문제점
---

보여야 하고 접근 가능한 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 인덱싱하지 못할 수도 있습니다.

고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 `dataset`을 지원하지 않습니다. IE 10 이하를 지원하기 위해서는 대신 `getAttribute()` (en-US)를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조합니다.

하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.

Firefox 49.0.2(아마도 이전/이후의 버전)에서는, 1022 데이터를 초과하는 데이터 속성은 JavaScript(EcmaScript 4)가 읽지 못할 것입니다.

더 알아보기
------

* 이 글은 hacks.mozilla.org에서 JavaScript 및 CSS의 데이터 속성 사용에서 발췌되었습니다.
* 사용자 정의 속성은 SVG 2에서도 지원됩니다. 자세한 내용은 `SVGElement.dataset` 및 `data-\* (en-US)`를 참조하세요.
* Sitepoint의 HTML5 데이터 속성 사용 방법


고급 텍스트 서식 지정 - Web 개발 학습하기

고급 텍스트 서식 지정
============

* 이전
* Overview: Introduction to HTML
* 다음  (en-US)

텍스트 서식에 있어서 HTML 텍스트 기본 에서 이야기 하지 않은 수많은 요소들이 있습니다. 이 글에서 설명하는 요소들은 비교적 많이 알려져 있지않지만 여전히 유용합니다(그리고 이것은 완전한 목록이 아닙니다). 이 글에서 여러분은 인용구, 서술문, 컴퓨터 코드 및 관력 텍스트, 아래 첨자, 위 첨자, 연락처 정보 등을 표시하는 방법에 대해 배울 것입니다.

|  |  |
| --- | --- |
| 필요한 사전 지식: | HTML 시작하기
 에 설명된 기본적인 HTML 숙련도.
 HTML 텍스트 기본
 에서 설명하는 텍스트 포맷팅에 대한 지식.
  |
| 목표: |
 비교적 알려지지 않은 HTML 요소들을 사용하여 고급 시맨틱 기능을
 사용하여 HTML을 구성하는 방법을 학습합니다.
  |

설명 목록
-----

HTML 텍스트 기본에서 기본 목록을 마크업하는 방법을 안내했지만, 해당 글에는 여러분이 앞으로 종종 마주할 세 번째 리스트 타입인 **설명 목록**에 대해선 언급하지 않았습니다. 이 리스트의 목적은 용어 및 정의, 질문 및 답변과 같은 일련의 항목 및 관련 설명을 표시하는 것입니다. 아래의 예시를 살펴봅시다.
```

soliloquy
드라마에서 등장인물이 혼잣말을 하며 내면의 생각이나 감정을 표현하고 그 과정에서 청중에게 전달합니다 (다른 등장인물에게는 전달하지 않음.)
monologue
드라마에서 등장인물이 자신의 생각을 큰 소리로 말하여 청중 및 다른 등장인물과 공유하는 것을 말합니다.
aside
드라마에서 캐릭터가 유머러스하거나 극적인 효과를 위해 청중에게만 의견을 공유하는 경우. 일반적으로 느낌, 생각 또는 추가 배경 정보입니다.
```

설명 목록은 다른 타입의 리스트와 다르게 `<dl>` 태그를 사용합니다. 또한 각 용어는 `<dt>` (설명 용어) 요소를 사용하고, 각 설명은 `<dd>` (설명 정의) 요소를 사용합니다.

### 설명 목록 예제

예제 마크업을 마무리해 보겠습니다.

```html
<dl>
  <dt>soliloquy</dt>
  <dd>
    드라마에서 등장인물이 혼잣말을 하며 내면의 생각이나 감정을 표현하고 그
    과정에서 청중에게 전달합니다 (다른 등장인물에게는 전달하지 않음.)
  </dd>
  <dt>monologue</dt>
  <dd>
    드라마에서 등장인물이 자신의 생각을 큰 소리로 말하여 청중 및 다른 등장인물과
    공유하는 것을 말합니다.
  </dd>
  <dt>aside</dt>
  <dd>
    드라마에서 캐릭터가 유머러스하거나 극적인 효과를 위해 청중에게만 의견을
    공유하는 경우. 일반적으로 느낌, 생각 또는 추가 배경 정보입니다.
  </dd>
</dl>
```

브라우저에서 제공하는 기본 스타일에 의해서 약간 들여쓰기된 설명 목록과 함께 설명이 표시됩니다.

### 하나의 용어에 대한 다중 설명

하나의 용어에 여러 개의 설명이 포함될 수 있다는 점에 유의하세요. 아래는 예시입니다.

```html
<dl>
  <dt>aside</dt>
  <dd>
    드라마에서 캐릭터가 유머러스하거나 극적인 효과를 위해 청중에게만 의견을
    공유하는 경우. 일반적으로 느낌, 생각 또는 추가 배경 정보입니다.
  </dd>
  <dd>
    서면에서는 현재 주제와 관련되어 있지만 콘텐츠의 주요 흐름에 직접 들어가지
    않으므로 근처에 표시됩니다 (종종 옆의 상자에 표시됨.)
  </dd>
</dl>
```

### 추가 학습: 일련의 정의 표시

이제 설명 목록을 사용해 볼 차례입니다. 입력 필드에 요소들을 추가하여 출력 필드에 설명목록이 표시되도록 하세요. 원하시는 경우 자신만의 용어와 설명을 사용해 볼 수도 있습니다.

실수를 하셨을 경우에는, Reset 버튼을 통해서 재시작하실 수 있습니다. 해답을 찾지 못하셨을 경우에 Show solution 버튼을 통해서 해답을 보실 수 있습니다.
```

<h2>실시간 출력</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>편집 가능한 코드</h2>
<p class="a11y-label">
  코드 영역에서 포커스를 이동하려면 Esc키를 누르십시오 (Tab키로 탭 문자를 삽입).
</p>

<textarea id="code" class="input" style="min-height: 100px; width: 95%">
베이컨
세상을 하나로 묶는 접착제.
달걀
케이크를 하나로 묶어주는 접착제.
커피
아침에 세상을 움직이게 하는 음료.
연한 갈색.
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<dl>\n <dt>베이컨</dt>\n <dd>세상을 하나로 묶는 접착제.</dd>\n <dt>달걀</dt>\n <dd>케이크를 하나로 묶어주는 접착제.</dd>\n <dt>커피</dt>\n <dd>아침에 세상을 움직이게 하는 음료.</dd>\n <dd>연한 갈색.</dd>\n</dl>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code

textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

인용구
---

HTML에는 인용구 표시에 사용할 수 있는 요소가 존재합니다. 해당 요소는 블록 또는 인라인 요소인지에 따라서 다르게 표시됩니다.

### 블록 인용구

블록 레벨 컨텐츠의 섹션(문단, 여러 단락, 리스트 등)이 인용된 경우, 이를 나타내는 `<blockquote>` 요소로 감싸야합니다. 그리고 `cite` 속성에 출처를 표기합니다. 아래의 예시는 MDN `<blockquote>` 요소 페이지를 인용한 것 입니다.

```html
<p>
  <strong>HTML <code><blockquote></code> 요소</strong> (또는
  <em>HTML 인용 블록 요소</em>)는 안쪽의 텍스트가 긴 인용문임을 나타냅니다.
</p>
```

이것을 블록 인용구 변경하기 위해서 아래와 같이 할 수 있습니다.

```html
<p>다음은 블록 인용구입니다.</p>
<blockquote
 cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
  <p>
    <strong>HTML <code><blockquote></code> 요소</strong> (또는
    <em>HTML 인용 블록 요소</em>)는 안쪽의 텍스트가 긴 인용문임을 나타냅니다.
  </p>
</blockquote>
```

브라우저 기본 스타일은 인용구를 표현할 때, 들여쓰기 된 단락으로 나타냅니다. MDN은 추가적인 스타일링과 함께 이를 나타냅니다.

### 인라인 인용구

인라인 인용구는 `<q>` 요소를 사용한다는 점만 제외하면 블록 인용구와 동일하게 동작합니다. 아래의 마크업 예시는 MDN `<q>` 페이지의 인용문을 포함합니다.

```html
<p>
  인용구 요소 — <code><q></code> — 는
  <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q">
    단락 나누기가 필요 없는 짧은 인용구를 위한 것입니다.
  </q>
</p>
```

브라우저 기본 스타일은 인라인 인용구를 따옴표로 묶은 일반 텍스트로 표현합니다.

### 인용

`cite` 속성의 컨텐츠는 유용하게 보이지만 안타깝게도 브라우저, 스크린 리더 등은 이를 이용해서 할 수 있는 것이 많지 않습니다. 브라우저는 JavaScript나 CSS로 여러분이 직접 해결책을 제시하지 않는다면 `cite` 컨텐츠를 화면에 표시할 방법이 없습니다. 페이지에서 인용 출처를 화면에 나타나게 하고 싶다면 링크나 다른 적절한 방법을 통해 텍스트에서 볼 수 있게 만들어야 합니다.

`<cite>` 요소가 있지만 이는 인용되는 자료의 제목(예: 책 이름)을 포함하기 위한 것입니다. 그러나 `<cite>` 안에 있는 텍스트를 어떤 식으로든 인용 출처에 연결하지 못할 이유는 없습니다.

```html
<p>
  <a href="/ko/docs/Web/HTML/Element/blockquote">
    <cite>MDN 블록 인용구 페이지</cite></a>에 따르면
</p>

<blockquote
 cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/blockquote">
  <p>
    <strong>HTML <code><blockquote></code> 요소</strong> (또는
    <em>HTML 인용 블록 요소</em>)는 안쪽의 텍스트가 긴 인용문임을 나타냅니다.
  </p>
</blockquote>

<p>
  인용구 요소 — <code><q></code> — 는
  <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q">
    단락 나누기가 필요 없는 짧은 인용구를 위한 것입니다.
  </q>
  — <a href="/ko/docs/Web/HTML/Element/q"><cite>MDN q 페이지</cite></a>.
</p>
```

인용은 기본적으로 이탤릭체로 스타일이 지정됩니다.

### 추가 학습: 누가 말했나요?

다른 실습 과제를 할 시간입니다! 이번 예제에서는 아래 항목을 수행하고자 합니다.

1. 중간 단락을 `cite` 속성을 포함하는 블록 인용구로 바꿉니다.
2. 세 번째 단락의 "부정적인 자기 대화를 없애야 할 필요성"을 인라인 인용으로 바꾸고 `cite` 속성을 포함하세요.
3. 각 소스의 제목을 `<cite>` 태그로 감싸고 각 소스를 해당 소스로 연결되는 링크로 바꿉니다.

필요한 인용 출처는 다음과 같습니다.

* `http://www.brainyquote.com/quotes/authors/c/confucius.html` 공자 명언
* `http://example.com/affirmationsforpositivethinking` "부정적인 자기 대화를 없애야 할 필요성"

실수를 하셨을 경우에는, Reset 버튼을 통해서 재시작하실 수 있습니다. 해답을 찾지 못하셨을 경우에 Show solution 버튼을 통해서 해답을 보실 수 있습니다.
```

<h2>실시간 출력</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>편집 가능한 코드</h2>
<p class="a11y-label">
  코드 영역에서 포커스를 이동하려면 Esc키를 누르십시오 (Tab키로 탭 문자를 삽입).
</p>

<textarea id="code" class="input" style="min-height: 150px; width: 95%">
<p>안녕하세요, 제 동기 부여 페이지에 오신 것을 환영합니다. 공자의 명언 사이트에서 말했듯이.</p>
<p>멈추지 않는 한 얼마나 천천히 가느냐는 중요하지 않습니다.</p>
<p>저는 또한 긍정적 사고의 개념과 부정적인 자기 대화를 없애야 할 필요성(긍정적 사고를 위한 긍정의 힘에서 언급된 바와 같이)을 좋아합니다.</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<p>안녕하세요, 제 동기 부여 페이지에 오신 것을 환영합니다. <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>공자의 명언 사이트</cite></a>에서 말했듯이.</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>멈추지 않는 한 얼마나 천천히 가느냐는 중요하지 않습니다.</p>\n</blockquote>\n\n<p>저는 또한 긍정적 사고의 개념과 <q cite="http://example.com/affirmationsforpositivethinking">부정적인 자기 대화를 없애야 할 필요성</q>(<a href="http://example.com/affirmationsforpositivethinking"><cite>긍정적 사고를 위한 긍정의 힘</cite></a>에서 언급된 바와 같이)을 좋아합니다.</p>';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

약어
--

웹에서 흔히 볼 수 있는 또 다른 요소는 약어 또는 약어를 둘러싸는 데 사용되는 `<abbr>`입니다. 약어나 약어를 포함할 때는 처음 사용할 때 약어를 표시하는 `<abbr>`과 함께 해당 용어의 전체 내용을 일반 텍스트로 제공하세요. 이렇게 하면 사용자 에이전트에게 콘텐츠를 공지/표시하는 방법에 대한 힌트를 제공하는 동시에 모든 사용자에게 약어가 무엇을 의미하는지 알릴 수 있습니다.

약어 외에 확장어를 제공하는 것이 의미가 없고 약어 또는 약어가 상당히 단축된 용어인 경우에는 해당 용어의 전체 확장어를 `title` 속성의 값으로 제공합니다.

### 약어 예제

예를 들어 보겠습니다.

```html
<p>
  웹 문서를 구성하는 데는 하이퍼텍스트 마크업 언어인 <abbr>HTML</abbr>을
  사용합니다.
</p>

<p>
  제 생각에는 그린 <abbr title="목사">목사</abbr>가 전기톱으로 부엌에서 한 것
  같아요.
</p>
```

다음과 같이 표시됩니다.

**참고:** 이전 버전의 HTML에는 `<acronym>` (en-US) 요소에 대한 지원도 포함되어 있었지만, 약어와 두문자어를 모두 표현하기 위해 `<abbr>`을 사용하는 것을 선호하여 HTML 사양에서 제거되었습니다. `<acronym>`는 사용해서는 안 됩니다.

### 추가 학습: 약어 만들기

아래의 간단한 실습 과제를 통해 약어 사용에 대한 학습을 하고자 합니다. 아래의 샘플을 그대로 사용하시거나 여러분의 샘플로 교체 하실 수 있습니다.
```

<h2>실시간 출력</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>편집 가능한 코드</h2>
<p class="a11y-label">
  코드 영역에서 포커스를 이동하려면 Esc키를 누르십시오 (Tab키로 탭 문자를 삽입).
</p>

<textarea id="code" class="input" style="min-height: 50px; width: 95%">
<p>NASA(미국 항공우주국)는 흥미로운 일을 많이 하고 있습니다.</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>
```

```
html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}
```

```
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<p><abbr>NASA</abbr>(미국 항공 우주)는 흥미로운 일을 많이 하고 있습니다.</p>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};
```

연락처 세부 사항 표시
------------

HTML에서 `<address>` 요소를 이용해서 연락처 세부 정보를 표시할 수 있습니다. 이 요소는 연락처 세부 정보를 감싸고 있습니다. 아래는 예시입니다.

```html
<address>크리스 밀스, 맨체스터, 그림노스, 영국</address>
```

아래 예시와 같이 더 복잡한 마크업이나 다른 형태의 연락처 정보도 포함할 수도 있습니다.

```html
<address>
  <p>
    크리스 밀스<br />
    맨체스터<br />
    그림노스<br />
    영국
  </p>

  <ul>
    <li>전화: 01234 567 890</li>
    <li>이메일: me@grim-north.co.uk</li>
  </ul>
</address>
```

링크된 페이지에 연락처 정보가 포함되어 있는 경우에도 이와 같은 방식은 괜찮습니다.

```html
<address>
  <a href="../authors/chris-mills/">크리스 밀스</a>가 작성한 페이지.
</address>
```

**참고:** `<address>` 요소는 가장 가까운 `<article>` 또는 `<body>` 요소에 포함된 문서의 연락처 정보를 제공할 때만 사용해야 합니다. 사이트 푸터에 전체 사이트의 연락처 정보를 포함하거나 문서 내부에 작성자의 연락처 정보를 포함할 때 사용하는 것이 맞지만, 해당 페이지의 콘텐츠와 관련이 없는 주소 목록을 표시하는 데는 사용하지 않는 것이 좋습니다.

위 첨자와 아래 첨자
-----------

여러분은 종종 날짜, 화학 공식 및 수학 방적식과 같은 항목을 표시할 때 올바른 의미를 갖도록 위 첨자 아래 첨자를 사용해야 할 수도 있습니다. `<sup>` (en-US) 과 `<sub>` 요소들은 이를 위해 사용할 수 있습니다.

```html
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>
  Caffeine's chemical formula is
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>
```

표시될 결과는 아래와 같습니다.

컴퓨터 코드를 나타내기
------------

HTML 을 이용해 컴퓨터 코드를 나타낼 때 아래와 같은 많은 요소들을 사용할 수 있습니다.

* `<code>`: 일반적인 컴퓨터 코드를 표시합니다.
* `<pre>`: 공백(일반적으로 코드 블록)을 유지하기 위해 사용합니다. 택스트 내에서 들여 쓰기 또는 초과 공백을 사용하면 브라우저가 이를 무시하고 렌더링 된 페이지에 공백을 표시하지 않습니다. 그러나 `<pre></pre>` 태그로 텍스트를 감싸면 공백이 텍스트 편집기에서 보는 것과 동일하게 렌더링 됩니다.
* `<var>`: 변수 이름을 명확하게 표시합니다.
* `<kbd>`: 컴퓨터에 입력 된 키보드 (및 기타 유형) 입력을 표시합니다.
* `<samp>`: 컴퓨터 프로그램의 출력을 표시합니다.

이러한 요소의 예와 컴퓨터 코드를 표현하는 데 어떻게 사용되는지 살펴봅시다. 전체 파일을 보려면 other-semantics.html 샘플 파일을 살펴보세요. 파일을 다운로드하여 브라우저에서 열어 직접 확인할 수 있지만, 여기서는 코드의 일부를 소개합니다.

```html
<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>
  You shouldn't use presentational elements like <code><font></code> and
  <code><center></code>.
</p>

<p>
  In the above JavaScript example, <var>para</var> represents a paragraph
  element.
</p>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
```

위의 코드는 아래와 같이 표시됩니다.

시간과 날짜 표시
---------

HTML은 기계가 읽을 수 있는 형식(machine-readable)으로 시간과 날짜를 표시하기 위한 `<time>` 요소를 제공합니다. 예를 들면 아래와 같습니다.

```html
<time datetime="2016-01-20">20 January 2016</time>
```

이것이 왜 유용할까요? 인간이 날짜를 기록하는 방법에는 여러 가지가 있습니다. 위 날짜는 아래와 같이 나타낼 수 있습니다.

* 20 January 2016
* 20th January 2016
* Jan 20 2016
* 20/01/16
* 01/20/16
* The 20th of next month
* 20e Janvier 2016
* 2016 年 1 月 20 日
* And so on

그러나 이러한 다른 형식들은 컴퓨터가 쉽게 인식할 수 없습니다. 페이지의 모든 이벤트 날짜를 자동으로 인식하여 캘린더에 삽입하려면 어떻게 해야합니까? `<time>` 요소를 사용하면 기계가 읽을 수 있는 명확한 시간/날짜를 첨부 할 수 있습니다.

아래의 기본 예제는 간단한 기계 판독 가능 날짜를 제공하지만 사용 가능한 다른 많은 옵션들이 존재합니다.

```html
<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset -->
<time datetime="2016-01-20T19:30+01:00">
  7.30pm, 20 January 2016 is 8.30pm in France
</time>
<!-- Calling out a specific week number -->
<time datetime="2016-W04">The fourth week of 2016</time>
```

실력을 시험해 보세요!
------------

이 장의 마지막까지 읽었지만 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기 전에 이 정보를 기억하고 있는지 확인할 수 있는 몇 가지 추가 테스트가 있으니 실력 테스트: 고급 HTML 텍스트 (en-US)를 참조하세요.

요약
--

HTML 텍스트 의미론에 대한 스터디가 끝났습니다. 이 과정에서 학습한 내용이 HTML 텍스트 요소의 전부가 아님을 명심하십시오. 우리는 필수 요소를 위주로 다루고 싶었고, 여러분이 일반적인 상황에서 보거나 적어도 흥미롭게 다가올 수 있는 더 일반적인 것들 중 일부를 다루려고 했습니다. 더 많은 HTML 요소를 찾으려면 HTML element reference를 살펴보십시오.([인라인 텍스트 시멘틱](/ko/docs/Web/HTML/Element#인라인 텍스트 시멘틱) 섹션은 시작하기에 좋은 장소입니다). 다음 장에서는 HTML 문서의 다른 부분을 구조화 (en-US)하는 데 사용할 HTML 요소를 살펴 보겠습니다.

* 이전
* Overview: Introduction to HTML
* 다음  (en-US)


head 태그에는 무엇이 있을까? HTML의 메타데이터 - Web 개발 학습하기

head 태그에는 무엇이 있을까? HTML의 메타데이터
==============================

* 이전
* Overview: Introduction to HTML
* 다음

HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다. head는 `<title>` 같은 페이지나, CSS의 링크(HTML 컨텐츠를 CSS로 스타일링하기를 원한다면), 파비콘(favicon), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함합니다. 이 글에서는 위 내용들과 그 이상에 대해 다룰 것입니다. 이것은 head에 있어야하는 마크업이나 다른 코드들을 다루는데 좋은 기초가 될 것입니다.

|  |  |
| --- | --- |
| 사전 지식: |
 HTML의 기본 구조,
 Getting started with HTML문서의 내용을 사전에 읽으면 좋습니다.
  |
| 목적: |
 HTML의 head을 사용하는 목적과 HTML 문서에 어떤 영향을 끼칠 수 있는지에
 대해 학습합니다.
  |

HTML head란?
-----------

HTML document we covered in the previous article을 다시 봅시다.

```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>
```

HTML `<head>` 요소의 내용입니다. — 페이지를 열 때 브라우저에 표시되는 `<body>`요소와 다르게, head의 내용는 페이지에 표시되지 않습니다. 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함하는 것입니다. 위 예시의 head는 매우 간결합니다:

```html
<head>
  <meta charset="utf-8" />
  <title>My test page</title>
</head>
```

더 큰 웹 페이지의 경우엔 head가 꽤 많은 항목을 가질 수 있습니다. 가장 좋아하는 홈페이지로 가서 developer tools (en-US)을 이용해 head를 살펴보십시오. 이 글의 목적은 head에 들어갈 수 있는 것들 전부를 어떻게 사용하는지 보여주기 위한 것이 아니라, 주로 head에 넣고 싶어할만한 것들을 익숙하게 하고 사용하는 방법을 가르쳐주는 것입니다.

제목 달기
-----

우리는 action에서 `<title>` 요소를 이미 봤습니다. 이것은 문서의 title을 추가하기 위해 사용될 수 있습니다. head는 body에서 최상위 부분에 들어가는`<h1>` 요소와 헷갈릴 수 있습니다. <h1> 요소는 가끔 title을 가리키기도 하지만 이것은 엄연히 다릅니다!

* `<h1>` 요소는 일반적으로 페이지당 한 번 씩 사용되는데, 페이지 내용물의 제목이나 뉴스의 헤드라인을 표시하기 위해서 페이지를 열 때 브라우저에 표시됩니다.
* `<title>`은 (문서의 컨텐츠가 아니라) HTML문서 전체의 타이틀 표현하기 위한 메타데이터입니다.
### 능동적 학습: 간단한 예제 살펴보기

1. 능동적인 학습을 시작하기 위해서, GitHub repo에가서 title-example.html 페이지의 복사본을 다운로드 하십시오. 다음 중 하나를 하면 됩니다:
    1. 복사 붙여넣기를 새로운 텍스트 편집기에서 실행하고 당신이 알 만한 경로에 저장하십시오.
    2. 페이지에서 "Raw"버튼을 누르면, 새창에 Raw code가 나타납니다. 그런 다음 브라우저 메뉴에서 *File > Save Page As...* 로 원하는 곳에 저장하십시오
2. 이제 당신의 브라우저에서 받은 파일을 여십시오.아래와 같이 보일 것입니다:

 ![A simple web page with the title set to 'title' element, and the 'h1' set to 'h1' element.](/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/title-example.png)<h1>컨텐츠가 보이는 곳이 어디인지 이제 명백할 것입니다. 그리고 `<title>` 컨텐츠도 어디에 있는지 알 수 있습니다!
3. 텍스트 편집기에서도 이것을 열 수 있습니다. 이 요소들을 변경해보고, 페이지 새로고침하면서 즐겨보십시오.

`<title>` 요소는 다른 방식으로 사용될 수도 있는데, 예를 들면 브라우저에서 사이트를 북마크할 때, `<title>`의 내용물을 추천하는 북마크 이름으로 사용하기도 합니다.

![A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the 'title' element ](/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-example.png)

`<title>`은 아래에서 보는것 처럼 검색결과로 사용되기도 합니다.

메타데이터: <meta> 요소
----------------

메타데이터는 데이터를 설명하는 데이터이다 그리고 HTML에서 문서에 공식적으로 메타데이터를 적용하는 방법이 있습니다. — the `<meta>` 요소. 물론 이 기사에서 다루고 있는 다른 것들도 메타 데이터라고 보면 됩니다. 페이지의 <head> 안에 다양한 형태의 `<meta>` 가 있습니다. 하지만 이 단계에서 모두 다루지는 않을 것입니다. 대신에 흔히 볼 수 있고 자주 쓰이는 것들에 대해 다뤄 보도록 하겠습니다.

### 문서의 character 인코딩을 특정하기

위에서의 예제에서 , 아래의 줄이 포함됩니다:

```html
<meta charset="utf-8" />
```

이 요소는 문서의 character—문서에서 허용하는 문자 집합(character set)— encoding에 대해서 간단히 표시합니다 . `utf-8` 은 전세계적인 character 집합으로 많은 언어들을 문자들을 포함합니다. 이는 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미합니다. 따라서 당신이 작성할 모든 페이지에서 character 집합을 utf-8로 지정하는것은 좋은 생각입니다! 예를 들어서 당신의 웹페이지는 영어나 일본어 모두 허용합니다:

![a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,](/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/correct-encoding.png)예시로, 만약 (라틴 알파벳 사용을 위해서) `ISO-8859-1`로 characterset을 설정한다면, 페이지가 엉망으로 렌더링 될 것입니다:

![a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly](/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bad-encoding.png)

**참고:** 크롬과 같은 어떤 브라우저는 자동으로 잘못된 인코딩을 고치기 때문에, 어떤 브라우저를 사용하는가에 따라 이 문제를 겪지 않을 수도 있습니다. 그래도 다른 브라우저에서 있을 잠재적인 문제를 피하기 위하여 인코딩을 `utf-8` 으로 설정해야 합니다.

### 능동적 학습: character 인코딩 실험

이것을 사용해 보기 위해 이전 섹션에서 익혔던 `<title>` (title-example.html page)에서 얻은 간단한 HTML 템플릿을 다시 켜고 멘타 문자 세트값을 `ISO-8859-1`로 변경한 다음, 페이지에 일본어를 추가합니다.

```html
<p>Japanese example: ご飯が熱い。</p>
```

### 저자와 설명을 추가

많은 `<meta>` 요소가 `name` 과 `content` 속성을 가집니다:

* `name` 은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려줍니다.
* `content`는 실제 메타데이터의 컨텐츠입니다.

이러한 두가지 메타데이터는 당신의 페이지에서 관리자를 정리하고 머릿말을 요약하는데 유용합니다. 아래의 예시를 보면:

```html
<meta name="author" content="Chris Mills" />
<meta
 name="description"
 content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications." />
```

저자를 지정하는 것은 콘텐츠 작성자에 대한 정보를 볼 수 있게 해준다. 일부 컨텐츠 관리 시스템에는 페이지 작성자 정보를 자동으로 추출해서 사용할 수 있는 기능이 있다.

페이지 콘텐츠 관련 키워드를 포함시키는 것은 검색엔진에서 이 페이지가 더 많이 표시 될 가능성이 생기게 할 수 있다. (이러한 활동을 Search Engine Optimization, 또는 SEO 라고 함.)

### Active learning: The description's use in search engines

이 설명은 검색엔진 결과 페이지에서도 사용된다. 한번 알아보자.

1. 다음 링크로 간다. front page of The Mozilla Developer Network.
2. 페이지의 소스를 본다. (Right/
 `Ctrl`
 + click on the page, choose *View Page Source* from the context menu.)
3. 메타 태그를 찾아본다. 아마 아래와 같은 형태로 생겼을 것이다.

```html
<meta
 name="description"
 content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both
Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS." />
```

4. 지금 당신이 애용하는 검색엔진으로 "Mozilla Developer Network"를 찾아보라(우리는 YAHOO를 사용한다). 검색 결과를 보면, `<meta>` 및 `<title>` 요소의 컨텐츠 설명이 어떤 역할을 했는지 알 수 있을 것이다.

 ![A Yahoo search result for "Mozilla Developer Network"](/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/search-result.png)

**참고:** Google에서는 메인 MDN 홈페이지 링크 아래에 MDN의 몇 가지 관련 서브 페이지가 표시된다. 이를 사이트 링크라고하며 Google의 웹 마스터 도구에서 구성 할 수 있다. 그리고 이는 Google 검색 엔진에서 사이트의 검색 결과를 개선하는 방법이다.

**참고:** 많은 `<meta>` 기능들이 더이상 사용되지 않는다. (예를들어 `<meta name="keywords" content="fill, in, your, keywords, here">` 같은, 다른 검색 용어에 대해 해당 페이지의 관련성을 부여하기 위해 검색 엔진에 제공하던 키워드 등..) 스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워버리는 악용 사례가 생겨 버렸기 때문에 이것들은 검색 엔진들이 아예 무시를 해버리게 되었다.

### Other types of metadata

웹페이지를 돌아다니다 보면 다른 종류의 메타데이터들을 꽤 많이 볼 수 있다. 웹 사이트에서 볼 수있는 기능들은 특정 사이트 (예 : 소셜 네트워킹 사이트)에 사용할 수있는 특정 정보를 제공하도록 설계된 독점 제작물이다.

Open Graph Data 는 Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다. MDN 소스코드에서 다음과 같은 부분을 볼 수 있을 것이다.

```html
<meta
 property="og:image"
 content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
 property="og:description"
 content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS." />
<meta property="og:title" content="Mozilla Developer Network" />
```

Facebook에서 MDN에 링크를 하면, 이미지와 설명이 함께 나타난다. 사용자에게는 더 좋은 정보를 보여줄 수 있는 것이다.

![Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.](/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/facebook-output.png)Twitter 에서도 유사한 형태의 독점적인 자체 메타데이터를 가지고 있는데, 특정 웹사이트의 url이 twitter.com에 표시 될 때와 유사한 효과가 있다.

```html
<meta name="twitter:title" content="Mozilla Developer Network" />
```

맞춤 아이콘 추가하기
-----------

당신의 사이트 디자인을 좀 더 풍성하게 만들기 위해서 , 당신은 커스텀 아이콘 레퍼런스를 매타데이터에 추가하고 특정 콘텐츠에서 이것을 보여지게 할 수 있다.

The humble favicon, which has been around for many years, was the first icon of this type, a 16 x 16 pixel icon used in multiple places. 각 열린 페이지의 탭이나 북마크 패널 페이지 쪽에서 favicon을 볼 수 있다.

favicon은 다음과 같이 너의 사이트에 추가할 수 있다:

1. 당신의 사이트의 인덱스 페이지와 같은 디렉토리에 `.ico` 포멧의 파일을 저장하라 (most browsers will support favicons in more common formats like `.gif` or `.png`, but using the ICO format will ensure it works as far back as Internet Explorer 6.)
2. `다음 줄을 HTML <head>에 추가하여 favicon을 참조하라`:

```html
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
```

북마크 페널의 페비콘이 그 예시이다:

![The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.](/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/bookmark-favicon.png)

요즘은 많은 다른 아이콘 타입이 있다. 예를 들어서 MDN 홈페이지에서 다음과 같은 것을 발견할 것이다:

```html
<!-- third-generation iPad with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="144x144"
 href="https://developer.mozilla.org/static/img/favicon144.png" />
<!-- iPhone with high-resolution Retina display: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="114x114"
 href="https://developer.mozilla.org/static/img/favicon114.png" />
<!-- first- and second-generation iPad: -->
<link
 rel="apple-touch-icon-precomposed"
 sizes="72x72"
 href="https://developer.mozilla.org/static/img/favicon72.png" />
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link
 rel="apple-touch-icon-precomposed"
 href="https://developer.mozilla.org/static/img/favicon57.png" />
<!-- basic favicon -->
<link
 rel="shortcut icon"
 href="https://developer.mozilla.org/static/img/favicon32.png" />
```

주석은 각 아이콘의 용도를 설명한다. 웹사이트가 iPad의 홈 화면에 저장 될 때 사용할 고해상도 아이콘을 제공하는 것 등을 포함한다.

지금 당장 모든 아이콘을 구현할 줄 알아야 한다는 성급한 부담을 가질 필요는 없다. 이것은 고급 기능에 속하기도 하며, 이번 과정을 통해 여러 '지식'을 습득해야 가능하다. 이 페이지의 주된 목적은 다른 웹사이트의 소스 코드를 보며 그 '지식'을 습득할 수 있도록 하려는데에 있다.

HTML에 CSS 와 JavaScript 적용하기
---------------------------

현대의 모든 웹사이트는 상호작용 기능이 많은 영상 플레이어, 지도, 게임 등을 위해 JavaScript가 필요하고, 이것들을 더 멋져 보이게 하기 위해 CSS가 사용된다. 이것들은 `<link>` 요소와 `<script>` 요소를 사용하여 웹 페이지에 가장 일반적으로 적용된다.

* `<link>`는 항상 문서의 head 부분에 위치한다. 이것은 두 가지 속성을 취하는데, rel="stylesheet", 즉 문서의 스타일 시트임을 나타냄과 동시에 스타일 시트 파일의 경로를 포함하는 href를 내포한다.

```html
<link rel="stylesheet" href="my-css-file.css" />
```

* `<script>` 는 head에 들어갈 필요가 없다. `</body>` 태그 바로 앞, 문서 본문의 맨 끝에 넣는 것이 좋으며, JavaScript를 적용하기 전에 모든 HTML 내용을 브라우저에서 읽었는지 확인하는 것이 좋다. 액세스 과정에서 JavaScript가 아직 존재하지 않는 요소라고 판단하며 에러가 날 수 있다.

```html
<script src="my-js-file.js"></script>
```

**Note**: `<script>` 태그가 비어있다고 보일 수 도 있지만 그렇지 않으며, 반드시 태그를 닫아주어야 한다(</script>). 외부 스크립트 파일을 지정하는 대신 스크립트를 `<script>` 안에 넣을 수 도 있다.
### Active learning: applying CSS and JavaScript to a page

1. 이 실습을 시작하려면, 같은 로컬 디렉토리 안에 meta-example.html, script.js 그리고 style.css 파일을 미리 만들어 놓아야 한다. 올바른 이름과 파일 확장자로 저장되어 있는지 확인하는 것도 필수!
2. 애용하는 브라우져에서 HTML 파일을 열고, 텍스트 에디터도 실행한다.
3. 위에서 나온 설명대로 CSS와 JavaScript가 HTML에 적용되도록 HTML에 `<link>` 및 `<script>` 를 추가한다.

HTML을 저장하고 브라우저를 새로 고치면 올바르게 변경된 것이다:

![Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.](/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML/js-and-css.png)

* JavaScript가 빈 목록을 페이지에 추가했다. 이제 목록의 아무 곳이나 클릭하면 새 목록 항목에 대한 텍스트를 입력하라는 대화 상자가 나타난다. OK 버튼을 누르면 새로운 목록 아이템이 추가된다. 기존에 있던 목록의 아이템을 클릭하면 해당 아이템의 텍스트를 변경 할 수 있는 대화 상자가 나타난다.
* CSS에 의해 배경이 녹색으로 변하고 텍스트가 커진다. 그리고 javaScript가 페이지에 추가 한 일부 스타일도 적용된다(검은색 테두리가 있는 빨간색 공간).

**참고:** CSS나 JS를 적용하는데서 부터 애를 먹고 있으면 css-and-js.html 페이지를 참고하기를 추천한다.

문서의 기본 언어 설정
------------

마지막으로, 페이지의 언어를 설정 할 수도 있다. 이 작업은 lang attribute 을 여는 HTML 태그에 추가하여 수행 할 수 있다. (meta-example.html 과 아래 참조)

```html
<html lang="en-US"></html>
```

이것은 여러 방면에서 유용하다. HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 보다 효과적으로 색인화되며(예를 들어 언어 별 결과에 올바르게 표시되도록..) 화면 판독기를 사용하여 시각장애가 있는 사용자에게 유용하다.(예: 6이라는 숫자는 프랑스어와 영어에서 모두 존재하지만, 각기 다른 발음이 적용된다.)

또한, 문서의 하위 섹션을 다른 언어로 인식하도록 설정할 수도 있다. 예를들어 다음과 같이 일본어 일본어로 된 섹션에 대해서는 일본어로 인식하도록 할 수 있다:

```html
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
```

이 코드는 ISO 639-1 표준에 따른다. Language tags in HTML and XML 에서 자세한 내용을 확인할 수 있다.

요약
--

HTML head에 대한 퀵 파이어 투어가 마무리 되었다. 여기에서 보고 할 수 있는 것보다 훨씬 많은 부분이 있지만, 지금 단계에서는 복잡하거나 어렵게 느껴질 수도 있을 것이고 단지 당신에게 지극히 일반적이고 기초적인 사용법만을 제시했을 뿐이다.

* 이전
* Overview: Introduction to HTML
* 다음