<address> - HTML: Hypertext Markup Language

<address>
=========

**HTML `<address>` 요소**는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다.

시도해보기
-----

`<address>` 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있으며, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있습니다. 반드시 포함해야 하는 정보는 연락처가 가리키는 개인, 조직, 단체의 이름입니다.

`<address>`는 다양한 맥락에서 사용할 수 있습니다. 사업체 연락 방법을 페이지 헤더에 배치할 때도 쓸 수 있고, `<article>` 내부에 배치해서 글의 작성자를 나타낼 수도 있습니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 플로우 콘텐츠. 단, 다음의 요소는 사용할 수 없습니다.다른
 `<address>`, 제목 콘텐츠
 (`<hgroup>`, `<h1>`,
 `<h2>`, `<h3>`,
 `<h4>`, `<h5>`,
 `<h6>`), 구획 콘텐츠
 (`<article>`, `<aside>`,
 `<section>`, `<nav>`),
 `<header>`, `<footer>` 요소.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. 단, `<address>` 요소 제외. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

* 기존 명세에서의 `<address>` 요소는 문서 작성자의 연락처만 나타내는 요소였습니다. 그러나 최신 명세에서 임의의 연락처를 포함할 수 있도록 수정됐습니다.
* 연락처 외의 정보(출판일 등)를 담아서는 안됩니다.
* 보통, 현재 구획에 `<footer>` 요소가 존재하면 `<address>`를 그 안에 배치할 수 있습니다.
예제
--

다음 예제는 `<address>`를 사용해 글 작성자의 연락처를 구별하는 모습을 보입니다.

```html
<address>
  You can contact author at
  <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>.<br />
  If you see any bugs, please
  <a href="mailto:webmaster@somedomain.com"> contact webmaster</a>.<br />
  You may also want to visit us:<br />
  Mozilla Foundation<br />
  331 E Evelyn Ave<br />
  Mountain View, CA 94041<br />
  USA
</address>
```

### 결과

비록 겉보기는 `<i>`나 `<em>` 요소와 같지만, `<address>` 요소는 자체적인 의미를 갖고 있으므로 연락처 표기에는 `<address>`가 더 적합합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-address-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<hgroup> - HTML: Hypertext Markup Language

<hgroup>
========

**HTML `<hgroup>` 요소**는 문서 구획의 다단계 제목을 나타냅니다. 다수의 `<h1>-<h6>` 요소를 묶을 때 사용합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 제목 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 |
 하나 이상의 `<h1>`, `<h2>`,
 `<h3>`, `<h4>`,
 `<h5>`, `<h6>`.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 규칙 | `tab` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

**참고:** `<hgroup>` 요소는 W3C HTML5 명세에서 제거되었고, WHATWG판 HTML에만 남아있습니다. 그러나 대부분의 브라우저에서 부분적으로 구현 중이므로 사라지지는 않을 것으로 보입니다.
 다만, `<hgroup>` 요소의 주요 목적이 HTML 명세의 개요 알고리즘에서 제목의 표시 방법을 설정하기 위함이며, **어떠한 브라우저도 개요 알고리즘을 구현하지 않았음**을 고려할 때, `<hgroup>`의 의미는 이론적으로만 유효합니다.
 W3C HTML5 명세에서 `<hgroup>` 없이 부제, 보조 제목, 태그라인의 마크업 방법에 대한 조언을 제공하고 있습니다.

`<hgroup>` 요소는 문서 구획의 주 제목과 2차 제목을 연결해, 제목-부제목과 같은 "다단계 제목"을 만들 수 있습니다.

다른 말로 하면, `<hgroup>` 요소는 자신의 2차 `<h1>-<h6>`이 문서 개요에 자신의 구획을 생성하는 것을 방지합니다.

따라서 HTML 개요 알고리즘이 생성한 추상적 개요 내에서, `<hgroup>`은 논리적인 단일 제목을 형성하고, `<hgroup>`의 자식 제목 요소가 그 안에 하나로 포함됩니다.

예제
--

```html
<hgroup>
  <h1>주요 제목</h1>
  <h2>부제목</h2>
</hgroup>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-hgroup-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 구획 관련 다른 요소: `<body>`, `<article>`, `<section>`, `<aside>`, `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<nav>`, `<header>`, `<footer>`, `<address>`;
* HTML5 문서의 구획과 개요.


<rtc>: 루비 텍스트 콘테이너 요소 - HTML: Hypertext Markup Language

<rtc>: 루비 텍스트 콘테이너 요소
=====================

**HTML `<rtc>` 요소**는 `<rb>` 요소가 표시하는 문자의 의미에 대한 주석을 나타냅니다. `<rb>`는 발음(`<rt>`)과 의미(`<rtc>`) 둘 다 가질 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 구문 콘텐츠
 또는 `<rt>` 요소.
  |
| 태그 생략 |
 바로 뒤따르는 요소가 `<rb>`,
 `<rt>`, 다른 `<rtc>` 요소거나,
 자신이 부모의 마지막 요소라면 닫는 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<ruby>` 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--

```html
<div class="info">
  <ruby>
    <rbc>
      <rb>馬</rb><rt>마</rt> <rb>來</rb><rt>래</rt> <rb>西</rb><rt>서</rt>
      <rb>亞</rb><rt>아</rt>
    </rbc>
    <rtc>말레이시아</rtc>
  </ruby>
</div>
```

```
.info {
  padding-top: 10px;
  font-size: 36px;
}
```

명세
--

| Specification |
| --- |
| HTML Standard # rtc |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rt>`
* `<rbc>`


<rb>: 루비 베이스 요소 - HTML: Hypertext Markup Language

<rb>: 루비 베이스 요소
===============

**HTML `<rb>` 요소**는 `<ruby>` 표기의 기반 텍스트 구성요소(루비 주석을 적용하려는 글자)를 나눌 때 사용합니다. 하나의 `<rb>` 요소는 기반 텍스트에서의 최소 단위를 하나 감싸야 합니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | `<ruby>` 요소의 자손. |
| 태그 생략 |
 바로 뒤따르는 요소가 `<rt>`,
 `<rtc>`, `<rp>`, 다른
 `<rb>` 요소거나, 자신이 부모의 마지막 요소라면 닫는
 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<ruby>` 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

* 루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. `<rb>` 요소는 기반 텍스트의 각 조각을 나타내는 용도입니다.
* `<rb>`는 빈 요소가 아니지만, 보통 소스 코드에는 여는 태그만 사용해 루비 마크업을 덜 복잡하고 읽기 쉽게 합니다. 브라우저가 렌더링 때 알아서 닫는 태그를 추가합니다.
* 각각의 `<rb>` / 기반 조각 하나마다 `<rt>` 요소 하나를 작성해야 합니다.
예제
--

다음 예제는 "경복궁"의 한자/한글 표기를 병행합니다.

```html
<ruby>
  <rb>景</rb><rb>福</rb><rb>宮 </rb><rp>(</rp><rt>경</rt><rt>복</rt><rt>궁</rt
 ><rp>)</rp>
</ruby>
```

세 개의 `<rb>` 요소를 사용해 기반 글자(한자)를 세 개로 나눴습니다. 반면, 한글 표기는 세 개의 `<rt>` 요소를 사용합니다.

세 개의 기반 조각을 완전히 분리해 작성할 수도 있다는 점을 알아두세요. 이 때는 `<rb>` 요소를 사용하지 않아도 됩니다.

```html
<ruby>
  景 <rp>(</rp><rt>경</rt><rp>)</rp> 福 <rp>(</rp><rt>복</rt><rp>)</rp> 宮
  <rp>(</rp><rt>궁</rt><rp>)</rp>
</ruby>
```

결과는 다음과 같습니다.

루비 주석을 지원하지 않는 브라우저에서는 아래와 같이 출력합니다.
```

景福宮 (경복궁)
```

```
body {
  font-size: 22px;
}
```

**참고:** `<ruby>` 요소 참고서를 방문해 다른 예제도 살펴보세요.

명세
--

| Specification |
| --- |
| HTML Standard # rb |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<ruby>`
* `<rt>`
* `<rp>`
* `<rtc>`


<a> - HTML: Hypertext Markup Language

<a>
===

**HTML `<a>` 요소**(앵커 요소)는 `href` 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. `<a>` 안의 콘텐츠는 링크 목적지의 설명을 **나타내야 합니다**.

시도해보기
-----

특성
--

이 요소는 전역 특성을 포함합니다.

`download`

링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봅니다. 값을 지정할 수도 있고, 지정하지 않을 수도 있습니다.

* 값이 없으면 파일 이름과 확장자는 브라우저가 다양한 인자로부터 생성해 제안합니다.
    + `Content-Disposition` HTTP 헤더
    + URL 경로의 마지막 조각
    + 미디어 유형 (`Content-Type` 헤더, `data:` URL의 시작 부분, `blob:` URL의 `Blob.type`에서 알아냄)
* 값을 지정하면 저장할 때의 파일 이름으로서 제안합니다. `/`와 `\` 문자는`_`로 변환합니다. 파일시스템에서 다른 문자도 제한할 수 있으므로, 필요한 경우 브라우저가 추가로 이름을 조정할 수 있습니다.

**참고:**- `download`는 동일 출처 URL과 `blob:`, `data:` 스킴에서만 작동합니다.

* `Content-Disposition`의 `filename`이 `download`와 다를 땐 헤더가 우선권을 가집니다. (`Content-Disposition: inline`일 때, Firefox는 헤더를 우선하고 Chrome은 `download`를 우선합니다.)

`href`

하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없고, 브라우저가 지원하는 모든 URL 스킴을 사용할 수 있습니다.

* 페이지 구획을 가리키는 프래그먼트 URL
* 미디어 파일 일부를 가리키는 미디어 프래그먼트
* `tel:` URL을 사용하는 전화번호
* `mailto:` URL을 사용하는 이메일 주소
* 웹 브라우저는 다른 URL 스킴을 지원하지 않지만, 웹사이트는 `Navigator.registerProtocolHandler()`를 통해 지원할 수 있습니다.

`hreflang`

링크 URL의 인간 언어에 대한 힌트. 특별한 내장 기능은 없습니다. 가능한 값은 전역 `lang` 특성과 동일합니다.

`ping`

하나의 스페이스로 구분하는 URL 목록. 링크를 클릭해 따라갈 경우, 브라우저가 URL 각각에 `POST` 요청을 전송합니다. 대개 추적 용도로 사용합니다.

`referrerpolicy`
Experimental

URL을 가져올 때 사용할 리퍼러. `Referrer-Policy` (en-US) 문서에서 가능한 값과 효과를 확인하세요.

`rel`

하나의 스페이스로 구분하는, 연결한 URL과의 관계를 나타내는 링크 유형 목록.

`target`

링크한 URL을 표시할 위치. 가능한 값은 브라우징 맥락으로, 즉 탭, 창, `<iframe>`의 이름이나 특정 키워드입니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.

* `_self`: URL을 현재 브라우징 맥락에 표시합니다. 기본값.
* `_blank`: URL을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
* `_parent`: URL을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 `_self`와 동일하게 행동합니다.
* `_top`: URL을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 `_self`와 동일하게 행동합니다.

**참고:** `target`을 사용할 때, `rel="noreferrer"`를 추가해 `window.opener` API의 악의적인 사용을 방지하는걸 고려하세요.

**참고:** 최근의 브라우저(Firefox 79+ 등)에서는 target="\_blank"를 지정하면 `rel="noopener"`를 적용한 것과 같은 동작을 합니다.

`type`

링크 URL의 MIME type에 대한 힌트. 특별한 내장 기능은 없습니다.

속성
--

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠,
 대화형 컨텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 투명함.
 플로우 콘텐츠(대화형 콘텐츠 제외) 또는
 구문 콘텐츠.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 |
구문 콘텐츠를 허용하는 모든 요소, 또는 플로우 콘텐츠를 허용하는 모든 요소. 단,
 다른 `<a>` 요소는 불가능.
  |
| 암시적 ARIA 역할 | `href` 특성이 존재하면 `link` (en-US), 그 외의
 경우
 대응하는 역할 없음 |
| 가능한 ARIA 역할 | `href` 특성이 존재할 경우,* `button` (en-US)
* `checkbox` (en-US)
* `menuitem` (en-US)
* `menuitemcheckbox` (en-US)
* `menuitemradio` (en-US)
* `option` (en-US)
* `radio` (en-US)
* `switch` (en-US)
* `tab` (en-US)
* `treeitem` (en-US)

`href` 특성이 존재하지 않을 경우,* 모두
 |
| DOM 인터페이스 | `HTMLAnchorElement` (en-US) |

예제
--

### 절대 URL로 연결

#### HTML

```html
<a href="https://www.mozilla.com">Mozilla</a>
```

#### 결과

### 상대 URL로 연결

#### HTML

```html
<a href="//example.com">Scheme-relative URL</a>
<a href="/ko/docs/Web/HTML">Origin-relative URL</a>
<a href="./p">Directory-relative URL</a>
```

```
a {
  display: block;
  margin-bottom: 0.5em;
}
```

#### 결과

### 같은 페이지의 요소로 연결

```html
<!-- <a> 요소로 아래의 구획에 연결 -->
<p><a href="#Section\_further\_down">아래 제목으로 건너뛰기</a></p>

<!-- 링크가 향할 제목 -->
<h2 id="Section\_further\_down">아래의 제목</h2>
```

**참고:** `href="#top"`이나 빈 프래그먼트(`href="#"`)를 사용하면 현재 페이지의 최상단으로 이동하는 링크를 생성할 수 있습니다. HTML 명세를 확인하세요.

### 이메일 주소로 연결

사용자의 이메일 프로그램을 통해 새로운 메일을 보낼 수 있는 링크를 생성하려면 `mailto:` 스킴을 사용하세요.

```html
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
```

제목과 본문 포함 등, `mailto:` URL에 관한 자세한 내용은 이메일 링크와 RFC 6068을 참고하세요.

### 전화번호로 연결

```html
<a href="tel:+49.157.0156">+49 157 0156</a>
<a href="tel:+1(555)5309">(555) 5309</a>
```

`tel:` 링크는 장치의 능력에 따라 행동이 바뀝니다.

* 휴대전화에서는 번호를 자동으로 입력합니다.
* 대부분의 운영체제에는 Skype, FaceTime처럼 전화를 걸 수 있는 프로그램이 있습니다.
* 웹사이트는 `Navigator.registerProtocolHandler()`를 사용해 전화를 걸 수 있습니다. `web.skype.com`을 참고하세요.
* 다른 행동으로는 연락처에 저장하기와 다른 장치로 전송 등이 있습니다.

`tel:` URL의 구문, 추가 기능, 그 외 더 자세한 정보는 RFC 3966을 참고하세요.

### `download` 특성으로 `<canvas>`를 PNG로 저장하기

`download` 특성과 `data:` URL을 사용해 `<canvas>` 요소의 콘텐츠를 이미지로 저장할 수 있습니다.

#### 저장 링크를 가진 그림판 예제

##### HTML

```html
<p>
  마우스 드래그로 그림을 그려보세요.
  <a href="" download="my\_painting.png">다운로드</a>
</p>

<canvas width="300" height="300"></canvas>
```

##### CSS

```css
html {
  font-family: sans-serif;
}
canvas {
  background: #fff;
  border: 1px dashed;
}
a {
  display: inline-block;
  background: #69c;
  color: #fff;
  padding: 5px 10px;
}
```

##### JavaScript

```js
var canvas = document.querySelector("canvas"),
  c = canvas.getContext("2d");
c.fillStyle = "hotpink";

function draw(x, y) {
  if (isDrawing) {
    c.beginPath();
    c.arc(x, y, 10, 0, Math.PI \* 2);
    c.closePath();
    c.fill();
  }
}

canvas.addEventListener("mousemove", (event) =>
  draw(event.offsetX, event.offsetY),
);
canvas.addEventListener("mousedown", () => (isDrawing = true));
canvas.addEventListener("mouseup", () => (isDrawing = false));

document
  .querySelector("a")
  .addEventListener(
    "click",
    (event) => (event.target.href = canvas.toDataURL()),
  );
```

##### 결과

보안과 개인정보
--------

`<a>` 요소는 사용자의 보안과 개인정보에 중요한 영향을 줄 수 있습니다. `Referer` 헤더: 개인정보와 보안 고려사항 문서에서 자세한 내용을 알아보세요.

`target="_blank"`를 `rel="noreferrer"`와 `rel="noopener"` 없이 사용하면 웹사이트가 `window.opener` API 악용 공격에 취약해집니다. (취약점 설명) 다만, 최근 브라우저(Firefox 79+ 등)는 `target="_blank"`를 지정하면 임의로 `rel="noopener"` 설정과 동일한 보호 수준을 적용합니다.

접근성
---

### 강한 링크 텍스트

링크 안의 콘텐츠는, 맥락에서 벗어나더라도 링크가 향하는 곳을 설명해야 합니다.

#### 접근성 떨어지는 약한 링크 텍스트

심각하게 흔한 실수는 "여기를 클릭"이나 "여기"라는 단어에 링크를 한다는 것입니다.

```html
<p>저희의 제품을 더 알아보시려면 <a href="/products">여기</a>를 클릭하세요.</p>
```

#### 강한 링크 텍스트

다행히도 쉽게 수정할 수 있는 데다가, 접근성이 떨어지는 버전보다 더 짧습니다!

```html
<p>저희의 <a href="/products">제품을 더 알아보세요</a>.</p>
```

접근성 보조 기술은 페이지 안의 모든 링크를 나열하는 단축키가 있습니다. 그러나 강한 링크 텍스트가 보조 기술 사용자에게만 도움을 주는 것은 아닙니다. 모든 링크 나열 단축키는 시각적 사용자가 페이지를 빠르게 훑는 것을 흉내 내는 것이기 때문입니다.

### `onclick` 이벤트

앵커 요소의 `href`를 `#`이나 `javascript:void(0)`으로 지정해 페이지 새로고침을 막고, `click` 이벤트 처리기를 등록해서 가짜 버튼을 만드는 방식으로 남용하는 경우가 많습니다.

이런 가짜 `href` 값은 링크를 복사하거나 드래그할 때, 링크를 새 탭이나 새 창에서 열 때, 즐겨찾기에 추가할 때와 JavaScript를 불러오고 있거나 스크립트 오류가 발생했을 때, 아니면 비활성화했을 때 예측하지 못한 동작을 유발합니다. 또한 스크린 리더 등 보조 기술에도 잘못된 의미를 전달합니다.

대신 `<button>`을 사용하세요. **하이퍼링크는 진짜 URL로의 탐색 용도로만 사용해야 합니다**.

### 외부 링크와 비 HTML 리소스 링크

`target="_blank"`로 인해 새 탭/창을 여는 링크와, 파일을 다운로드하는 링크는, 링크를 클릭했을 때 무슨 일이 발생할건지 명시해야 합니다.

시력이 나쁘거나 스크린 리더로 탐색하는 사용자, 혹은 지각 능력이 낮은 사용자는 예상하지 못한 상황에서 새 탭, 새 창, 다른 앱이 켜지는 순간 혼란스러울 수 있습니다. 오래된 스크린 리더는 이런 상황을 아예 알려주지 못할 수도 있습니다.

#### 새로운 탭/창을 여는 링크

```html
<a target="\_blank" href="https://ko.wikipedia.org">
  위키백과 (새 탭에서 열림)
</a>
```

#### 비 HTML 리소스 링크

```html
<a href="2017-annual-report.ppt">2017 연간 보고서 (PowerPoint)</a>
```

아이콘을 사용해 링크의 행동을 강조할 땐 대체 텍스트를 꼭 지정하세요.

```html
<a target="\_blank" href="https://ko.wikipedia.org">
  위키백과
  <img alt="(새 탭에서 열림)" src="newtab.svg" />
</a>

<a href="2017-annual-report.ppt">
  2017 연간 보고서
  <img alt="(PowerPoint 파일)" src="ppt-icon.svg" />
</a>
```

* WebAIM: Links and Hypertext - Hypertext Links
* MDN / Understanding WCAG, Guideline 3.2 (en-US)
* G200: Opening new windows and tabs from a link only when necessary
* G201: Giving users advanced warning when opening a new window
### 건너뛰기 링크

**건너뛰기 링크**(skip link)는 `<body>` 콘텐츠에서 가능한 앞쪽에 배치하는 링크로, 페이지의 주요 콘텐츠 시작점을 가리킵니다. 건너뛰기 링크는 보통 포커스 전까지 숨겨집니다.

```html
<body>
  <a href="#content">내용으로 건너뛰기</a>

  <header>…</header>

  <main id="content"><!-- 여기로 건너뜀 --></main>
</body>
```

```css
.skip-link {
  position: absolute;
  top: -3em;
  background: #fff;
}
.skip-link:focus {
  top: 0;
}
```

건너뛰기 링크는 헤더 내비게이션과 같이 여러 페이지에서 반복되는 콘텐츠를 키보드 사용자가 쉽게 생략할 수 있도록 도와줍니다.

건너뛰기 링크는 스위치 조작, 음성 명령, 마우스 스틱/헤드 완드처럼 반복 콘텐츠를 건너뛰기 힘든 보조 기술 사용자에게 큰 도움이 됩니다.

* WebAIM: "Skip Navigation" Links
* How-to: Use Skip Navigation links
* MDN / Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.1
### 크기와 간격

#### 크기

링크와 같은 대화형 요소는 상호작용하기 충분한 크기의 활성화 영역을 가져야 합니다. 충분한 크기는 운동 조절 장애를 가진 사용자와, 터치스크린처럼 정확하지 않은 입력 도구 사용자처럼 다양한 사람을 돕습니다. 최소 44x44의 CSS 픽셀 크기를 권고합니다.

산문 내의 텍스트로만 이루어진 링크는 위 규칙에서 제외할 수 있지만, 그래도 활성화하기 쉬운 크기를 확보하는 것이 좋습니다.

* Understanding Success Criterion 2.5.5: Target Size
* Target Size and 2.5.5
* Quick test: Large touch targets

#### 간격

링크와 같은 대화형 요소 다수를 시각적으로 가까이 배치할 땐 서로를 분리하는 공간을 둬야 합니다. 간격은 운동 조절 장애를 가진 사용자가 원하지 않는 상호작용을 하는걸 방지할 수 있습니다.

간격은 `margin`과 같은 CSS 속성으로 설정할 수 있습니다.

* Hand tremors and the giant-button-problem
명세
--

| Specification |
| --- |
| HTML Standard # the-a-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<link>`는 `<a>`와 유사하지만, 사용자에게 노출하지 않는 메타데이터 하이퍼링크를 위한 요소입니다.
* `:link`는 유효한 `href` 특성을 가진 `<a>` 요소를 선택하는 CSS 의사 클래스입니다.


<bdo>: 양방향 텍스트 재정의 요소 - HTML: Hypertext Markup Language

<bdo>: 양방향 텍스트 재정의 요소
=====================

**HTML `<bdo>` 요소**는 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성을 포함합니다.

`dir`

요소 콘텐츠의 텍스트 쓰기 방향. 가능한 값은 다음과 같습니다.

* `ltr`: 텍스트를 왼쪽에서 오른쪽으로 써야 함을 나타냅니다.
* `rtl`: 텍스트를 오른쪽에서 왼쪽으로 써야 함을 나타냅니다.

예제
--

```html
<!-- 쓰기 방향 바꾸기 -->
<p>이 글은 왼쪽에서 오른쪽으로 작성합니다.</p>
<p><bdo dir="rtl">이 글은 오른쪽에서 왼쪽으로 작성합니다.</bdo></p>
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-bdo-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<kbd>: 키보드 입력 요소 - HTML: Hypertext Markup Language

<kbd>: 키보드 입력 요소
================

**HTML `<kbd>` 요소**는 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냅니다. 관례에 따라 사용자 에이전트의 고정폭 글꼴로 표시하지만, HTML 표준은 그런 점을 강제하지 않습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성 (en-US)만 포함합니다.

사용 일람
-----

`<kbd>` 요소를 다른 요소와 조합해 더 상세한 상황을 표현할 수 있습니다.

* `<kbd>` 요소를 다른 `<kbd>` 요소 안에 배치해, 하나의 입력 안의 작은 부분이나, 실제 타이핑 키를 하나씩 나타낼 수 있습니다. 아래의 입력 안의 키입력 나타내기 예제를 참고하세요.
* `<kbd>` 요소를 `<samp>` 요소 안에 배치하면 시스템이 에코로써 다시 출력한 사용자 입력을 나타낼 수 있습니다. 아래의 재출력된 입력 예제를 참고하세요.
* 반면, `<samp>` 요소를 `<kbd>` 요소 안에 배치하면 화면에 표시된 메뉴 이름, 메뉴 항목, 버튼 이름 등 시스템이 출력한 텍스트를 기반으로 한 입력을 나타낼 수 있습니다. 아래의 화면에 표시된 입력 옵션 나타내기 예제를 참고하세요.

**참고:** 사용자 지정 CSS 파일을 정의해 `<kbd>` 요소의 브라우저 기본 글꼴을 바꿀 수 있지만, 사용자 설정이 더 우선할 수도 있습니다.

예제
--

### 기본 예제

```html
<p>
  <kbd>help mycommand</kbd> 명령어를 입력해 "mycommand" 명령에 대한 문서를
  확인하세요.
</p>
```

#### 결과

### 입력 안의 키입력 나타내기

다수의 키입력으로 구성된 입력을 설명할 땐 여러 개의 `<kbd>` 요소를 중첩할 수 있습니다. 바깥 `<kbd>`는 전체 입력을, 각각의 키입력 또는 구성요소는 안쪽의 `<kbd>`로 나타냅니다.

#### 스타일 없이

우선 기본 HTML에서 어떻게 나타나나 확인해보겠습니다.

##### HTML

```html
<p>
  새로운 문서는 키보드 단축키 <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd
 >으로 만들 수 있습니다.
</p>
```

단축키 조합 전체를 하나의 `<kbd>`로 감싼 후, 조합 구성요소를 나타내기 위해 각각의 키보드 키를 다른 `<kbd>`로 감싼 모습입니다.

**참고:** 꼭 이렇게 중첩할 필요는 없습니다. 바깥 `<kbd>`를 생략하고, `<kbd>Ctrl</kbd>+<kbd>N</kbd>`로 작성하더라도 완벽하게 유효한 표기법입니다.

다만 현재 사용 중인 스타일에 따라 중첩이 유용할 때도 있습니다.

##### 결과

스타일 시트 없는 출력은 다음과 같습니다.

#### 스타일 적용

CSS를 좀 더해서 명확하게 바꿀 수 있습니다.

##### CSS

키보드 버튼을 렌더링 할 때 사용할 수 있는, `<kbd>` 요소의 `"key"` 스타일을 추가합니다.

```css
kbd.key {
  border-radius: 3px;
  padding: 1px 2px 0;
  border: 1px solid black;
}
```

##### HTML

HTML을 업데이트해 앞선 스타일을 적용합니다.

```html
<p>
  새로운 문서는 키보드 단축키
  <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd
 >으로 만들 수 있습니다.
</p>
```

##### 결과

원하던 바로 그 결과입니다!

### 재출력된 입력

`<kbd>` 요소를 `<samp>` 요소 안에 배치하면 시스템이 다시 출력한 입력을 나타낼 수 있습니다.

```html
<p>
  구문 오류가 발생하면, 오류 원인을 찾을 수 있도록 입력받은 명령을 다시
  출력합니다.
</p>
<blockquote>
  <samp><kbd>custom-git ad my-new-file.cpp</kbd></samp>
</blockquote>
```

결과는 다음과 같습니다.

### 화면에 표시된 입력 옵션 나타내기

`<samp>` 요소를 `<kbd>` 요소 안에 배치하면 시스템이 화면에 표시하는 입력 선택지(메뉴, 버튼...)에 기반한 사용자 입력을 나타냅니다.

예를 들면, "파일" 메뉴의 "새 문서" 옵션을 선택하는 방법에 대해 설명하는 HTML은 다음과 같은 형태를 가집니다.

```html
<p>
  새로운 파일을 생성하려면,
  <kbd>
    <kbd><samp>파일</samp></kbd
 >⇒<kbd><samp>새 문서</samp></kbd>
  </kbd>
  메뉴를 선택하세요.
</p>

<p>
  파일의 이름을 입력한 후, <kbd><samp>확인</samp></kbd
 >을 누르는 걸 잊지 마세요.
</p>
```

흥미로운 중첩 사용법을 볼 수 있습니다. 메뉴 옵션 설명을 보면, 전체 입력 시퀀스가 하나의 `<kbd>` 요소에 들어간 것을 볼 수 있으며, 메뉴 이름("파일")과 메뉴 항목("새 문서") 둘 다 각자의 `<kbd>`와 `<samp>`로 표시한 것을 볼 수 있습니다. `<kbd>` 안에 `<samp>`가 존재하므로, "파일"과 "새 문서"는 화면 위의 위젯을 사용한 입력임을 알 수 있습니다.

#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-kbd-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<code>`


<span> - HTML: Hypertext Markup Language

<span>
======

**HTML `<span>` 요소**는 구문 콘텐츠를 위한 통용 인라인 컨테이너로, 본질적으로는 아무것도 나타내지 않습니다. 스타일을 적용하기 위해서, 또는 `lang` 등 어떤 특성의 값을 서로 공유하는 요소를 묶을 때 사용할 수 있습니다. 적절한 의미를 가진 다른 요소가 없을 때에만 사용해야 합니다. `<span>`은 `<div>` (en-US)와 매우 유사하지만, `<div>` (en-US)는 블록 레벨 요소인 반면 `<span>`은 인라인 요소입니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠
 또는
 플로우 콘텐츠를 허용하는 모든 요소.
  |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLSpanElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--

### 예제 1

#### HTML

```html
<p><span>Some text</span></p>
```

#### 결과

### 예제 2

#### HTML

```html
<li><span>
    <a href="portfolio.html" target="\_blank">See my portfolio</a>
</span></li>
```

#### CSS

```css
li span {
  background: gold;
}
```

#### Result

명세
--

| Specification |
| --- |
| HTML Standard # the-span-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* HTML `<div>` (en-US) 요소


<hr> - HTML: Hypertext Markup Language

<hr>
====

**HTML `<hr>` 요소**는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다.

시도해보기
-----

역사적으로 `<hr>`은 가로줄로 표현했습니다. 시각적 브라우저에서도 가로줄로 그려질 수 있지만, 이제 시각 표현에 그치지 않고 의미를 가지게 됐습니다. 따라서 가로줄을 그리고 싶다면 적절한 CSS를 사용해야 합니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠. |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | `presentation` (en-US) |
| DOM 인터페이스 | `HTMLHRElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`align`
지원이 중단되었습니다

줄의 정렬을 지정합니다. 기본값은 `left`입니다.

`color`
비표준

색깔 이름 또는 16 진수의 값으로 줄의 색깔을 지정합니다.

`noshade`
지원이 중단되었습니다

Sets the rule to have no shading.

`size`
지원이 중단되었습니다

줄의 높이를 픽셀 단위로 지정합니다.

`width`
지원이 중단되었습니다

줄의 가로 길이를 픽셀이나 퍼센트 값으로 지정합니다.

예제
--

### HTML

```html
<p>
This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.
This is the first paragraph of text.
</p>

<hr>

<p>
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
This is second paragraph of text.
</p>
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-hr-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<p>`


<mark> - HTML: Hypertext Markup Language

<mark>
======

**HTML `<mark>` 요소**는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성을 포함합니다.

사용 일람
-----

일반적인 `<mark>` 요소의 사용처는 다음과 같습니다.

* 인용문(`<q>`, `<blockquote>`)에서는, 원본엔 별도 표시가 없으나 특별히 봐야 하는 부분을, 그리고 원저자는 특별히 중요하다고는 생각하지 않았으나 주시해야 할 필요가 있는 부분을 표시합니다. 형광펜을 사용해 중요해 보이는 책에 강조 표시를 추가하는 것처럼 생각하면 됩니다.
* 다른 경우, `<mark>`는 문서 콘텐츠에서 사용자의 현재 행동과 관련 있는 부분을 나타낼 때 사용합니다. 예를 들어, 현재 검색 키워드를 강조 표시할 때 사용할 수 있습니다.
* `<mark>`를 표시만을 위한 용도로 사용하지 마세요. `<span>`과 적절한 CSS를 대신 사용해야 합니다.

**참고:** `<mark>`와 `<strong>` (en-US) 요소의 차이점을 기억하세요. 텍스트에서, `<mark>`는 연관성을 가진 부분을, `<strong>`은 중요도를 가진 부분을 나타낼 때 사용합니다.

예제
--

### 관심 부분 표시하기

첫 예제의 `<mark>` 요소는 인용문에서 사용자가 관심을 가질 텍스트를 강조할 때 사용합니다.

```html
<blockquote>
  It is a period of civil war. Rebel spaceships, striking from a hidden base,
  have won their first victory against the evil Galactic Empire. During the
  battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire’s
  ultimate weapon, the DEATH STAR, an armored space station with enough power to
  destroy an entire planet.
</blockquote>
```

### 상황에 맞는 구절 식별

다음 예제는 글의 검색 결과를 강조할 용도로 `<mark>`를 사용합니다.

```html
<p>
  It is a dark time for the Rebellion. Although the Death Star has been
  destroyed, <mark class="match">Imperial</mark> troops have driven the Rebel
  forces from their hidden base and pursued them across the galaxy.
</p>

<p>
  Evading the dreaded <mark class="match">Imperial</mark> Starfleet, a group of
  freedom fighters led by Luke Skywalker has established a new secret base on
  the remote ice world of Hoth.
</p>
```

다른 `<mark>`와 검색 결과 표시를 구별하기 위해 사용자 지정 클래스 `"match"`를 추가로 적용했습니다.

접근성 고려사항
--------

대부분의 스크린 리더는 기본값에서 `<mark>` 요소의 존재를 표현하지 않습니다. 그러나 CSS `content` 속성과 `::before` (en-US), `::after` 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.

```css
mark::before,
mark::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

mark::before {
  content: " [강조 시작] ";
}

mark::after {
  content: " [강조 끝] ";
}
```

스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 강조표시의 유무가 꼭 필요할 때만 사용해야 합니다.

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
명세
--

| Specification |
| --- |
| HTML Standard # the-mark-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<p> - HTML: Hypertext Markup Language

<p>
===

**HTML `<p>` 요소**는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통 인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.

문단은 블록 레벨 요소이며, 자신의 닫는 태그(`</p>`) 이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다. 아래의 "태그 생략" 항목을 참고하세요.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠 |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 |
 시작 태그는 필수입니다. 닫는 태그는 `<p>` 요소의
 바로 뒤에 `<address>`,
 `<article>`, `<aside>`,
 `<blockquote>`, `<div>` (en-US),
 `<dl>`, `<fieldset>`,
 `<footer>`, `<form>`,
 `<h1>`, `<h2>`,
 `<h3>`, `<h4>`,
 `<h5>`, `<h6>`,
 `<header>`, `<hr>`,
 `<menu>` (en-US), `<nav>`,
 `<ol>`, `<pre>`,
 `<section>`, `<table>` (en-US),
 `<ul>`, `<p>` 요소가
 위치하는 경우, 또는 부모 태그의 콘텐츠가 더 존재하지 않고 부모가
 `<a>` 요소가 아닐 때 생략할 수 있습니다.
  |
| 가능한 부모 | 플로우 콘텐츠를 허용하는 모든 요소 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLParagraphElement` (en-US) |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--

### HTML

```html
<p>첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.
  첫 번째 문단입니다.</p>
<p>두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.
  두 번째 문단입니다.</p>
```

### 결과

문단 꾸미기
------

브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다. 첫 줄 들여쓰기 등 다른 구분 방법은 CSS를 통해 사용할 수 있습니다.

### HTML

```html
<p>
  독자 입장에선 문단 사이를 여백으로 구분하는게 제일 읽기 쉽지만, 첫 줄
  들여쓰기로도 구분할 수 있습니다. 들여쓰기는 보통 인쇄매체에서 공간과 종이를
  아끼기 위해 사용합니다.
</p>

<p>
  학교 과제나 초안 등 나중에 편집할 글은 여백과 들여쓰기 둘 다 사용합니다.
  그러나 완성한 글에 둘 다 사용하는건 불필요하고 초보적으로 여겨집니다.
</p>

<p>
  아주 오래된 글에서는 문단을 특수기호 ¶, <i>필크로</i>(단락 기호)로
  구분했습니다. 그러나 답답하고 읽기 힘들어 지금은 사용하지 않습니다.
</p>

<p>
  얼마나 읽기 힘들까요? 직접 알아보세요.
  <button data-toggle-text="안돼! 다시 돌려놔요!">단락 기호 써보기</button>
</p>
```

### CSS

```css
p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
  text-indent: 0;
  display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}
```

### JavaScript

```js
document.querySelector("button").addEventListener("click", function (event) {
  document.querySelectorAll("p").forEach(function (paragraph) {
    paragraph.classList.toggle("pilcrow");
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});
```

### 결과

접근성 고려사항
--------

콘텐츠를 문단으로 나누면 페이지의 접근성을 높입니다. 스크린 리더 등 보조 기술은 다음 문단으로 넘어갈 수 있는 단축키 등을 제공하므로, 시각적 매체의 여백이 사용자의 빠른 콘텐츠 탐색을 돕는 것과 같은 효과를 얻을 수 있습니다.

빈 `<p>` 요소를 사용해 문단 사이에 여백을 추가하면 스크린 리더 사용자에게 부정적인 경험을 줄 수 있습니다. 스크린 리더가 문단의 존재는 알려주겠지만, 더 읽을 내용이 없기 때문입니다. 따라서 스크린 리더 사용자가 혼란을 느낄 수 있습니다.

여분의 공간이 필요하다면 `margin` 등 CSS 속성을 통해 적용하세요.

```css
p {
  margin-bottom: 2em; /\* 문단 다음 여백을 늘림 \*/
}
```

명세
--

| Specification |
| --- |
| HTML Standard # the-p-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<hr>`
* `<br>`


<main> - HTML: Hypertext Markup Language

<main>
======

**HTML `<main>` 요소**는 문서 `<body>`의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.

시도해보기
-----

`hidden` 속성 없이는 문서에 하나보다 많은 `<main>` 요소가 존재해선 안됩니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 요소. 단,
 구조적으로 올바른 `<main>` 요소여야 합니다.
  |
| 가능한 ARIA 역할 |
 기본적으로 `main` 역할 포함,
 `presentation` (en-US) 가능.
  |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

`<main>` 요소의 콘텐츠는 문서의 유일한 내용이어야 합니다. 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 여러 문서에 걸쳐 반복되는 콘텐츠는 포함해선 안됩니다. 그러나 검색 폼이 페이지의 주요 기능이라면 예외로 둘 수 있습니다.

`<main>`은 요소 개요에 영향을 주지 않습니다. `<body>` 등의 요소나 `<h2>`와 같은 제목 요소와 달리 `<main>`은 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보 제공용입니다.

예제
--

```html
<!-- other content -->

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>
      These bright red apples are the most common found in many supermarkets.
    </p>
    <p>...</p>
    <p>...</p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies.</p>
    <p>...</p>
    <p>...</p>
  </article>
</main>

<!-- other content -->
```

접근성 고려사항
--------

### 랜드마크

`<main>` 요소는 `main` 랜드마크 (en-US) 역할과 동일하게 행동합니다. 랜드마크 (en-US)는 접근성 보조기술이 문서의 큰 구획을 찾고 이동할 때 쓰입니다. 구형 브라우저를 지원할 필요가 없다면, `role="main"`보다 `<main>` 요소를 사용하세요.

### 건너뛰기 링크

건너뛰기 링크, 스킵 내비게이션(skipnav)은 접근성 보조기술이 주요 탐색 구획, 정보 배너 등 반복되는 큰 구획을 빠르게 넘어갈 수 있도록 지원하는 기법으로, 사용자가 페이지의 주요 내용으로 신속하게 접근할 수 있도록 도와줍니다.

`<main>` 요소에 `id` 요소를 추가해 건너뛰기 링크의 대상으로 지정하세요.

```html
<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>
```

* WebAIM: "Skip Navigation" Links
### 읽기 모드

브라우저 읽기 모드는 문서 콘텐츠를 변환할 때 `<main>` 요소와 더불어 제목과 콘텐츠 구획 요소를 사용합니다.

* Building websites for Safari Reader Mode and other reading apps.
명세
--

| Specification |
| --- |
| HTML Standard # the-main-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

대부분의 브라우저에서 `<main>` 요소를 지원합니다. 그러나 Internet Explorer 11 이하를 지원할 땐 `<main>` 요소에 `"main"` ARIA 역할을 명시해 접근성을 확보하는 것이 좋습니다.

```html
<main role="main">...</main>
```

같이 보기
-----

* 기본 구조 요소: `<html>`, `<head>`, `<body>`
* 구획 관련 요소: `<article>`, `<aside>`, `<footer>`, `<header>`, `<nav>`
* ARIA: Main role (en-US)


<header> - HTML: Hypertext Markup Language

<header>
========

**HTML `<header>` 요소**는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 플로우 콘텐츠. 단, 다른 `<header>` 또는
 `<footer>`가 자손으로 올 수 없습니다.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. 단, `<address>`,
 `<footer>`, 또는 다른 `<header>`의
 자손으로 사용할 수 없습니다.
  |
| 가능한 ARIA 역할 | `group` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

`<header>` 요소는 구획 콘텐츠가 아니므로 개요에 구획을 생성하지 않습니다. 대신 주위 구획의 제목(<h1>-<h6> 요소)을 감싸기 위한 요소지만, 필수 사항은 **아닙니다**.

### 역사적 사용처

`<header>`는 HTML5에서야 명세에 포함됐지만, 사실 HTML의 시작부터 존재했습니다. 세계 최초의 웹사이트에서 확인할 수 있듯 원래는 `<head>`요소로서 사용했지만, 어느 순간부터 다른 이름이 됐습니다. 덕분에 `<header>`는 나중에 다른 역할을 맡을 수 있었습니다.

예제
--

### 페이지 제목

```html
<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>
```

### 글 제목

```html
<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p>
    <a href="https://janesmith.com/the-planet-earth/">Continue reading....</a>
  </p>
</article>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-header-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<pre>: 미리 서식 정의된 텍스트 요소 - HTML: Hypertext Markup Language

<pre>: 미리 서식 정의된 텍스트 요소
=======================

**HTML `<pre>` 요소**는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다.

시도해보기
-----

`<pre>` 태그 안에서 `<`, `>`, `&`, `"` 와 같은 예약 문자를 표시하려면, 각각의 HTML 개체 (en-US)를 사용해 이스케이프해야 합니다.

특성
--

이 요소는 전역 특성만 포함합니다.

`cols`
비표준

지원이 중단되었습니다

행에 포함되어야 하는 기본 문자 갯수입니다. `width`의 비표준 동의어였습니다. 이러한 효과를 얻으려면 대신 CSS `width`를 사용하십시오.

`width`
지원이 중단되었습니다

비표준

행에 포함되어야 하는 기본 문자 갯수입니다. 기술적으로는 여전히 구현되어 있으나, 이 특성은 시각적 효과가 없습니다. 이러한 효과를 얻으려면 대신 CSS `width`를 사용하십시오.

`wrap`
비표준

지원이 중단되었습니다

오버플로가 어떤 식으로 발생해야 하는지 나타내는 힌트입니다. 최신 브라우저에서 이 힌트는 무시되어 시각적 효과가 나타나지 않습니다. 이러한 효과를 얻으려면 대신 CSS `white-space`를 사용하십시오.

접근성 고려사항
--------

`<pre>` 요소로 만든 이미지나 도표에 대한 대체 설명을 지정하는 것이 중요합니다. 대체 설명은 분명하고 간결하게 이미지 또는 도표 콘텐츠를 설명해야 합니다.

시력이 낮은 사용자가 스크린 리더와 같은 보조 기술을 사용 중이라면, 미리 서식 적용한 텍스트의 문자를 차례대로 읽어서는 이게 무엇을 의미하는지 이해하지 못할 수 있습니다.

`<figure>`과 `<figcaption>`에 더해, ARIA `role`과 `aria-label` 특성을 조합하면 `<pre>`와 사용하면, 미리 서식 지정된 ASCII 아트를 마치 이미지처럼 표현하면서 `<figcaption>`을 대체 설명으로 사용할 수 있습니다.

### 예제

```html
<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  <     나는 이 분야의 전문가다.     >
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    소 한 마리가 "나는 이 분야의 전문가다"라고 말하고 있습니다. 소는 미리 서식을
    적용한 텍스트로 그려져있습니다.
  </figcaption>
</figure>
```

* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
예제
--

### 기초 예제

#### HTML

```html
<p>CSS로 글자 색을 바꾸는건 쉽습니다.</p>
<pre>
body {
  color:red;
}
</pre>
```

#### 결과

### 예약 문자 이스케이프

#### HTML

```html
<pre>
let i = 5;

if (i < 10 && i > 0)
  return "한 자리 숫자"
</pre>
```

#### 결과

기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 포함되는 ARIA 역할 | `포괄적 (en-US)` |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLPreElement` (en-US) |

명세
--

| Specification |
| --- |
| HTML Standard # the-pre-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* CSS: `white-space`, `word-break`
* HTML 개체 (en-US)
* 관련된 요소: `<code>`


<html>: HTML 문서 / 루트 요소 - HTML: Hypertext Markup Language

<html>: HTML 문서 / 루트 요소
=======================

**HTML `<html>` 요소**는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 `<html>` 요소의 후손이어야 합니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 |
 하나의 `<head>` 요소와 그 뒤를 따르는 하나의
 `<body>` 요소.
  |
| 태그 생략 | `<html>` 요소 내부의 첫 번째 것이 주석이 아니라면 시작
 태그를 생략할 수 있습니다.`<html>` 요소 바로 뒤에
 주석이 따라오지 않는다면 종료 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | 없음. `<html>`이 문서의 루트 요소입니다. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 없음 |
| DOM 역할 | `HTMLHtmlElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`manifest`
지원이 중단되었습니다

지역적으로 캐시되어야하는 리소스를 가리키는 매니페스트 리소스의 URI를 나타냅니다. 자세한 내용은 애플리케이션 캐시 사용하기를 보세요.

`version`
지원이 중단되었습니다

현재 문서를 제어하는 HTML 문서 타입 정의의 버전을 나타냅니다. 하지만 이미 문서 타입 선언이 버전을 나타내고 있기 떄문에 이 속성은 필요하지 않습니다.

`xmlns`

문서의 XML 네임스페이스를 지정합니다. 기본값은 `"http://www.w3.org/1999/xhtml"`입니다. XML 구문 분석기로 분석한 문서에는 필수이고, `text/html` 문서에서는 선택사항입니다.

예제
--

```html
<!doctype html>
<html lang="ko">
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>
```

접근성 고려사항
--------

`html` 요소의 `lang` 특성에 유효한 IETF 언어 식별 태그를 지정하면 스크린 리더가 음성 표현에 사용할 언어를 선택할 때 도움이 됩니다. 언어 식별 태그는 페이지의 주 언어를 가리켜야 합니다. 아무런 값도 지정하지 않을 시 보통 운영체제의 언어 설정을 따라가므로, 잘못된 발음을 사용할 수 있습니다.

또한 `<html>` 요소에 유효한 `lang` 선언이 존재해야 `<title>`과 같은 `<head>` 내부의 중요한 메타데이터를 정확한 발음으로 표현할 수 있습니다.

* MDN Understanding WCAG, Guideline 3.1 explanations (en-US)
* Understanding Success Criterion 3.1.1 | W3C Understanding WCAG 2.0
명세
--

| Specification |
| --- |
| HTML Standard # the-html-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* MathML 최상위 요소 `<math> (en-US)`
* SVG 최상위 요소 `<svg>` (en-US)


<i> - HTML: Hypertext Markup Language

<i>
===

**HTML `<i>` 요소**는 텍스트에서 어떤 이유로 주위와 구분해야 하는 부분을 나타냅니다. 기술 용어, 외국어 구절, 등장인물의 생각 등을 예시로 들 수 있습니다. 보통 기울임꼴로 표시합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

* 일반 산문과 다른 문체를 가진 텍스트에 `<i>` 요소를 사용하세요. 주위 텍스트와 다른 의미를 가진 텍스트에 적용하면 됩니다.
* 초기 HTML 명세의 `<i>` 요소는, `<b>` 요소가 굵은 글씨 적용에 그쳤던 것과 마찬가지로, 글자를 기울이기만 하는 단순한 시각적 요소였습니다. 그러나 지금은 글자 외형에 그치지 않고 특정한 의미를 지니는 요소이므로 시각적인 강조에 그치지 않습니다. 보통, 브라우저가 여전히 `<i>` 요소의 글자를 기울이겠지만, 명세에 따르면 꼭 그렇게 표시할 필요는 없습니다.
* `<i>` 요소가 글자를 기울이기는 하지만, 기울임꼴을 적용하기 위한 용도로 사용해서는 안됩니다. CSS `font-style` (en-US) 속성을 사용하세요.
* 강조하려는 텍스트가 다른 요소에 더 적합하지 않은지 고려하세요.
    + `<em>` 요소는 강세를 나타냅니다.
    + `<strong>` (en-US) 요소는 보다 강한 강조를 나타냅니다.
    + `<mark>` 요소는 관련성을 나타냅니다.
    + `<cite>` 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.
    + `<dfn>` 요소는 정의 대상인 용어를 나타냅니다.
예제
--

다음 예제는 외국어를 강조하기 위해 `<i>` 요소를 사용합니다.

```html
<p>
  라틴어 문구 <i>Veni, vidi, vici</i>는 음악과 예술, 문학에 자주 등장합니다.
</p>
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-i-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<em>`


<thead>: 표 머릿글 요소 - HTML: Hypertext Markup Language

<thead>: 표 머릿글 요소
=================

**`<thead>`** HTML 요소는 테이블의 열의 머리글인 행들의 집합입니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 0개 이상의 `<tr>` (en-US) 요소. |
| 태그 생략 | 여는 태그는 필수입니다. `<thead>` 요소 뒤에 `<tbody>` (en-US) 또는 `<tfoot>` 요소가 바로 이어지는 경우에는 닫는 태그를 생략할 수 있습니다. |
| 가능한 부모 요소 | `<table>` (en-US) 요소. `<thead>` 요소는 무조건 `<caption>` 또는 `<colgroup>` (en-US) 요소 뒤에 (암시적으로 정의된 경우에도) 위치해야 하지만, `<tbody>` (en-US),
 `<tfoot>` 과 `<tr>` (en-US) 요소의 앞에 위치해야 합니다.
  |
| 암시적 ARIA 역할 | `rowgroup (en-US)` |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLTableSectionElement` (en-US) |

특성
--

이 요소는 전역 특성만 포함합니다.

### 더 이상 사용하지 않는 특성

`align`
지원이 중단되었습니다

아래에 나열된 속성들은 각 셀 컨텐츠의 수평 정렬 방법을 지정합니다. 가능한 값:

* `left`, 컨텐츠를 셀의 왼쪽으로 정렬합니다.
* `center`, 컨텐츠를 셀의 가운데로 정렬합니다.
* `right`, 컨텐츠를 셀의 오른쪽으로 정렬합니다.
* `justify`, 컨텐츠가 셀의 양쪽으로 정렬되도록 텍스트 컨텐츠에 공백을 삽입합니다.
* `char`, `char` 와 `charoff` 특성에 의해 정해지는 최소 오프셋을 가진 특수 문자에 대해 텍스트 컨텐츠를 정렬합니다.

만약 값이 따로 할당되어 있지 않다면 `left` 가 기본값으로 지정됩니다.

>
> **주의:** 이 속성은 최신 표준에서는 사용되지 않으며 지원되지 않으므로 사용하지 마십시오.
>
>
> * `left`, `center`, `right` 또는 `justify` 값과 같은 효과를 내고 싶다면, CSS `text-align` 속성을 적용하세요.
> * `char` 값과 같은 효과를 내고 싶다면, CSS3에서 `text-align` 속성의 값으로 `char`의 값을 사용할 수 있습니다.
>
>
>

`bgcolor`
비표준

이 특성은 열의 각 셀의 배경색을 정의합니다. 앞에 '#'을 붙인 sRGB 6자리 16진수 코드입니다. 미리 정의된 16개의 색상 문자열을 사용할 수도 있습니다.

* `black` = "#000000"
* `green` = "#008000"
* `silver` = "#C0C0C0"
* `lime` = "#00FF00"
* `gray` = "#808080"
* `olive` = "#808000"
* `white` = "#FFFFFF"
* `yellow` = "#FFFF00"
* `maroon` = "#800000"
* `navy` = "#000080"
* `red` = "#FF0000"
* `blue` = "#0000FF"
* `purple` = "#800080"
* `teal` = "#008080"
* `fuchsia` = "#FF00FF"
* `aqua` = "#00FFFF"

>
> **Note:** 이 특성은 표준이 아니며, Microsoft Internet Explorer의 몇몇 버전에서만 구현되므로 사용하지 마십시오. `<thead>` 요소에 스타일을 적용하려면 CSS를 사용해야 합니다. **bgcolor** 특성과 비슷한 효과를 내고 싶다면, 관련된 `<td>` (en-US) 또는 `<th>` (en-US) 요소에 CSS `background-color` 속성을 사용하세요.
>
>
>

`char`
지원이 중단되었습니다

이 특성은 열의 셀을 정렬할 문자를 설정하는 데 사용됩니다. 숫자 또는 통화 값을 정렬할 때에는 일반적으로 마침표(.)가 포함됩니다. 만약 `align`이 `char`로 설정되어 있지 않으면, 이 특성은 무시됩니다.

>
> **Note:** 이 특성은 최신 표준에서는 사용되지 않으며 지원되지 않으므로 사용하지 마십시오. `char`와 같은 효과를 내고 싶다면, CSS3에서 `char` 특성을 `text-align` 속성의 값으로 하여 문자 집합을 사용할 수 있습니다.
>
>
>

`charoff`
지원이 중단되었습니다

이 특성은 **char** 특성으로 지정된 정렬 문자에서 열 데이터를 오프셋할 문자의 수를 나타내는 데 사용됩니다.

>
> **주의:** 이 특성은 최신 표준에서는 사용되지 않으며 지원되지 않으므로 사용하지 마십시오.
>
>
>

`valign`
지원이 중단되었습니다

이 특성은 표 머리글의 각 행 내에 있는 텍스트의 수직 정렬 방식을 지정합니다. 이 특성에 사용 가능한 값:

* `baseline`, 텍스트를 가능한 셀의 하단에 가깝게, 하지만 텍스트의 baseline에 맞춰 배치합니다. 만약 문자들의 크기가 모두 같다면, 이것은 `bottom`과 같은 효과를 가집니다.
* `bottom`, 텍스트를 가능한 한 셀의 하단에 가깝게 배치합니다.
* `middle`, 텍스트를 셀의 가운데에 배치합니다.
* `top`, 텍스트를 가능한 한 셀의 상단에 가깝게 배치합니다.

>
> **Note:** 이 특성은 최신 표준에서는 사용되지 않으며 지원되지 않으므로 사용하지 마십시오. 대신 CSS의 `vertical-align` 속성을 적용하세요.
>
>
>

예제
--

`<thead>`에 대한 예제는 `<table>` (en-US)을 참고해 주세요.

명세
--

| Specification |
| --- |
| HTML Standard # the-thead-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 테이블과 관련된 다른 HTML 요소들: `<caption>`, `<col>` (en-US), `<colgroup>` (en-US), `<table>` (en-US), `<tbody>` (en-US), `<td>` (en-US), `<tfoot>`, `<th>` (en-US), `<tr>` (en-US).
* `<thead>` 요소에 스타일을 지정할 때 특히 유용할 CSS 속성과 가상 클래스들:
    + 각 열의 셀들을 정렬할 때 사용하는 `:nth-child` 가상 클래스.
    + '.'같은 동일한 문자에 모든 셀 내용을 정렬할 때 사용하는 `text-align` 속성.


<dt> - HTML: Hypertext Markup Language

<dt>
====

**HTML `<dt>` 요소**는 설명 혹은 정의 리스트에서 용어를 나타냅니다. `<dl>` 요소 안에 위치해야 합니다. 보통 `<dd>` 요소가 뒤따르지만, 여러 개의 <dt> 요소를 연속해 배치하면 바로 다음 `<dd>` 요소로 한꺼번에 서술할 수 있습니다.

뒤따르는 `<dd>` 요소가 `<dt>`로 지정한 용어의 정의와 기타 관련 글을 제공합니다.

시도해보기
-----

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 플로우 콘텐츠. 단, `<header>`,
 `<footer>`, 구획 콘텐츠, 제목 콘텐츠 자손은
 불가능합니다.
  |
| 태그 생략 |
 여는 태그는 필수입니다. 바로 다음 요소가 `<dd>`
 또는 `<dt>`거나, 자신이 부모의 마지막 자식이라면 닫는
 태그는 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<dl>` 안의, `<dd>` 혹은
 다른 `<dt>` 앞. 또는 (WHATWG
 HTML에서) `<dl>` 안의
 `<div>` (en-US).
  |
| 암시적 ARIA 역할 | `term` (en-US) |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--

<dl> 요소의 예제를 확인하세요.

명세
--

| Specification |
| --- |
| HTML Standard # the-dt-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<dd>`, `<dl>`


<small>: 덧붙임 글 요소 - HTML: Hypertext Markup Language

<small>: 덧붙임 글 요소
=================

**HTML `<small>`** **요소**는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다. 기본 상태에서 `<small>`은 자신의 콘텐츠를 한 사이즈 작은 글꼴(`small`에서 `x-small` 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소, 또는
 플로우 콘텐츠를 허용하는 모든 요소.
  |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

예제
--

### 기본 사용법

```html
<p>
  This is the first sentence.
  <small>This whole sentence is in small letters.</small>
</p>
```

### CSS 예제

```html
<p>
  This is the first sentence.
  <span style="font-size:0.8em">This whole sentence is in small letters.</span>
</p>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-small-element |

참고
--

`<b>`, `<i>`, `<small>` 요소는 구조와 표현을 분리하는 원칙을 위배하는 것처럼 보이지만, 셋 모두 HTML5에서 유효합니다. 작성자는 `<small>`과 CSS 중 어느 것을 사용할지 결정하기 전에 심사숙고해야 합니다.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<b>`


<dialog>: 대화 상자 요소 - HTML: Hypertext Markup Language

<dialog>: 대화 상자 요소
==================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**HTML `<dialog>` 요소**는 닫을 수 있는 경고, 검사기, 창 등 대화 상자 및 기타 다른 상호작용 가능한 컴포넌트를 나타냅니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | `dialog` (en-US) |
| 가능한 ARIA 역할 | `alertdialog` (en-US) |
| DOM 인터페이스 | `HTMLDialogElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

**경고:** `tabindex` 특성을 `<dialog>` 요소에 사용해서는 안됩니다.

`open`

대화 상자가 활성 상태이며 상호작용할 수 있음을 나타냅니다. `open` 특성이 없을 때 대화 상자가 사용자에게 보여서는 안됩니다.

사용 일람
-----

* `method="dialog"` 특성을 사용한 `<form>` 요소는 제출 시 대화 상자를 닫습니다. 이 때, 대화 상자의 `returnValue` (en-US) 속성은 양식을 제출할 때 사용한 버튼의 `value`으로 설정됩니다.
* CSS `::backdrop` (en-US) 의사 요소를 사용하면, `HTMLDialogElement.showModal()` (en-US) 메서드를 사용해 활성화한 `<dialog>` 요소의 뒤에 스타일을 적용할 수 있습니다. 예를 들면, 모달 대화 상자가 활성화되어 있는 동안 접근할 수 없는 뒤쪽 요소를 어둡게 만들 때 사용합니다.
예제
--

### 간단한 예제

```html
<dialog open>
  <p>여러분 안녕하세요!</p>
</dialog>
```

### 고급 예제

다음 예제는 "상세정보 업데이트" 버튼을 클릭할 경우 양식을 포함한 팝업 대화 상자를 엽니다.

#### HTML

```html
<!-- 간단한 양식을 포함한 팝업 대화 상자 -->
<dialog id="favDialog">
  <form method="dialog">
    <p>
      <label
 >좋아하는 동물:
        <select>
          <option></option>
          <option>아르테미아</option>
          <option>레서판다</option>
          <option>거미원숭이</option>
        </select>
      </label>
    </p>
    <menu>
      <button value="cancel">취소</button>
      <button id="confirmBtn" value="default">확인</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">상세정보 업데이트</button>
</menu>

<output aria-live="polite"></output>
```

#### JavaScript

```js
var updateButton = document.getElementById("updateDetails");
var favDialog = document.getElementById("favDialog");
var outputBox = document.getElementsByTagName("output")[0];
var selectEl = document.getElementsByTagName("select")[0];
var confirmBtn = document.getElementById("confirmBtn");

// “Update details” button opens the <dialog> modally
updateButton.addEventListener("click", function onOpen() {
  if (typeof favDialog.showModal === "function") {
    favDialog.showModal();
  } else {
    alert("The <dialog> API is not supported by this browser");
  }
});
// "Favorite animal" input sets the value of the submit button
selectEl.addEventListener("change", function onSelect(e) {
  confirmBtn.value = selectEl.value;
});
// "Confirm" button of form triggers "close" on dialog because of [method="dialog"]
favDialog.addEventListener("close", function onClose() {
  outputBox.value =
    favDialog.returnValue + " button clicked - " + new Date().toString();
});
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-dialog-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

폴리필
---

지원하지 않는 브라우저에서 `<dialog>`를 사용하려면 dialog-polyfill을 추가하세요.

같이 보기
-----

* `close` 이벤트
* `cancel` 이벤트
* `::backdrop` (en-US) 의사 요소
* HTML 양식 (en-US) 안내서


<label> - HTML: Hypertext Markup Language

<label>
=======

**HTML `<label>` 요소**는 사용자 인터페이스 항목의 설명을 나타냅니다.

시도해보기
-----

`<label>` 을 `<input>` (en-US) 요소와 연결하면 몇 가지 이점이 있습니다:

* label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다.
* 관련 label 을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.

`<label>` 을 `<input>` 요소와 연관시키려면, `<input>` 에 `id` 속성을 넣어야합니다. 그런 다음 `<label>` 에 `id` 와 같은 값의 `for` 속성을 넣어야합니다.

또는, `<label>` 안에 `<input>` 을 중첩시킬 수 있습니다. 이 경우 연관이 암시적이므로 `for` 및 `id`속성이 필요없습니다.

```html
<label
 >Do you like peas?
  <input type="checkbox" name="peas" />
</label>
```

다른 사용법 메모:

* label 이 붙여진 양식 컨트롤(form control) 은 *레이블된 제어 labeled control* 라고 불립니다. 하나의 input 은 여러 label들에 연관되어있습니다.
* 연관된 양식 컨트롤(form control) 이 있는 `<label>` 이 클릭되거나 터치되면, 이 label의 `click` 이벤트는 연관된 control 도 동작시킵니다.
특성
--

이 요소는 전역 특성을 포함합니다.

`for`

같은 문서 내의 `<label>` 요소로서, 레이블 가능한 form-related 요소의 `id`. 레이블 가능한 요소일 때, `for` 속성값과 일치하는 `id`를 가진 문서의 첫 번째 요소는 그 label 요소의 \*라벨 제어(labeled control)\*라고 합니다. label을 지정할 수 없으면 `for` 속성은 영향을 미치지 않습니다. 문서의 뒷부분에 `id` 값과 일치하는 다른 요소들은 무시합니다.

**참고:** `<label>` 요소는 `for` 속성과 제어control 요소를 동시에 가질 수 있습니다. 이 때 `for` 속성은 포함되어있는 제어control 요소를 가리키고 있어야 합니다.

`form`

label과 연관된 `<form>` 요소(*양식 소유자 form owner*). 이 속성이 지정된 경우, 이 속성 값은 동일한 문서의 `<form>` 요소의 id입니다. 따라서 label 요소를 양식 요소의 자손이 아닌 문서의 어느 곳에나 배치 할 수 있습니다.

CSS 스타일링
--------

`<label>` 요소에 대한 특별한 스타일 고려 사항은 없습니다. 구조적으로 단순한 인라인 요소이므로 `<span>` 또는 `<a>` 요소와 같은 방식으로 스타일을 지정할 수 있습니다 }}. 텍스트를 읽기 어렵게하지 않는 한 원하는 방식으로 스타일을 적용 할 수 있습니다.

예제
--

### 간단한 label 예제

```html
<label>Click me <input type="text" /></label>
```

### "for" 속성 예제

```html
<label for="username">Click me</label> <input type="text" id="username" />
```

접근성 고려사항
--------

### 인터랙티브 콘텐츠

Don't place interactive elements such as anchors or buttons inside a `label`. Doing so makes it difficult for people to activate the form input associated with the `label`.

`label` 안에 anchors 또는 buttons와 같은 인터랙티브 요소를 배치하지 마십시오. 그렇게하면 사람들이 `label`과 관련된 양식을 입력하기 어렵습니다.

#### 하지 마세요

```html
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>
```

#### 이렇게 하세요

```html
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
```

### 제목

제목은 일반적으로 탐색 목적의 보조 도구로 사용되므로 `<label>` 내에 제목 요소를 배치하면 많은 종류의 보조 기술을 방해합니다. label의 텍스트를 시각적으로 조정해야하는 경우, `<label>` 요소에 적용된 CSS 클래스를 사용하십시오.

양식(form) 또는 양식의 섹션에 제목이 필요한 경우 `<fieldset>` 내에 배치 된 `<legend>` 요소를 사용하십시오.

#### 하지 마세요

```html
<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>
```

#### 이렇게 하세요

```html
<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>
```

### 버튼

`type="button"`선언과 유효한 `value` 속성을 가진 `<input>` (en-US) 요소에는 연관된 레이블이 필요하지 않습니다. 그렇게하면 보조 기술이 버튼 입력을 구문 분석하는 방법을 실제로 방해 할 수 있습니다. `<button>` 요소에도 동일하게 적용됩니다.

기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠,
 대화형 콘텐츠,
 양식 관련 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. 단, 다른 `<label>` 요소는 자손으로 올 수 없습니다.
 레이블을 지정한 컨트롤 외의 다른
 레이블 가능
 요소는 자손으로 사용할 수 없습니다.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLLabelElement` (en-US) |

명세
--

| Specification |
| --- |
| HTML Standard # the-label-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<samp>: 출력 예시 요소 - HTML: Hypertext Markup Language

<samp>: 출력 예시 요소
================

**HTML `<samp>` 요소**는 컴퓨터 프로그램 출력의 예시(혹은 인용문)를 나타냅니다. 보통 브라우저의 기본 고정폭 글씨체(보통 Courier, Lucida Console)를 사용해 렌더링합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

브라우저가 `<samp>` 요소에 사용하는 기본 글씨체는 CSS를 사용해 바꿀 수 있습니다. 그러나 브라우저의 사용자 설정값이 모든 CSS보다 우선할 수도 있습니다.

기본 글씨체를 덮어쓸 수 있는 CSS는 다음과 같은 형태입니다.

```css
samp {
  font-family: "Courier";
}
```

**참고:** 웹사이트나 앱의 JavaScript 코드 출력을 담을 컨테이너 요소가 필요하다면 `<output>` 요소를 사용해야 합니다.

예제
--

### 기본 예제

다음 간단한 예제는 문단이 프로그램 출력 예시를 포함하고 있습니다.

```html
<p>
  프로세스가 완료되면 유틸리티가
  <samp>Scan complete. Found <em>N</em> results.</samp> 를 출력합니다. 출력을
  확인한 후 다음 단계로 진행하세요.
</p>
```

결과는 다음과 같습니다.

### 사용자 입력을 포함한 출력 예시

`<samp>` 블록 안에 `<kbd>` 요소를 중첩해서 사용자가 입력하는 텍스트 예제를 나타낼 수 있습니다. 다음 예제 코드는 Linux 또는 macOS 콘솔 세션의 텍스트 복사본을 나타냅니다.

#### HTML

```html
<pre>
<samp><span class="prompt">mike@interwebz:~$</span> <kbd>md5 -s "Hello world"</kbd>
MD5 ("Hello world") = 3e25960a79dbc69b674cd4ec67a72c62

<span class="prompt">mike@interwebz:~$</span> <span class="cursor">█</span></samp></pre>
```

`<span>`을 사용해 셸 프롬프트, 콘솔 커서 등 예제 텍스트의 특정 부분에 다른 스타일을 적용했습니다. 또, `<kbd>`를 사용해 사용자가 입력한 텍스트를 나타내고 있습니다.

#### CSS

원하는 외형을 얻을 수 있는 CSS는 다음과 같습니다.

```css
.prompt {
  color: #b00;
}

samp > kbd {
  font-weight: bold;
}

.cursor {
  color: #00b;
}
```

프롬프트와 커서에 강렬하지 않은 색을 입히고, 예제 텍스트의 입력 부분을 굵게 하는 단순한 코드입니다.

#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-samp-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 관련 요소: `<kbd>`, `<code>`, `<pre>`
* 스크립트로 생성한 출력을 담는 `<output>` 요소


<style>: 스타일 정보 요소 - HTML: Hypertext Markup Language

<style>: 스타일 정보 요소
==================

**HTML `<style>` 요소**는 문서나 문서 일부에 대한 스타일 정보를 포함합니다.

시도해보기
-----

`<style>` 요소는 문서의 `<head>` 안에 위치해야 합니다. 그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, `<link>` 요소로 연결하는 편이 좋습니다.

문서가 다수의 `<style>`과 `<link>` 요소를 포함하면 서로의 순서대로 DOM에 스타일을 적용합니다. 따라서 예상치 못한 종속 문제를 피하려면 올바른 순서를 따라 `<style>` 및 `<link>` 요소를 배치해야 합니다.

`<link>` 요소와 동일하게, `<style>` 요소도 미디어 쿼리를 값으로 가지는 `media` 특성을 포함할 수 있습니다. 이를 통해 뷰포트 너비 등 매체 기능에 따라 선택적으로 스타일 시트를 적용할 수 있습니다.

특성
--

이 요소는 전역 특성을 포함합니다.

`type`

스타일 언어의 MIME 유형. 문자셋은 지정하지 않아야 합니다. 선택 사항이며, 기본값은 `text/css`입니다. 빈 문자열과 `text/css` 외의 값은 사용하지 않습니다.

**참고:** 현대적인 웹 문서에서 이 특성을 포함할 이유는 거의 존재하지 않습니다.

`media`

스타일을 적용할 매체. 값은 미디어 쿼리이며, 누락할 경우 기본값은 `all`입니다.

`nonce`

`style-src Content-Security-Policy` (en-US)에서 인라인 스타일을 화이트리스트에 추가할 때 사용하는 논스(임시 값). 서버는 매번 정책을 전송할 때마다 새로운 고유 논스를 생성해야 합니다. 논스 값을 알고 있는 공격자라면 리소스 정책을 우회하는 것은 매우 간단한 일이므로, 사전에 유추할 수 없는 값을 생성하는 것이 중요합니다.

`title`

대체 스타일 시트 세트를 지정합니다.

### 사용 중단된 특성

`scoped`
비표준

지원이 중단되었습니다

지정한 경우, `<style>` 요소의 부모 및 부모의 자식에만 스타일을 적용합니다.

**참고:** `scoped` 특성은 https://github.com/w3c/csswg-drafts/issues/3547에 따라 나중에 다시 추가될 수도 있습니다. 지금 사용하고 싶은 경우 폴리필을 추가하세요.

예제
--

### 간단한 스타일 시트

```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: red;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

### 다수의 `<style>` 요소

다음 예제는 두 개의 `<style>` 요소를 사용합니다. 같은 명시도를 가진 경우, 뒤쪽 `<style>`이 앞쪽을 덮어쓰는 것에 주목하세요.

```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style>
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

### 미디어 쿼리 포함

이번 예제에서는 앞선 코드의 두 번째 `<style>` 요소에 `media` 특성을 추가하고, 뷰포트의 너비가 500px 미만일 때에만 스타일을 적용하도록 지정합니다.

```html
<!doctype html>
<html>
  <head>
    <style>
 p {
 color: white;
 background-color: blue;
 padding: 5px;
 border: 1px solid black;
 }
 </style>
    <style media="all and (max-width: 500px)">
 p {
 color: blue;
 background-color: yellow;
 }
 </style>
  </head>
  <body>
    <p>This is my paragraph.</p>
  </body>
</html>
```

기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 메타데이터 콘텐츠. `scoped` 특성이 존재하면
 플로우 콘텐츠.
  |
| 가능한 콘텐츠 | `type` 특성에 맞는 텍스트, 즉 `text/css`. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 메타데이터 콘텐츠를 허용하는 모든 요소 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLStyleElement` (en-US) |

명세
--

| Specification |
| --- |
| HTML Standard # the-style-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 외부 스타일 시트를 사용하기 위한 `<link>` 요소.


<script>: 스크립트 요소 - HTML: Hypertext Markup Language

<script>: 스크립트 요소
=================

**HTML `<script>` 요소**는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다. WebGL의 GLSL 셰이더 프로그래밍 언어, JSON 등 다른 언어와도 사용할 수 있습니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 메타데이터 콘텐츠,
 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | `text/javascript`와 같은 동적 스크립트. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 메타데이터 콘텐츠
 또는
 구문 콘텐츠를 허용한 아무 요소.
  |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLScriptElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`async`

일반 스크립트에 `async` 속성이 존재하면 HTML 구문 분석 중에도 스크립트를 가져오며, 사용 가능해지는 즉시 평가를 수행합니다.

모듈 스크립트에 `async` 속성이 존재하면 모듈 스크립트와 모든 의존 스크립트를 지연 큐에서 실행하므로 함께 병렬로 불러오며, 이와 동시에 구문 분석을 수행하고 사용 가능해지는 즉시 평가합니다.

기존 방식은 브라우저가 HTML 분석을 계속하기 전에 스크립트를 불러오고 평가했어야 하므로, `async` 속성을 사용하면 **분석기를 멈추는 JavaScript**를 제거할 수 있습니다. `defer`도 비슷한 효력을 냅니다.

`async`는 불리언 속성입니다. 속성이 존재하면 참을 나타내고, 속성이 존재하지 않으면 거짓을 나타냅니다.

브라우저 호환성을 참고하세요.

`crossorigin`

일반 `script` 요소는 표준 CORS를 통과하지 못했을 때 `window.onerror` (en-US)에 최소한의 정보만 넘깁니다. `crossorigin` 속성은 정적 미디어에 대해 별도의 도메인을 사용하는 사이트의 오류 기록을 허용하기 위해 사용할 수 있습니다. 유효한 인수에 대한 보다 자세한 설명은 CORS 설정 속성 문서를 참고하세요.

`defer`

브라우저가 스크립트를 문서 분석 이후에, 그러나 `DOMContentLoaded` 발생 이전에 실행해야 함을 나타내는 불리언 속성입니다.

`defer` 속성을 가진 스크립트는 자신의 평가가 끝나기 전까지 `DOMContentLoaded` 이벤트의 발생을 막습니다.

**경고:** `src` 속성이 존재하지 않을 때(인라인 스크립트인 경우 등)에는 아무런 효과도 없으므로 사용해서는 안됩니다.

또한 모듈 스크립트는 기본적으로 지연 평가하므로, `defer`를 지정해도 변화가 없습니다.

`defer` 속성을 가진 스크립트는 문서상의 순서를 따라 실행됩니다.

기존 방식은 브라우저가 HTML 분석을 계속하기 전에 스크립트를 불러오고 평가했어야 하므로, `defer` 속성을 사용하면 **분석기를 멈추는 JavaScript**를 제거할 수 있습니다. `async`도 비슷한 효과를 가집니다.

`integrity`

사용자 에이전트가 가져온 리소스에 예기치 못한 변형이 존재하는지 검사할 때 사용할 인라인 메타데이터입니다. 하위 리소스 무결성 문서를 참고하세요.

`nomodule`

ES2015 모듈을 지원하는 브라우저에서는 실행하지 않을 스크립트임을 나타내는 불리언 특성입니다. 모듈화 JavaScript를 지원하지 않는 오래된 브라우저가 사용할 대체 스크립트에 사용할 수 있습니다.

`nonce`

`script-src` `Content-Security-Policy`의 화이트리스트에 스크립트를 등록하기 위한, 암호화된 일회용 숫자(논스, nonce)입니다. 서버는 고유한 일회용 숫자값을 정책을 전송할 때마다 생성해야 합니다. 자원의 정책을 우회할 수 없도록, 추측할 수 없는 임시값을 제공하는 것이 중요합니다.

`referrerpolicy`

스크립트를 가져올 때, 또는 스크립트가 다른 리소스를 가져올 때 전송할 리퍼러를 나타냅니다.

* `no-referrer`: `Referer` 헤더를 전송하지 않습니다.
* `no-referrer-when-downgrade` (기본값): TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 `Referer` 헤더를 전송하지 않습니다.
* `origin`: `Referer` 헤더가 요청 출처(스킴, 호스트, 포트)를 포함합니다.
* `origin-when-cross-origin`: 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.
* `same-origin`: 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.
* `strict-origin`: 목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.
* `strict-origin-when-cross-origin`: 동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.
* `unsafe-url`: 동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다. TLS로 보호하는 리소스에서 안전하지 않은 출처에 경로까지 노출하므로 **안전하지 않습니다**.

**참고:** 빈 문자열 값(`""`)은 기본값이자 `referrerpolicy` 특성을 지원하지 않는 경우 사용하는 대체값입니다. `referrerpolicy`를 `<script>` 요소에 명시하지 않은 경우 더 상위 단계의 정책, 즉 문서 자체나 도메인의 정책을 따라갑니다. 상위 단계 정책도 사용할 수 없을 땐 빈 문자열을 `no-referrer-when-downgrade`로 간주합니다.

`src`

외부 스크립트를 가리키는 URI입니다. 문서 내에 스크립트를 직접 삽입하는 것 대신 사용할 수 있습니다.

`type`

스크립트의 유형을 나타냅니다. 다음 다섯개의 범주 중 하나에 속할 수 있습니다.

* **생략 또는 JavaScript MIME 유형:** 스크립트가 JavaScript임을 나타냅니다. 이 경우, HTML5 명세는 웹 작성자가 불필요한 `type`을 포함하지 않고 완전히 제외할 것을 촉구합니다. 보다 오래된 브라우저에서는 `type` 특성의 값으로 삽입 혹은 (`src` 특성으로) 불러온 스크립트의 언어를 표시하곤 했습니다. JavaScript MIME 유형은 명세에 나열되어 있습니다.
* **`module`:** 스크립트를 JavaScript 모듈로 간주합니다. 스크립트 콘텐츠 처리가 `charset`과 `defer` 특성의 영향을 받지 않습니다. `module`의 더 자세한 사용법은 MDN의 JavaScript 모듈 안내서를 참고하세요. 기존 스크립트와 달리, 모듈 스크립트는 교차 출처 가져오기 시 CORS 프로토콜을 사용해야 합니다.
* **다른 모든 값:** 내장 콘텐츠를 브라우저가 처리하지 않을 데이터 블록으로 간주합니다. 개발자는 반드시 유효하면서 JavaScript가 아닌 MIME 유형을 지정해야 합니다. `src` 특성을 무시합니다.

### Deprecated attributes

`charset`
지원이 중단되었습니다

If present, its value must be an ASCII case-insensitive match for "`utf-8`". It's unnecessary to specify the `charset` attribute, because documents must use UTF-8, and the `script` element inherits its character encoding from the document.

`language`
지원이 중단되었습니다

Like the `type` attribute, this attribute identifies the scripting language in use. Unlike the `type` attribute, however, this attribute's possible values were never standardized. The `type` attribute should be used instead.

참고
--

브라우저가 구문 분석을 진행하다 인라인 스크립트 또는 `async`, `defer`, `type="module"` 특성이 없는 스크립트에 도달하면 스크립트를 가져온 후 실행하기 전까지 분석을 중단합니다.

스크립트는 `text/javascript` MIME 유형을 설정해야 하나, 브라우저는 관대한 규칙을 적용하여 이미지 형태(`image/*`), 비디오 형태(`video/*`), 오디오 형태(`audio/*`), `text/csv` 형태로 스크립트를 불러오려는 경우만 차단하고 나머지는 허용합니다. 스크립트를 차단한 경우 `load` 대신 `error (en-US)` 이벤트를 요소에 전송합니다.

예제
--

### 기본

다음 예제는 `<script>` 요소를 사용해 외부 스크립트를 가져오는 법을 보입니다.

```html
<script src="javascript.js"></script>
```

그리고 아래 코드는 `<script>` 요소 내부에 인라인 스크립트를 작성하는 예시입니다.

```html
<script>
 alert("Hello World!");
</script>
```

### 모듈 대체 스크립트

`type` 특성이 `module`을 지원하는 브라우저는 `nomodule` 특성을 가진 모든 `<script>`를 무시합니다. 그러므로 모듈 스크립트를 사용하면서도, 미지원 브라우저를 위한 대체 스크립트를 `nomodule`로 표시해 제공할 수 있습니다.

```js
<script type="module" src="main.mjs"></script>
<script nomodule src="fallback.js"></script>
```

### HTML에 데이터 삽입하기

<script> 요소와 JavaScript 외의 유효한 MIME 유형을 사용하면 서버사이드 렌더링을 통해 HTML에 데이터를 삽입할 수 있습니다.

```html
<!-- Generated by the server -->
<script id="data" type="application/json">
 {
 "userId": 1234,
 "userName": "John Doe",
 "memberSince": "2000-01-01T00:00:00.000Z"
 }
</script>

<!-- Static -->
<script>
 const userInfo = JSON.parse(document.getElementById("data").text);
 console.log("User information: %o", userInfo);
</script>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-script-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `document.currentScript` (en-US)
* Ryan Grove의 `<script>`와 `<link>` 노드 이벤트 호환성 차트


<blockquote>: 인용 블록 요소 - HTML: Hypertext Markup Language

<blockquote>: 인용 블록 요소
======================

**HTML `<blockquote>` 요소**는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다. (외형을 바꾸는 법은 사용 일람을 참고하세요) 인용문의 출처 URL은 `cite` 특성으로, 출처 텍스트는 `<cite>` 요소로 제공할 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소 |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLQuoteElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`cite`

인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보를 가리킬 용도입니다.

사용 일람
-----

인용문의 들여쓰기를 바꾸려면 CSS `margin-left`와 `margin-right`, 혹은 `margin` 단축 속성을 사용하세요.

별도의 블록을 쓰지 않아도 될 짧은 인용문은 `<q>` 요소를 사용하세요.

예제
--

다음 예제는 `<blockquote>` 요소를 사용해 RFC 1149 A Standard for the Transmission of IP Datagrams on Avian Carriers의 문단을 인용합니다.

```html
<blockquote cite="https://tools.ietf.org/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside of early spring.
    This is because of the 3D ether space available to the carriers, in contrast
    to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-blockquote-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 인라인 인용문을 위한 `<q>` 요소.
* 인용문 출처 표기를 위한 `<cite>` 요소.


<ins> - HTML: Hypertext Markup Language

<ins>
=====

**HTML `<ins>` 요소**는 문서에 추가된 텍스트의 범위를 나타냅니다. `<del>` 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 투명. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLModElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`cite`

회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 URI.

`datetime`

변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 HTML에서 사용하는 날짜와 시간 형식 (en-US) 문서에서 확인할 수 있습니다.

예제
--

```html
<ins>This text has been inserted</ins>
```

### 결과

접근성 고려사항
--------

대부분의 스크린 리더는 기본값에서 `<ins>` 요소의 존재를 표현하지 않습니다. 그러나 CSS `content` 속성과 `::before` (en-US), `::after` 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.

```css
ins::before,
ins::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

ins::before {
  content: " [추가 부분 시작] ";
}

ins::after {
  content: " [추가 부분 끝] ";
}
```

스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삽입 여부가 꼭 필요할 때만 사용해야 합니다.

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
명세
--

| Specification |
| --- |
| HTML Standard # the-ins-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 문서에서 삭제된 부분을 나타내는 `<del>` 요소.


<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language

<video>: 비디오 삽입 요소
==================

**HTML `<video>` 요소**는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, `<audio>` (en-US) 요소가 사용자 경험에 좀 더 적합합니다.

시도해보기
-----

위 예제는 `<video>` 요소의 간단한 사용법을 보입니다. `<video>` 또한 `<img>` 요소와 비슷하게, 표시하고자 하는 미디어로의 경로를 `src` 특성에 제공합니다. 또한 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 특성을 통해 지정할 수 있습니다.

`<video></video>` 태그 안의 콘텐츠는 브라우저가 `<video>` 요소를 지원하지 않을 때 보여집니다.

특성
--

이 요소는 전역 특성을 포함합니다.

`autoplay`

 부울 속성(boolean); 해당 속성이 지정된 경우 비디오가 데이터 로드를 완료하기 위해 중지하지 않고 재생할 수 있는 가장 빠른 시점에 재생되기 시작합니다.
 autoplay를 비활성화시킬 때 autoplay="false"는 동작하지 않습니다. `<video>`태그 내부에 autoplay 속성이 존재한다면 비디오가 자동재생 됩니다. autoplay를 비활성화하려면 해당 속성을 완전히 제거해야 합니다.

`buffered`

미디어의 어느 시간대가 버퍼에 들어 있는지 확인할 수 있는 속성입니다. 이 속성은 `TimeRanges` (en-US) 객체를 포함합니다.

`controls`

이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다.

`crossorigin`

crossorigin 속성은 CORS를 사용해서 관련 이미지를 패치해야 하는지 여부를 나타냅니다. CORS-enabled resources (en-US) 는 `<canvas>` 요소에서 재사용 될 수 있으며 오염되지 않습니다. 허용되는 값은 다음과 같습니다:

anonymous

CORS(`Origin:` HTTP 헤더 사용)를 수행 합니다. 하지만 credential가 전송되지 않습니다. (즉, cookie, X.509 certificate, HTTP 기본 인증이 전송되지 않습니다). 서버가 원본 사이트에 credentials를 제공하지 않는 경우 (즉, `Access-Control-Allow-Origin:` HTTP 헤더를 설정하지 않음으로써), 이미지가 오염되고 사용이 제한됩니다.

use-credentials

credential을 포함한 CORS를 (`Origin:` HTTP 헤더 사용) 수행 합니다. (즉, cookie, certificate, HTTP 기본 인증이 수행됩니다.) 서버가 원본 사이트에 credentials를 제공하지 않는 경우 (즉, `Access-Control-Allow-Origin:` HTTP 헤더를 설정하지 않음으로써), 이미지가 오염되고 사용이 제한됩니다.

crossorigin이 존재하지 않는 경우, CORS 요청 없이 (즉, `Origin:` HTTP 헤더를 사용 보내지 않고), 리소스를 가져와 `<canvas>` 요소에 오염되는 것을 방지합니다. 값을 설정하지 않을 경우 **anonymous**가 사용 됩니다. 추가 정보는 CORS settings attributes (en-US) 를 참조하십시오.

`height`

비디오의 출력 영역 높이이며, CSS 픽셀 단위 입니다.

`loop`

부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.

`muted`

비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.

`played`

재생된 동영상 영역을 나타내는 `TimeRanges` (en-US) 객체 입니다.

`preload`

이 속성은 저작자가 생각하는 가장 좋은 사용자 경험이 어떠한 것인지 브라우저에 미리 정보를 알려주는 용도록 사용됩니다. 다음 값들 중 하나를 가질 수 있습니다:

* none: 저작자가 생각하기에 사용자가 비디오를 보지 않거나 서버가 최소한의 트래픽을 유지하고자 함을 의미합니다. 다시 말해서 비디오가 캐시되지 않아야 함을 의미합니다.
* metadata: 저작자가 생각하기에 사용자가 비디오를 보지 않을 수도 있지만 메타데이터(예를 들어서 길이)를 미리 가져오는 것은 합리적임을 의미합니다.
* auto: 사용자가 우선순위를 가지고 있음을 의미합니다. 다시 말해서 사용자가 이를 사용하지 않을 지라도 필요하다면 전체 비디오가 다운로드 될 수 있음을 의미합니다.
* *빈 문자열*: auto 와 동일합니다.

스펙에서는 기본값으로 metadata를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다.

**참고:** **사용 정보:**- 비디오를 자동으로 재생하려 한다면 브라우저가 이를 다운로드 해야 하기 때문에 `autoplay`이 이 속성보다 우선시 됩니다. `autoplay` 속성과 `preload` 속성을 둘 다 설정하는 것은 스펙상 가능합니다.

* 브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.

`poster`

사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.

`src`

삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 `<source>` (en-US) 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.

`width`

비디오의 출력 영역 너비이며, CSS 픽셀 단위입니다.

이벤트
---

`<video>` 요소는 많은 이벤트 (en-US)를 발생시킬 수 있습니다.

예제
--

```html
<!-- Simple video example -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="videofile.ogg">download it</a>
  and watch it with your favorite video player!
</video>

<!-- Video with subtitles -->
<video src="foo.ogg">
  <track kind="subtitles" src="foo.en.vtt" srclang="en" label="English" />
  <track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska" />
</video>
```

첫번째 예제는 동영상을 더 다운받기 위해서 멈추지 않아도 될 정도로 영상이 다운로드 되면 바로 영상이 재생됩니다. 동영상이 재생되기 전까지 "posterimage.jpg" 이미지가 표현됩니다.

두번째 예제에서는 사용자가 서로다른 자막을 선택할 수 있습니다.

서버 지원
-----

동영상 MIME 타입이 올바르게 설정되어 있지 않다면 동영상이 보이지 않거나 X표시가 된 회색 박스가 나오게 됩니다(JavaScript가 활성화 된 경우).

Ogg Theora 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".ogm", ".ogv", ".ogg"를 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/ogg" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.
```

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
```

WebM 동영상을 사용할 경우 아파치 웹 서버에 동영상에서 사용하는 확장자(보통 ".webm"을 사용합니다)를 "/etc/apache"에 있는 "mime.types" 파일에 "video/webm" MIME 타입을 추가하거나 httpd.conf에 "AddType" 디렉티브를 이용해서 추가하면 해결됩니다.
```

AddType video/webm .webm
```

여러분의 웹 호스트에서 새로운 기술이 범용적으로 적용되어 업데이트 되기 전까지 편하게 MIME 타입을 설정하는 인터페이스를 제공할지도 모릅니다.

DOM 인터페이스
---------

이 요소는 `HTMLVideoElement` 인터페이스를 구현하고 있습니다.

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

참고
--

* Media formats supported by the audio and video elements (en-US)
* `<audio>` (en-US)
* Using HTML5 audio and video (en-US)
* Manipulating video using canvas (en-US)
* `nsIDOMHTMLMediaElement`
* TinyVid - examples using ogg files in HTML5.
* The `video` element (HTML5 specification)
* Configuring servers for Ogg media (en-US)


<time> - HTML: Hypertext Markup Language

<time>
======

**HTML `<time>` 요소**는 시간의 특정 지점 또는 구간을 나타냅니다. `datetime` 특성의 값을 지정해 보다 적절한 검색 결과나, 알림 같은 특정 기능을 구현할 때 사용할 수 있습니다.

`<time>` 요소가 나타낼 수 있는 시간은 다음과 같습니다.

* 24시간 표기법 시계의 시간.
* 정확한 그레고리력 날짜. (시간대 정보 포함 가능)
* 유효한 시간 범위.
시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLTimeElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`datetime`

요소의 시간 또는 날짜 값. 아래에서 설명하는 형식 중 하나여야 합니다.

사용 일람
-----

`<time>` 요소는 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용합니다. 예를 들어, 일정의 경우 사용자 에이전트가 자동으로 달력에 일정을 추가할 수 있도록 정확한 일시를 나타낼 수 있습니다.

복잡한 계산상 문제로 인해, 그레고리력의 도입 이전 시간을 나타낼 때 사용해서는 안됩니다.

기계가 읽을 날짜와 시간 값은 `datetime` 특성의 값으로, 아래의 적절한 형식 중 하나여야 합니다. `datetime` 특성이 없는 경우 **어떠한 자식 요소도 두어서는 안되며**, 요소의 텍스트 콘텐츠를 `datetime` 특성 값으로 간주합니다.

### 유효한 `datetime` 값

유효한 연도 문자열
`2011`
유효한 연-월 문자열
`2011-11`
유효한 연-월-일 문자열
`2011-11-18`
유효한 월-일 문자열
`11-18`
유효한 주차 문자열
`2011-W47`
유효한 시간 문자열
`14:54`
`14:54:39`
`14:54:39.929`
유효한 현지 날짜 및 시간 문자열
`2011-11-18T14:54:39.929`
`2011-11-18 14:54:39.929`
유효한 국제 날짜 및 시간 문자열
`2011-11-18T14:54:39.929Z`
`2011-11-18T14:54:39.929-0400`
`2011-11-18T14:54:39.929-04:00`
`2011-11-18 14:54:39.929Z`
`2011-11-18 14:54:39.929-0400`
`2011-11-18 14:54:39.929-04:00`
유효한 기간 문자열
`PT4H18M3S`
예제
--

### 간단한 예제

#### HTML

```html
<p>The concert starts at <time>20:00</time>.</p>
```

#### 결과

### `datetime` 예제

#### HTML

```html
<p>
  The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.
</p>
```

#### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-time-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 날짜와 시간 외 다른 종류의 값을 나타낼 수 있는 `<data>` 요소.


<br>: 줄바꿈 요소 - HTML: Hypertext Markup Language

<br>: 줄바꿈 요소
============

**HTML `<br>` 요소**는 텍스트 안에 줄바꿈(캐리지 리턴)을 생성합니다. 주소나 시조 등 줄의 구분이 중요한 내용을 작성할 때 유용합니다.

시도해보기
-----

위 예제에서 확인할 수 있듯, `<br>` 요소는 텍스트를 끊고 싶은 지점에 삽입해야 합니다. `<br>` 이후의 텍스트는 텍스트 블록의 다음 줄에서 다시 시작합니다.

**참고:** 문단 사이에 여백을 두기 위한 용도로 `<br>`을 사용하지 마세요. 대신 `<p>` 요소로 감싼 후 CSS의 `margin` 속성으로 여백의 크기를 조절하세요.

특성
--

이 요소는 전역 특성 (en-US)만 포함합니다.

CSS 스타일링
--------

`<br>` 요소는 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다. 따라서 크기도, 외형도 없으므로 스타일을 적용할 것도 거의 없습니다.

`<br>` 요소에 `margin`을 적용하면 줄 간격을 늘릴 수 있겠지만 좋은 방법은 아닙니다. 이런 목적을 위해 만들어진 CSS `line-height` (en-US) 속성을 사용하세요.

예제
--

```html
Mozilla Foundation<br />
1981 Landings Drive<br />
Building K<br />
Mountain View, CA 94043-0801<br />
USA
```

결과는 다음과 같습니다.

접근성 고려사항
--------

문단 구분을 `<br>`로 하는건 나쁜 사례일 뿐만 아니라 스크린 리더를 사용해 탐색하는 사용자에게도 문제가 됩니다. 스크린 리더가 요소의 존재는 알려주겠지만, `<br>`에는 아무런 내용도 없기 때문입니다. 따라서 사용자는 내용이 어딨는지 몰라 혼란을 느낄 수 있습니다.

`<p>` 요소와 함께 CSS `margin` 속성 등을 조합해 간격을 조절하세요.

기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLBRElement` |

명세
--

| Specification |
| --- |
| HTML Standard # the-br-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<address>` 요소
* `<p>` 요소


<wbr> - HTML: Hypertext Markup Language

<wbr>
=====

**HTML `<wbr>` 요소**는 현재 요소의 줄 바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

참고
--

UTF-8 인코딩을 사용한 페이지의 `<wbr>` 은 `U+200B ZERO-WIDTH SPACE` 코드 포인트처럼 동작합니다. 특히, Unicode bidi BN 코드 포인트처럼 행동하므로 bidi 정렬의 영향을 받지 않습니다. 즉 `<div dir=rtl>123,<wbr>456</div>`의 줄이 바뀌지 않은 경우, `456,123`이 아니라 `123,456`으로 나타납니다.

같은 이유로 인해 `< wbr >` 요소로 인한 줄바꿈으로는 붙임표가 나타나지 않습니다. 줄의 끝에 하이픈이 필요한 경우 소프트 하이픈 문자 개체(soft hyphen character entity, `& shy;`)를 사용하세요.

`<wbr>`은 Internet Explorer 5.5에서 처음 구현됐고, HTML5가 정식으로 정의했습니다.

예제
--

URL의 줄을 바꿀 때, 문장 부호 다음에 잘린 경우 독자가 URL이 끝난 것으로 혼동할 수 있으므로, \*The Yahoo Style Guide\*는 URL의 줄바꿈을 문장 부호 이전에 하라고 추천합니다.

```html
<p>
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages<wbr />/deeper<wbr />/level<wbr />/pages
</p>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-wbr-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `overflow-wrap`
* `word-break`
* `hyphens`
* `<br>` 요소


<area> - HTML: Hypertext Markup Language

<area>
======

**HTML `<area>` 요소**는 이미지의 핫스팟 영역을 정의하고 하이퍼링크를 추가할 수 있습니다. `<map>` 요소 안에서만 사용할 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 존재해야 하며 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. 단, 조상 중 `<map>` 요소가
 존재해야 합니다.
  |
| 암시적 ARIA 역할 | `href` 특성이 존재하면
 `link` (en-US), 그 외의 경우
 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLAreaElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

* `alt`
    + : 이미지를 출력하지 않는 브라우저에서 대신 표시할 대안 텍스트입니다. 텍스트의 내용은 대안 텍스트 없이 이미지만 표시할 때와 동일한 수준의 선택지를 나타낼 수 있어야 합니다. `href` 특성이 존재할 경우 필수 사항입니다.
* `coords`
    + : 핫스팟 영역을 지정하는 일련의 좌표입니다. 값의 수와 의미는 `shape` 특성의 값에 따라 달라집니다.
        - `rect`: 좌상단과 우하단을 나타내는 두 개의 x, y 쌍입니다.
        - `circle`: `x,y,r`로서 `x,y`는 원의 중심 좌표이며 `r`은 반지름입니다.
        - `poly`: 다각형의 꼭지점을 나타내는 다수의 x, y 쌍(`x1,y1,x2,y2,x3,y3,...`)입니다.값의 단위는 CSS 픽셀입니다.
* `download`

특성이 존재할 경우, 이 하이퍼링크는 리소스 다운로드 용도로 사용하는 것을 의도했음을 나타냅니다. `<a>`의 `download` 특성 설명에서 전체 설명을 볼 수 있습니다.

`href`

`<area>` 하이퍼링크의 대상입니다. 유효한 URL이야 합니다. 생략할 경우, 이 `<area>` 요소는 하이퍼링크를 나타내지 않습니다.

`hreflang`

연결한 리소스의 언어를 나타냅니다. 가능한 값은 BCP47에 따릅니다. `href` 특성이 존재할 때만 사용하세요.

`ping`

하이퍼링크를 따라갈 때, 백그라운드에서 브라우저가 `POST` 요청을 본문 `PING`으로 전송할 URL의 목록입니다. 공백으로 구분하며 주로 추적용으로 사용합니다.

`referrerpolicy`
Experimental

A string indicating which referrer to use when fetching the resource:

* `"no-referrer"` meaning that the `Referer:` header will not be sent.
* "`no-referrer-when-downgrade`" meaning that no `Referer:` header will be sent when navigating to an origin without TLS (HTTPS). This is a user agent's default behavior, if no policy is otherwise specified.
* `"origin"` meaning that the referrer will be the origin of the page, that is roughly the scheme, the host and the port.
* "origin-when-cross-origin" meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.
* `"unsafe-url"` meaning that the referrer will include the origin and the path (but not the fragment, password, or username). This case is unsafe because it can leak origins and paths from TLS-protected resources to insecure origins.

`rel`

For anchors containing the **href** attribute, this attribute specifies the relationship of the target object to the link object. The value is a comma-separated list of link types values. The values and their semantics will be registered by some authority that might have meaning to the document author. The default relationship, if no other is given, is void. Use this attribute only if the **href** attribute is present.

`shape`

관련된 핫 스폿의 모양. The specifications for HTML 5 and HTML 4 define the values `rect`, which defines a rectangular region; `circle`, which defines a circular region; `poly`, which defines a polygon; and `default`, which indicates the entire region beyond any defined shapes. Many browsers, notably Internet Explorer 4 and higher, support `circ`, `polygon`, and `rectangle` as valid values for **shape**; these values are
비표준
.

`target`

이 속성은 링크된 리소스가 어디에 표시될지 지정합니다. HTML4에서 이것은 프레임의 이름이나 키워드가 될수 있습니다. HTML5에서는, 브라우징 컨텍스트(탭,윈도우,인라인 프레임)의 이름이나 키워드가 될수 있습니다. 다음 키워드들은 특별한 의미를 가지고 있습니다.

* `_self`: 결과를 현재 HTML4 프레임 또는 HTML5 브라우징 컨텍스트에 로드합니다. 이 target 속성이 정의되어있지 않은경우 이 값이 기본값이 됩니다.
* `_blank`: 결과를 이름없는 새로운 HTML4 윈도우나 HTML5 브라우징 컨텍스트에 로드합니다.
* `_parent`: 결과를 현재 HTML4 프레임의 부모 프레임셋에 로드하거나 부모 HTML5 브라우징 컨텍스트에 로드합니다. 만약 부모가 없을 경우 \_self와 동일하게 여겨집니다.
* `_top`: HTML4에서는, 다른 모든 프레임을 취소하고 결과를 꽉찬 본래의 윈도우에 로드합니다. HTML5에서는, 결과를 최상위 브라우징 컨텍스트에 로드합니다. 만약 부모가 없다면, 이 옵션은 \_self와 같이 행동합니다.

이 속성은 **href** 속성이 존재할떄만 사용합니다.

### Deprecated attributes

* `name`
지원이 중단되었습니다

Define a names for the clickable area so that it can be scripted by older browsers.

* `nohref`
지원이 중단되었습니다

Indicates that no hyperlink exists for the associated area.

>
> **Note:** Since HTML5, omitting the `href` attribute is sufficient.
>
>
>

* `tabindex`
지원이 중단되었습니다

A numeric value specifying the position of the defined area in the browser tabbing order. This attribute is global in HTML5.

* `type`
지원이 중단되었습니다

No effect. Browsers ignore it. (The W3C 5.3 fork of the HTML specification defines it as valid, but the canonical HTML specification doesn't, and it has no effect in any user agents.)

예제
--

```html
<map name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" nohref />
</map>
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic" />
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-area-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<optgroup> - HTML: Hypertext Markup Language

<optgroup>
==========

**HTML `<optgroup>` 요소**는 `<select>` (en-US) 요소의 옵션을 묶을 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 0개 이상의 `<option>` 요소. |
| 태그 생략 |
 여는 태그는 필수입니다. 바로 뒤따르는 요소가 다른
 `<optgroup>`이거나, 자신이 부모의 마지막 자식이라면 닫는
 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<select>` (en-US) 요소. |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLOptGroupElement` (en-US) |

**참고:** `<optgroup>` 요소는 중첩할 수 없습니다.

특성
--

이 요소는 전역 특성을 포함합니다.

`disabled`

지정한 경우 모든 하위 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다.

`label`

옵션 그룹의 이름. 브라우저가 그룹의 이름을 표시할 때 사용할 수 있습니다. 필수로 지정해야 합니다.

예제
--

```html
<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-optgroup-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<h1>–<h6>: HTML 구획 제목 요소 - HTML: Hypertext Markup Language

<h1>–<h6>: HTML 구획 제목 요소
========================

**HTML `<h1>`–`<h6>` 요소**는 6단계의 구획 제목을 나타냅니다. 구획 단계는 `<h1>`이 가장 높고 `<h6>`은 가장 낮습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 제목 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. `<hgroup>` 요소의 자식으로
 사용하지 마세요. 더 이상 쓰이지 않는 요소입니다.
  |
| 가능한 ARIA 역할 | `tab` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLHeadingElement` (en-US) |

특성
--

`<h1>`-`<h6>` 요소는 전역 특성만 포함합니다.

사용 일람
-----

* 사용자 에이전트가 제목의 정보를 사용해 자동으로 문서 콘텐츠의 표를 만드는 등의 작업을 수행할 수 있습니다.
* 글씨 크기를 위해 제목 태그를 사용하지 마세요. 대신 CSS의 `font-size` 속성을 사용하세요.
* 제목 단계를 건너뛰는 것을 피하세요. 언제나 `<h1>`로 시작해서, `<h2>`, 순차적으로 기입하세요.
* 페이지 당 하나의 `<h1>`만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 `<h1>`이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, `<h1>`은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 SEO에도 더 적합합니다.
예제
--

### 모든 제목 단계

다음 코드는 모든 단계의 제목을 보입니다.

```html
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
```

### 예제 페이지

다음 코드는 약간의 제목과 내용을 보여줍니다.

```html
<h1>Heading elements</h1>
<h2>Summary</h2>
<p>Some text here...</p>

<h2>Examples</h2>
<h3>Example 1</h3>
<p>Some text here...</p>

<h3>Example 2</h3>
<p>Some text here...</p>

<h2>See also</h2>
<p>Some text here...</p>
```

접근성 고려사항
--------

### 탐색

스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어넘으며 페이지 콘텐츠를 빠르게 파악하는 것입니다. 따라서 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다.

#### 하지 말것

```html
<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
```

#### 할것

```html
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
```

#### 중첩

하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있습니다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 도와줍니다.

1. `h1` Beetles
    1. `h2` Etymology
    2. `h2` Distribution and Diversity
    3. `h2` Evolution
        1. `h3` Late Paleozoic
        2. `h3` Jurassic
        3. `h3` Cretaceous
        4. `h3` Cenozoic
    4. `h2` External Morphology
        1. `h3` Head
            1. `h4` Mouthparts
        2. `h3` Thorax
            1. `h4` Prothorax
            2. `h4` Pterothorax
        3. `h3` Legs
        4. `h3` Wings
        5. `h3` Abdomen

중첩 제목에서, 하위 구획을 닫을 땐 제목 단계를 위로 "건너뛸" 수 있습니다.

* Headings • Page Structure • WAI Web Accessibility Tutorials
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
* MDN Understanding WCAG, Guideline 2.4 explanations (en-US)
* Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
* Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0
### 구획 콘텐츠 레이블

스크린 리더 사용자가 자주 사용하는 다른 기술은 콘텐츠 구획의 목록을 생성한 후, 이를 통해 페이지 레이아웃을 파악하는 것입니다.

콘텐츠 구획에는 `aria-labelledby`와 `id` 특성을 함께 사용해 이름, 즉 레이블을 붙일 수 있습니다. 레이블은 현재 구획의 목적을 간결하게 설명해야 합니다. 레이블 기법은 한 페이지에 다수의 구획이 있을 때 유용하게 사용할 수 있습니다.

#### 예제

```html
<header>
  <nav aria-labelledby="primary-navigation">
    <h2 id="primary-navigation">주 탐색창</h2>
    <!-- navigation items -->
  </nav>
</header>

<!-- page content -->

<footer>
  <nav aria-labelledby="footer-navigation">
    <h2 id="footer-navigation">하단 탐색창</h2>
    <!-- navigation items -->
  </nav>
</footer>
```

위의 예제에서 스크린 리더는 두 개의 `<nav>` 구획이 있으며, 하나는 "주 탐색창", 다른 하나는 "하단 탐색창"이라고 불린다는 사실을 표현합니다. 레이블을 지정하지 않았다면, 사용자가 각 `<nav>` 요소의 콘텐츠를 일일히 분석해 목적을 알아내야 했을 것입니다.

* Using the aria-labelledby attribute
* Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials
명세
--

| Specification |
| --- |
| HTML Standard # the-h1,-h2,-h3,-h4,-h5,-and-h6-elements |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<p>`
* `<div>` (en-US)
* `<section>`


<del> - HTML: Hypertext Markup Language

<del>
=====

**HTML `<del>` 요소**는 문서에서 제거된 텍스트의 범위를 나타냅니다. 문서나 소스 코드의 변경점 추적 등에 사용할 수 있습니다. `<ins>` 요소를 추가된 텍스트의 범위를 나타낼 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 투명. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLModElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`cite`

회의록, 이슈 추적 시스템의 티켓 번호 등 변경점을 설명하는 리소스의 URI.

`datetime`

변경이 발생한 일시. 유효한 날짜 문자열이어야 하며, 시간을 지정할 경우 역시 유효해야 합니다. 유효하지 않은 값을 지정할 경우 일시를 지정하지 않은 것과 같습니다. 유효한 문자열의 종류는 HTML에서 사용하는 날짜와 시간 형식 (en-US) 문서에서 확인할 수 있습니다.

예제
--

```html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>
```

### 결과

접근성 고려사항
--------

대부분의 스크린 리더는 기본값에서 `<del>` 요소의 존재를 표현하지 않습니다. 그러나 CSS `content` 속성과 `::before` (en-US), `::after` 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.

```css
del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [제거 부분 시작] ";
}

del::after {
  content: " [제거 부분 끝] ";
}
```

스크린 리더 사용자 일부는 지나치게 자세한 안내를 유발할 수 있는 콘텐츠의 표현을 의도적으로 꺼놓습니다. 그러므로 이 방식을 남용해선 안되며, 콘텐츠의 이해에 삭제 여부가 꼭 필요할 때만 사용해야 합니다.

* Short note on making your mark (more accessible) | The Paciello Group
* Tweaking Text Level Styles | Adrian Roselli
명세
--

| Specification |
| --- |
| HTML Standard # the-del-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* 텍스트의 삽입을 위한 `<ins>` 요소
* 삭제 여부와 관계 없이 취소선을 위한 `<s>` 요소


<meter> - HTML: Hypertext Markup Language

<meter>
=======

**HTML `<meter>` 요소**는 특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠,
 레이블 가능, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. 단, 다른 `<meter>` 요소는 사용할 수 없습니다. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLMeterElement` (en-US) |

특성
--

이 요소는 전역 특성을 포함합니다.

`value`

현재의 값. 최소와 최댓값(`min`과 `max` 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 `0`으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다.

**참고:**`value`가 `0` 이상 `1` 이하가 아닌 이상, `min`과 `max`를 정의해 `value` 값이 그 안에 들어가도록 해야 합니다.

`min`

측정 범위의 가능한 최솟값. 지정할 경우 최댓값(`max` 특성) 미만이어야 합니다. 지정하지 않은 경우 `0`입니다.

`max`

측정 범위의 가능한 최댓값. 지정할 경우 최솟값(`min` 특성)을 초과해야 합니다. 지정하지 않은 경우 `1`입니다.

`low`

측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(`min` 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 `high`와 `max` 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.

`high`

측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(`max` 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 `low`와 `min` 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.

`optimum`

이상적인 값. `min`과 `max` 특성으로 정의한 범위 내에 위치해야 합니다. `low`와 `high` 특성을 함께 사용한 경우, `optimum`은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 `min`과 `low` 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.

`form`

`<meter>`와 연결할 `<form>` 요소("양식 소유자"). 같은 문서에 존재하는 `<form>` 요소의 `id` 특성 값을 사용해야 합니다. `form` 특성을 지정하지 않았으나 조상 중 `<form>` 요소가 존재하면 해당 `<form>`과 연결됩니다. `<input type="number">` (en-US)의 값 범위를 보여주는 등 `<meter>`를 양식 관련 콘텐츠로서 사용할 때만 지정하세요.

예제
--

### 간단한 예제

#### HTML

```html
<p>
  Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.
</p>
```

#### 결과

Google Chrome에서는 다음 그림처럼 보입니다.

![current look of 'meter' in Google Chrome](/ko/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.10.53_pm.png)

### 높은 범위와 낮은 범위

`min` 특성의 기본값이 0이므로 생략한 것을 참고하세요.

#### HTML

```html
<p>
  He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.
</p>
```

#### 결과

Google Chrome에서는 다음 그림처럼 보입니다.

![red meter in Google Chrome](/ko/docs/Web/HTML/Element/meter/screen_shot_2020-10-12_at_10.11.52_pm.png)

명세
--

| Specification |
| --- |
| HTML Standard # the-meter-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<progress>`


<img>: 이미지 삽입 요소 - HTML: Hypertext Markup Language

<img>: 이미지 삽입 요소
================

**HTML `<img>` 요소**는 문서에 이미지를 넣습니다.

시도해보기
-----

위의 예제를 통해 `<img>` 요소의 사용법을 알 수 있습니다.

* `src` 특성은 **필수**이며, 포함하고자 하는 이미지로의 경로를 지정합니다.
* `alt` 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 `alt`의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 **매우 유용**합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.

다양한 목적을 위한 많은 수의 속성이 더 존재합니다.

* Referrer (en-US) CORS control for security and privacy: see `crossorigin` and `referrerpolicy`.
* Setting an intrinsic size using `width`, `height`, and `intrinsicsize`: this sets the space taken up by an image to ensure the page layout is stable before it loads.
* Responsive image hints with `sizes` and `srcset` (see also the `<picture>` (en-US) element and our Responsive images tutorial).
지원하는 이미지 형식
-----------

HTML 표준은 지원해야 하는 이미지 형식을 명시하고 있지 않으므로, 각각의 사용자 에이전트는 서로 다른 형식을 지원합니다. 전체 목록은 웹 브라우저가 지원하는 이미지 형식 안내서 (en-US)를 참고하세요.

이미지를 가져올 수 없을 때
---------------

이미지를 불러오거나 그릴 때 오류가 발생했고, `onerror` 속성에 오류 처리기를 등록했다면 `error (en-US)` 이벤트와 함께 처리기를 호출합니다. 오류는 다양한 상황에서 발생할 수 있는데, 그 중 일부 원인은 다음과 같습니다.

* `src` 속성이 비었거나 `null`임.
* `src`의 URL이 현재 사용자가 보는 페이지의 URL과 같음.
* 지정한 이미지가 손상돼 불러올 수 없음.
* 이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, `<img>` 요소의 속성에도 크기를 지정하지 않음.
* 사용자 에이전트가 지원하지 않는 이미지 형식임.
특성
--

이 요소는 전역 특성을 포함합니다.

`alt`

이미지의 대체 텍스트 설명.

**참고:** 브라우저가 항상 이미지를 표시하는건 아닙니다. 예를 들어,

* 비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)
* 사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)
* 유효하지 않은 이미지거나, 지원하지 않는 형식

위와 같은 경우 브라우저가 이미지를 `alt` 특성의 텍스트로 대체할 수 있습니다. 그러므로 가능한 경우 `alt` 특성에 항상 유용한 값을 제공해야 합니다.

`alt` 특성을 아예 지정하지 않은 경우 이미지가 콘텐츠의 중요 부분이나 텍스트로 표현할 수 없음을 의미합니다. 빈 문자열(`alt=""`)을 사용한 경우, 이미지가 콘텐츠의 중요 부분이 **아니므로**(장식 또는 추적용 픽셀 등), 비 시각적 브라우저가 렌더링을 하지 않아도 된다는 의미입니다. 시각적 브라우저도 `alt` 특성이 비어있을 경우 깨진 이미지 아이콘을 표시하지 않습니다.

이미지를 텍스트로서 복사-붙여넣기할 때와, 이미지 링크를 북마크 할 때도 `alt`의 값을 사용합니다.

`crossorigin`

CORS를 사용해 지정한 이미지 파일을 가져와야 하는지의 여부. 교차 출처 활성화 리소스는 `<canvas>` 요소에 사용해도 캔버스를 "오염"시키지 않습니다. 가능한 값은 다음과 같습니다.

`anonymous`

자격 증명 없이 교차 출처 요청을 전송합니다. 즉, `Origin` HTTP 헤더를 쿠키, X.509 인증서, HTTP Basic 인증 없이 전송합니다. 서버에서 `Access-Control-Allow-Origin` HTTP 헤더를 지정하지 않음으로써 요청 출처 사이트에 자격 증명을 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.

`use-credentials`

자격 증명과 함께 교차 출처 요청을 전송합니다. 즉, `Origin` HTTP 헤더를 쿠키, X 509 인증서, 또는 HTTP Basic 이증과 함께 전송합니다. 서버에서 `Access-Control-Allow-Credentials` HTTP 헤더를 통한 자격 증명을 요청 출처 사이트에 보내지 않는다면 이미지는 "오염"되고, 사용처가 제한됩니다.

특성이 존재하지 않으면 리소스를 CORS 요청 없이(`Origin` HTTP 헤더 없이) 가져오므로, `<canvas>`를 오염시키게 됩니다. 유효하지 않은 값의 경우 `anonymous` 키워드를 사용한 것으로 간주합니다.

`decoding`

이미지 디코딩에 관해 브라우저에 제공할 힌트. 가능한 값은 다음과 같습니다.

`sync`

다른 콘텐츠와 함께 표시하기 위해 이미지를 동기적으로 디코딩 합니다.

`async`

다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다.

`auto`

선호하는 디코딩 모드가 없음을 나타내는 기본값입니다. 사용자에게 제일 적절한 값을 브라우저가 결정합니다.

`height`

픽셀 단위의 이미지의 고유 크기. 단위 없는 정수여야 합니다.

`importance`
Experimental

리소스의 상대적인 다운로드 중요도. 가능한 값은 다음과 같습니다.

`auto`: **설정 안함**. 브라우저가 자체 휴리스틱을 사용해 이미지의 우선순위를 결정합니다.

`high`: 이미지가 **높은** 우선순위를 지님.

`low`: 이미지가 **낮은** 우선순위를 지님.

`intrinsicsize`
지원이 중단되었습니다

This attribute tells the browser to ignore the actual intrinsic size of the image and pretend it's the size specified in the attribute. Specifically, the image would raster at these dimensions and `naturalWidth`/`naturalHeight` on images would return the values specified in this attribute. Explainer, examples

`ismap`

이미지가 서버 사이드 맵의 일부인지 나타냄. 서버 사이드 맵에 속하는 경우, 사용자가 이미지에서 클릭한 위치를 서버로 전송합니다.

**참고:** 포인팅 장치가 없는 사용자도 갈 수 있는 대체 목적지를 제공하기 위해, `ismap`은 `<img>` 요소가 유효한 `href` 특성을 가진 `<a>` 요소의 자손인 경우에만 사용 가능합니다.

`loading`

브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다.

* `eager`: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값)
* `lazy`: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다.

`referrerpolicy`
Experimental

리소스를 가져올 때 사용할 리퍼러를 나타내는 문자열.

* `no-referrer:` `Referer` 헤더를 전송하지 않습니다.
* `no-referrer-when-downgrade:` TLS(HTTPS) 지원을 하지 않는 출처에 대해서는 `Referer` 헤더를 전송하지 않습니다. 따로 지정하지 않은 경우 사용하는 기본 정책입니다.
* `origin:` `Referer` 헤더가 요청 출처의 스킴, 호스트, 포트를 포함합니다.
* `origin-when-cross-origin:` 다른 출처로 요청할 땐 리퍼럴 데이터를 스킴, 호스트, 포트로 제한합니다. 동일 출처로 요청할 땐 전체 경로와 쿼리 문자열도 포함합니다.
* `unsafe-url:` `Referrer` 헤더가 항상 출처, 경로, 쿼리 문자열을 포함합니다. 하지만 프래그먼트, 비밀번호, 사용자 이름은 포함하지 않습니다. TLS로 보호받는 리소스에서 그렇지 않은 출처로 정보를 누출할 수 있으므로 **안전하지 않습니다**.

`sizes`

소스 크기를 나타내는, 쉼표로 구분한 하나 이상의 문자열. 각각의 문자열은 다음 구성요소로 이루어집니다.

* 미디어 조건. 마지막 항목에서는 생략해야 합니다.
* 소스 크기 값.

미디어 조건은 이미지의 속성이 아니라\*\* 뷰포트\*\* 속성을 가리킵니다. 예를 들어, `(max-height: 500px) 1000px`은 1000px 너비의 소스를 사용하려면 **뷰포트**가 500px 이하여야 한다는 뜻입니다.

소스 크기는 의도한 이미지 표시 크기를 지정합니다. 사용자 에이전트는 현재 소스 크기를 사용해, 너비(`w`) 서술자를 사용한 `srcset` 특성의 소스 중 하나를 선택합니다. 선택한 소스 크기는 이미지의 고유 크기(CSS 스타일을 입히지 않은 경우 이미지의 표시 크기)에 영향을 줍니다. `srcset`이 비어있거나 너비 서술자를 사용하지 않은 경우, `sizes` 특성은 아무 효과도 없습니다.

`src`

이미지의 URL. 필수 사항입니다. `srcset`을 지원하는 브라우저의 `srcset`에 픽셀 밀도 `1x`와 `w` 서술자가 없는 경우, `src`는 픽셀 밀도 `1x`의 이미지 후보로 취급합니다.

`srcset`

사용자 에이전트가 사용할 수 있는 이미지 소스의 후보. 쉼표로 구분하는 한 개 이상의 문자열 목록입니다. 각각의 문자열은 다음 구성요소로 이루어집니다.

* 이미지의 URL.
* 선택적으로, 공백과 함께 그 뒤를 잇는...
* 너비 서술자(양의 정수와 바로 뒤의 '`w`' 문자). 너비 서술자의 값을 `sizes` 특성으로 지정한 소스 크기로 나눠서 픽셀 밀도를 구합니다.
* 픽셀 밀도 서술자(양의 실수와 바로 뒤의 '`x`' 문자).

서술자를 포함하지 않은 경우 기본값인 `1x`로 간주합니다.

같은 `srcset` 특성에 너비와 픽셀 밀도 서술자를 함께 사용하거나, 동일한 서술자를 두 개 이상 사용하는건 유효하지 않습니다.

사용자 에이전트 스스로 가능한 소스 중 하나를 선택합니다. 따라서 사용자 에이전트는 사용자의 개인 설정 또는 대역폭 상황에 따라 선택을 조절할 수 있는 상당한 여지를 가집니다. 반응형 이미지 자습서를 방문해 예제를 살펴보세요.

`width`

이미지의 픽셀 기준 고유 너비. 단위 없는 정수여야 합니다.

`usemap`

요소와 연결할 이미지 맵 (en-US)의 프래그먼트.

**참고:** `<img>` 요소가 `<a>` 또는 `<button>` 요소의 자손이면 사용할 수 없습니다.

### Deprecated attributes

`align`
지원이 중단되었습니다

Aligns the image with its surrounding context. Use the `float` and/or `vertical-align` CSS properties instead of this attribute. Allowed values:

`top`

Equivalent to `vertical-align: top` or `vertical-align: text-top`

`middle`

Equivalent to `vertical-align: -moz-middle-with-baseline`

`bottom`

The default, equivalent to `vertical-align: unset` or `vertical-align: initial`

`left`

Equivalent to `float: left`

`right`

Equivalent to `float: right`

`border`
지원이 중단되었습니다

The width of a border around the image. Use the `border` CSS property instead.

`hspace`
지원이 중단되었습니다

The number of pixels of white space on the left and right of the image. Use the `margin` CSS property instead.

`longdesc`
지원이 중단되었습니다

A link to a more detailed description of the image. Possible values are a URL or an element `id`.

**참고:** This attribute is mentioned in the latest W3C version, HTML 5.2, but has been removed from the WHATWG's HTML Living Standard. It has an uncertain future; authors should use a WAI-ARIA alternative such as `aria-describedby` or `aria-details`.

`name`
지원이 중단되었습니다

A name for the element. Use the `id` attribute instead.

`vspace`
지원이 중단되었습니다

The number of pixels of white space above and below the image. Use the `margin` CSS property instead.

CSS 스타일링
--------

`<img>`는 대체 요소입니다. 기본적으로 `display` (en-US)는 `inline`이나, 기본 크기는 내장한 이미지의 고유 크기로 정해지므로 마치 `inline-block`처럼 보입니다. `border`/`border-radius`, `padding`/`margin`, `width`, `height` 등의 속성을 이미지에 지정할 수 있습니다.

`<img>`는 기준선을 갖지 않으므로, `vertical-align``: baseline`을 지정한 인라인 서식 맥락에서는 이미지의 아래쪽 모서리가 텍스트 기준선으로 가게 됩니다.

요소 박스 내의 이미지 위치는 `object-position` 속성으로 바꿀 수 있습니다. 크기는 `object-fit` 속성을 통해 요소 크기에 맞출지, 요소를 채울지 등을 지정할 수 있습니다.

이미지는 고유 너비와 높이를 가질 수 있지만, 일부 유형의 이미지는 그렇지 않습니다. 예를 들어, SVG 요소는 루트 `<svg>` (en-US) 요소에 `width`와 `height`가 없는 경우 고유 크기를 가지지 않습니다.

예제
--

### 보조 텍스트

페이지에 이미지를 삽입하고, 접근성을 높이기 위해 대체 텍스트를 제공하는 간단한 예제입니다.

```html
<img src="favicon144.png" alt="MDN logo" />
```

### 이미지 링크

이 예제는 이전 코드에 더해 이미지를 링크로 바꾸는 법을 보입니다. 단순히 `<img>` 태그를 `<a>` 안에 넣기만 하면 됩니다. 다만 고려할 점 하나는, 해당 링크가 가리키는 곳을 설명하는 대체 텍스트를 포함해야 한다는 것입니다.

```html
<a href="https://developer.mozilla.org">
  <img src="favicon144.png" alt="Visit the MDN site" />
</a>
```

### `srcset` 특성 사용하기

이번 예제에서는 `srcset` 특성에 고해상도 버전 로고를 추가했습니다. 그러면 고해상도 장치에서는 일반 `src` 이미지 대신 고해상도 이미지를 사용합니다. `srcset` 특성을 지원하는 사용자 에이전트는 `src` 특성을 `srcset` `1x` 로 간주합니다.

```html
<img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x" />
```

### `srcset`과 `sizes` 특성 사용하기

`srcset`를 지원하는 사용자 에이전트는, `srcset`에 `w` 서술자를 사용한 경우 `src` 특성을 무시합니다. 다음 코드는 미디어 조건 `(max-width: 600px)`을 만족할 때 200px 너비의 이미지를 불러오고, 그 외의 경우엔 다른 이미지(400px)를 불러옵니다.

```html
<img
 src="clock-demo-200px.png"
 alt="Clock"
 srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
 sizes="(min-width: 600px) 200px, 50vw" />
```

**참고:** 직접 창 크기를 조절하면서 이미지의 변화를 관측하려면 별도 페이지를 방문하세요.

보안 및 개인정보 고려사항
--------------

`<img>` 요소를 사용하는 것에는 문제가 없으나, 의도치 않게 사용자 개인정보와 보안에 악영향을 줄 수 있습니다. Referer 헤더: 개인정보 및 보안 고려사항 문서를 방문해 더 많은 정보를 알아보세요.

접근성 고려사항
--------

### 적합한 대체 설명 작성

`alt` 특성의 값은 이미지 콘텐츠를 간단하고 명료하게 설명해야 합니다. 그러나 이미지의 존재 여부나, 이미지 파일의 이름을 나타내서는 안됩니다. 이미지를 텍스트로 설명할 방법이 없어서 의도적으로 `alt`를 지정하지 않은 경우, 해당 이미지가 나타내려는 바를 알려줄 수 있는 다른 방법을 고려해보세요.

#### 부적절

```html
<img alt="이미지" src="penguin.jpg" />
```

#### 적절

```html
<img alt="해변에 서있는 바위뛰기펭귄." src="penguin.jpg" />
```

일부 스크린 리더는 `alt` 특성을 가지지 않는 이미지를 보면 파일 이름을 표현하는 경우가 있는데, 이 때 파일의 이름이 이미지의 콘텐츠를 설명하지 않는다면 사용자가 혼란스러울 수 있습니다.

* An alt Decision Tree • Images • WAI Web Accessibility Tutorials
* Alt-texts: The Ultimate Guide — Axess Lab
* How to Design Great Alt Text: An Introduction | Deque
* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
### `title` 특성

`title` 특성은 `alt` 특성을 적합하게 대체할 수 없습니다. 또한, `alt`의 값을 `title`에도 반복하는 것을 피해야 합니다. 같은 값을 지정할 경우 일부 스크린 리더가 설명을 두 번씩 읽게 되므로 사용자가 혼란스러울 수 있습니다.

`title` 요소를 사용해 `alt` 설명에 대한 부연 설명을 제공해서도 안됩니다. 이미지가 설명을 필요로 하는 경우 `<figure>`와 `<figcaption>` 요소를 사용하세요.

`title` 특성은 보통 툴팁, 즉 사용자가 커서를 이미지 위에 올리고 가만히 있으면 짧은 시간 뒤에 나타나는 형태로 표현합니다. 따라서 추가 정보를 제공할 수는 있겠으나 터치 화면, 또는 키보드만 사용하는 경우도 존재하므로 사용자가 툴팁을 볼 수 있을 것이라고 기대해서는 안됩니다. 사용자에게 많이 중요한 정보를 포함해야 하면 `title` 특성 대신 위에 명시한 다른 방법을 사용하세요.

* Using the HTML title attribute – updated | The Paciello Group
기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠,
 내장 콘텐츠,
 뚜렷한 콘텐츠. `usemap` 특성을 가진 경우
 대화형 콘텐츠.
  |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 내장 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLImageElement` (en-US) |

명세
--

| Specification |
| --- |
| HTML Standard # the-img-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<picture>` (en-US), `<object>`, `<embed>` 요소
* 이미지 관련 CSS 속성: `object-fit`, `object-position`, `image-orientation` (en-US), `image-rendering`, `image-resolution` (en-US).


<em>: 강세 요소 - HTML: Hypertext Markup Language

<em>: 강세 요소
===========

**HTML `<em>` 요소**는 텍스트의 강세를 나타냅니다. `<em>` 요소를 중첩하면 더 큰 강세를 뜻하게 됩니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

이 요소는 전역 특성만 포함합니다.

사용 일람
-----

`<em>` 요소는 주위 텍스트에 비해 강조된 부분을 나타냅니다. 보통 한 문장에서 단어 하나 혹은 몇 개로 제한되며, 문장의 의미에 영향을 미칠 수 있습니다.

`<em>`은 주로 기울임꼴을 적용해 표현합니다. 그러나 단순히 기울임꼴이 필요해서 `<em>`을 사용하면 안됩니다. CSS `font-style` (en-US) 속성을 사용하세요. 그 외에 흔히 기울임꼴을 많이 쓰는 경우를 정리하자면 저작물(책, 연극, 음악 등등)의 제목은 `<cite>`, 학명 등 과학적인 이름이나 다른 언어의 단어 등, 주변과 다른 톤을 가진 텍스트에는 `<i>`를 사용하세요. 주변보다 훨씬 중요한 텍스트는 `<strong>` (en-US)으로 강조하면 됩니다.

### `<i>`와 `<em>`

신입 개발자가 자주 혼란스러운 부분 중 하나가, 서로 다른 요소인데 비슷한 결과물을 내놓는 경우입니다. `<em>`과 `<i>`가 그 예로서, 둘 다 글자를 기울이는데 그러면 차이가 뭘까요? 어떤 걸 써야 할까요?

기본 설정에서 시각적 모습은 동일합니다. 그러나 의미는 다릅니다. `<em>`은 콘텐츠를 강조하지만, `<i>`는 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용합니다. (책이나 영화 등의 제목은 `<cite>`를 사용하세요.)

그러므로 요소 선택은 상황에 따라 달라야 하며, 순수하게 꾸밈을 위한 요소는 없습니다. 스타일은 CSS에 맡기세요.

`<em>`은 "Just *do* it already!"나 "We *had* to do something about it."처럼 쓸 수 있습니다. 이 글을 읽는 사람이나 소프트웨어는 기울임꼴 부분에 강세를 두고 말할 것입니다.

`<i>`는 "The *Queen Mary* sailed last night."처럼 사용합니다. "Queen Mary"를 강조하는 것도 아니고, 중요한 단어도 아닙니다. 다만 이 단어가 Mary라는 이름의 여왕이 아니고, *Queen Mary*라는 이름의 선박임을 나타낼 뿐입니다. "The word *the* is an article"도 좋은 예제가 되겠습니다.

예제
--

`<em>` 요소는 명시적이거나 암시적인 대조를 표현할 때 주로 사용합니다.

```html
<p>
  과거에 <em>block-level</em>이라 불렸던 콘텐츠는 HTML 5부터
  <em>flow</em> 콘텐츠라고 말합니다.
</p>
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # the-em-element |

브라우저 호환성
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

같이 보기
-----

* `<i>`