<rp>: 루비 대체 괄호 요소 - HTML: Hypertext Markup Language

<rp>: 루비 대체 괄호 요소
=================

**HTML `<rp>` 요소**는 `<ruby>` 요소를 사용한 루비 주석을 지원하지 않는 경우 보여줄 괄호를 제공할 때 사용합니다. `<rt>` 요소를 감싸는 여는 괄호와 닫는 괄호를 각각의 `<rp>` 요소로 나타내야 합니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

* 루비 주석은 일본어 후리가나, 타이완어 주음부호와 같이 동아시아 문자의 발음 표기에 사용합니다. `<rp>` 요소는 `<ruby>` 요소를 지원하지 않는 브라우저에서 루비 주석을 구분할 수 있는 텍스트(주로 괄호)를 제공합니다.
예제
--

다음 예제는 한자료 표기한 "경복궁"의 각 글자에 루비 주석을 적용합니다.

```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;
}
```

결과는 다음과 같습니다.

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

景 (경) 福 (복) 宮 (궁)
```

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

명세
--

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

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

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

같이 보기
-----

* `<ruby>`
* `<rt>`
* `<rb>`
* `<rtc>`


<s> - HTML: Hypertext Markup Language

<s>
===

**HTML `<s>` 요소**는 글자에 취소선, 즉 글자를 가로지르는 선을 그립니다. `<s>` 요소를 사용해 이제 관계 없거나 더 이상 정확하지 않은 부분을 나타내세요. 그러나, `<s>`는 문서의 편집 기록을 나타내는 용도로는 적합하지 않습니다. 상황에 따라 `<del>`과 `<ins>` 요소를 대신 사용하세요.

시도해보기
-----

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

특성
--

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

예제
--

```html
<s>Today's Special: Salmon</s> SOLD OUT<br />
```

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

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

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

s::before {
  content: " [취소선 시작] ";
}

s::after {
  content: " [취소선 끝] ";
}
```

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

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

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

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

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

같이 보기
-----

* 자료가 **삭제**된 경우 사용하는 `<del>` 요소.
* `<s>` 요소의 시각적 요소를 재현할 수 있는 CSS `text-decoration-line` (en-US) 속성.


<output>: 출력 요소 - HTML: Hypertext Markup Language

<output>: 출력 요소
===============

**HTML `<output>` 요소**는 웹 사이트나 앱에서 계산이나 사용자 행동의 결과를 삽입할 수 있는 컨테이너 요소입니다.

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

특성
--

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

* `for`
    + : 스페이스로 구분한, 다른 여러 요소 `id`의 목록. 목록에 포함된 요소가 출력 결과에 공헌했거나 영향을 주었음을 나타냅니다.
* `form`
    + : `<output>`과 연결할 `<form>` 요소("양식 소유자"). 같은 문서에 존재하는 `<form>` 요소의 `id` 특성 값을 사용해야 합니다. `form` 특성을 지정하지 않았으나 조상 중 `<form>` 요소가 존재하면 해당 `<form>`과 연결됩니다.`form` 특성을 사용하면 `<output>`을 `<form>` 요소에 넣지 않고도 연결할 수 있고, 조상 중 `<form>`이 있더라도 소유자를 재정의할 수 있습니다.
* `name`
    + : 요소의 이름. `form.elements` API에서 사용합니다.

`<output>`의 값, 이름, 콘텐츠는 양식 전송 시 제출되지 않습니다.

예제
--

```html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>
```

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

많은 브라우저는 `<output>`을 마치 `aria-live` (en-US) 특성이 존재하는 것처럼 구현합니다. 따라서 접근성 기술은 포커스가 바뀌지 않더라도 `<output>` 내부의 UI 상호작용 결과를 표현할 것입니다.

명세
--

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

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

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


<sub>: 아래 첨자 요소 - HTML: Hypertext Markup Language

<sub>: 아래 첨자 요소
===============

**HTML** **`<sub>`** 요소는 활자 배치를 아래 첨자로 해야 하는 인라인 텍스트를 지정합니다. 아래 첨자는 보통 더 작은 글씨 크기를 가지고, 기준선을 아래로 내려 렌더링 합니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

`<sub>` 요소는 타이포그래피적인 이유에 맞춰서만 사용해야 합니다. 타이포그래피적 이유란 기존의 관례나 표준이 아래 첨자로 나타내는 경우를 말하며, 단순히 작은 글자를 아래로 올려야 할 때는 사용해서는 안됩니다.

예를 들어 비즈니스나 상품의 워드마크 글씨 기준선을 내려야 한다면 `<sub>` 대신 CSS(대개 `vertical-align`)를 사용해야 합니다. `vertical-align: sub`를 사용할 수도 있고, 기준선을 25% 내려야 한다면 `vertical-align: -25%`로도 쓸 수 있습니다.

`<sub>`의 적절한 사용처 몇 가지는 다음과 같습니다.

* 각주 표기. 아래의 각주 표기 예제를 참고하세요.
* 수학 변수의 숫자 표기. MathML을 사용하는 방향을 고려하세요. 변수 표기 예제를 참고하세요.
* 화학식에서 원소의 수를 나타낼 때. (개발자의 친구, C8H10N4O2, 카페인) 아래의 화학식 예제를 참고하세요.
예제
--

### 각주 표기

각주의 숫자를 아래 첨자로 나타내는 경우도 있으며, `<sub>`가 흔히 쓰이는 경우입니다.

```html
<p>
  According to the computations by Nakamura, Johnson, and Mason<sub>1</sub> this
  will result in the complete annihilation of both particles.
</p>
```

### 변수 표기

수학에서는 같은 축 위의 점 여럿과 같이, 동일한 개념을 가리키는 변수의 무리는 같은 변수명을 사용하며, 뒤의 아래 첨자 숫자로 서로 구분합니다.

```html
<p>
  The horizontal coordinates' positions along the X-axis are represented as
  <var>x<sub>1</sub></var> ... <var>x<sub>n</sub></var
 >.
</p>
```

### 화학식

화학식에서 특정 원자의 수를 나타낼 때 아래 첨자를 사용합니다. H20의 아래 첨자 "2"는 화학식이 나타내는 물질에 수소 원자가 2개 존재한다는 뜻입니다.:

```html
<p>
  Almost every developer's favorite molecule is
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, which is commonly known
  as "caffeine."
</p>
```

명세
--

| Specification |
| --- |
| HTML Standard # the-sub-and-sup-elements |

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

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

같이 보기
-----

* 위 첨자를 나타내는 `<sup>` (en-US) 요소. 위 첨자와 아래 첨자가 같은 공간에 공존할 수는 없습니다. 따라서 화학의 질량수/원자 번호 표기 등을 구현하려면 MathML이 필요합니다.
* `<msub>` (en-US), `<msup>` (en-US), `<msubsup>` (en-US) MathML 요소.
* CSS `vertical-align` 속성.


<figure> - HTML: Hypertext Markup Language

<figure>
========

**HTML `<figure>` 요소**는 독립적인 콘텐츠를 표현합니다. `<figcaption>` 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트, 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 |
`<figcaption>`과 뒤따르는
 플로우 콘텐츠.혹은 플로우 콘텐츠를 뒤따르는
 `<figcaption>`.혹은 플로우 콘텐츠.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | `group` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

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

사용 일람
-----

* 보통 `<figure>`는 주 문서 플로우가 참조하지만, 다른 부분이나 부록으로 이동해도 문제 없는 이미지, 삽화, 도표, 코드 조각 등을 맡습니다.
* `<figure>`는 구획 루트이므로 `<figure>` 요소의 콘텐츠는 문서의 주 개요에서 제외됩니다.
* 안에 (처음이나 마지막 자식으로) `<figcaption>`을 넣어서 설명을 덧붙일 수 있습니다. 제일 처음 `<figcaption>`을 설명으로 사용합니다.
예제
--

### 이미지

```html
<!-- Just an image -->
<figure>
  <img
 src="https://developer.mozilla.org/static/img/favicon144.png"
 alt="A robotic monster over the letters MDN." />
</figure>

<!-- Image with a caption -->
<figure>
  <img
 src="https://developer.mozilla.org/static/img/favicon144.png"
 alt="A robotic monster over the letters MDN." />
  <figcaption>MDN Logo</figcaption>
</figure>
```

### 코드 조각

```html
<figure>
  <figcaption><code>navigator</code>를 이용하여 브라우저 정보 얻기</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}
  </pre>
</figure>
```

### 인용문

```html
<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>
    If debugging is the process of removing software bugs, then programming must
    be the process of putting them in.
  </blockquote>
</figure>
```

### 시

```html
<figure>
  <p style="white-space:pre">
    Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the
    green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and
    yet no footing seen: Love is a spirit all compact of fire, Not gross to
    sink, but light, and will aspire.
  </p>
  <figcaption><cite>Venus and Adonis</cite>, by William Shakespeare</figcaption>
</figure>
```

명세
--

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

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

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

같이 보기
-----

* `<figcaption>`


<slot> - HTML: Hypertext Markup Language

<slot>
======

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**HTML `<slot>` 요소**는 웹 컴포넌트 사용자가 자신만의 마크업으로 채워 별도의 DOM 트리를 생성하고, 컴포넌트와 함께 표현할 수 있는 웹 컴포넌트 내부의 플레이스홀더입니다.

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

특성
--

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

`name`

슬롯의 이름.

예제
--

```html
<template id="element-details-template">
  <style>
 details {
 font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
 }
 .name {
 font-weight: bold;
 color: #217ac0;
 font-size: 120%;
 }
 h4 {
 margin: 10px 0 -8px 0;
 background: #217ac0;
 color: white;
 padding: 2px 6px;
 border: 1px solid #cee9f9;
 border-radius: 4px;
 }
 .attributes {
 margin-left: 22px;
 font-size: 90%;
 }
 .attributes p {
 margin-left: 16px;
 font-style: italic;
 }
 </style>
  <details>
    <summary>
      <code class="name"
 ><<slot name="element-name">NEED NAME</slot>></code
 >
      <i class="desc"><slot name="description">NEED DESCRIPTION</slot></i>
    </summary>
    <div class="attributes">
      <h4>Attributes</h4>
      <slot name="attributes"><p>None</p></slot>
    </div>
  </details>
  <hr />
</template>
```

**참고:** 온전한 예제는 element-details(라이브로 보기)에서 볼 수 있습니다. 설명은 템플릿과 슬롯 사용하기 (en-US)에서 확인할 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-slot-element |
| DOM Standard # shadow-tree-slots |

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

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


<rt>: 루비 텍스트 요소 - HTML: Hypertext Markup Language

<rt>: 루비 텍스트 요소
===============

**HTML `<rt>` 요소**는 동아시아 문자의 루비 주석에서 발음, 번역 등을 나타내는 텍스트 부분을 지정합니다.

시도해보기
-----

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

특성
--

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

예제
--

다음 예제는 `<ruby>` 요소를 사용해 한자의 발음을 표기합니다.

```html
<ruby> 漢 <rt>한</rt> 字 <rt>자</rt> </ruby>
```

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

결과는 다음과 같습니다.

브라우저가 루비를 지원하지 않는 경우엔 다음처럼 보일 것입니다.
```

漢 한 字 자
```

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

명세
--

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

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

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

같이 보기
-----

* `<ruby>`
* `<rp>`
* `<rb>`
* `<rtc>`


<track>: 텍스트 트랙 삽입 요소 - HTML: Hypertext Markup Language

<track>: 텍스트 트랙 삽입 요소
=====================

**HTML `<track>` 요소**는 미디어 요소(`<audio>` (en-US), `<video>`)의 자식으로서, 자막 등 시간별 텍스트 트랙(시간 기반 데이터)를 지정할 때 사용합니다. 트랙은 WebVTT (en-US)(Web Video Text Tracks, `.vtt` 파일) 형식을 사용해야 합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음 |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | 미디어 요소, `<audio>` (en-US) 또는 `<video>`. |
| 포함되는 ARIA 역할 | 해당되는 역할 없음 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLTrackElement` (en-US) |

특성
--

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

`default`

사용자 설정이 다른 자막을 가리키지 않는다면 활성화할 기본 트랙을 나타냅니다. 하나의 미디어 요소 당 하나의 `<track>` 요소에만 사용할 수 있습니다.

`kind`

텍스트 트랙의 종류. 생략할 경우 `subtitles`로 간주합니다. 유효하지 않은 값을 가진 경우 `metadata`로 간주합니다 (Chrome 52 미만에서는 `subtitles`). 가능한 키워드는 다음과 같습니다.

* `subtitles`
    + 자막은 시청자가 이해할 수 없는 언어에 대한 번역을 제공합니다. 예를 들면, 비영어권 시청자에게 영어 영상을 보여줄 때 제공할 대화문이나 텍스트 등입니다.
    + 자막은 배경 설명과 같은 추가 콘텐츠를 포함할 수 있습니다. 예를 들면, 스타워즈 영화 오프닝 텍스트, 혹은 현재 장면의 날짜와 시간, 장소 등입니다.
* `captions`
    + 폐쇄자막은 오디오 트랜스크립션을 제공하며, 번역도 포함할 수 있습니다.
    + 음악 신호, 소리 효과와 같은 비언어적 소리 효과도 나타낼 수 있습니다. 효과의 원인(음악, 글자, 등장인물...)도 설명할 수 있습니다.
    + 음소거로 시청하는 경우와 청각 장애를 가진 시청자에게 적합합니다.
* `descriptions`
    + 비디오 콘텐츠의 텍스트 설명입니다.
    + 비디오를 볼 수 없는 환경과 시각 장애를 가진 시청자에게 적합합니다.
* `chapters`
    + 챕터 타이틀은 미디어 리소스를 탐색할 때 사용합니다.
* `metadata`
    + 트랙을 스크립트가 사용합니다. 사용자에게 보이지 않습니다.

`label`

사용자가 읽을 수 있는 형태의 텍스트 트랙 제목. 브라우저에서 사용 가능한 트랙의 이름 목록을 생성할 때 사용합니다.

`src`

자막의 주소(`.vtt` 파일). 유효한 URL이어야 합니다. 필수 특성이며, `<track>`의 부모 `<audio>` (en-US)/`<video>` 요소에 `crossorigin` (en-US) 특성이 없다면 문서와 같은 출처여야 합니다.

`srclang`

텍스트 트랙의 언어. 유효한 IETF 언어 태그여야 합니다. `kind` 특성이 `subtitle`인 경우, `srclang`은 반드시 정의되어야 합니다.

사용 일람
-----

### 트랙 데이터 유형

`<track>` 요소가 미디어에 추가하는 데이터의 유형은 `subtitles`, `captions`, `descriptions`, `chapters`, `metadata` 중 하나의 값을 가지는 `kind` 특성으로 나타낼 수 있습니다. 사용자가 추가 데이터를 요청하는 경우, 브라우저는 `<track>` 요소가 가리키는 시간별 텍스트 데이터를 보여줍니다.

미디어 요소는 동일한 `kind`, `srclang`, `label`을 가진 `<track>`을 하나보다 많이 포함할 수 없습니다.

### Cue 변경 감지

`track` 속성으로 나타나는 기본 `TextTrack` (en-US)은 현재 제시된 큐가 변경될 때마다 `cuechange` 이벤트를 수신합니다. 이는 track이 미디어 요소와 연결되지 않은 경우에도 발생합니다.

`<track>` 요소가 `<audio>` (en-US) 또는 `<video>` 요소의 자식으로 미디어 요소와 연결되어 있는 경우, `cuechange` 이벤트는 마찬가지로 `HTMLTrackElement` (en-US)에 전달됩니다.

```js
let textTrackElem = document.getElementById("texttrack");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});
```

예제
--

```html
<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles\_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles\_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles\_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  ...
</video>
```

명세
--

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

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

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

같이 보기
-----

* WebVTT 텍스트 트랙 형식 (en-US)
* `HTMLMediaElement.textTracks` (en-US)


<dd> - HTML: Hypertext Markup Language

<dd>
====

**HTML `<dd>` 요소**는 정의 목록 요소(`<dl>`)에서 앞선 용어(`<dt>`)에 대한 설명, 정의, 또는 값을 제공합니다.

시도해보기
-----

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

특성
--

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

`nowrap`
비표준

값이 `yes`면 너비의 끝에서 정의 텍스트의 줄이 바뀌지 않습니다. 기본값은 `no`입니다.

예제
--

예제를 보려면 `<dl>` 예제 (en-US)를 보세요.

명세
--

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

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

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

같이 보기
-----

* `<dl>`
* `<dt>`


<embed> - HTML: Hypertext Markup Language

<embed>
=======

**HTML `<embed>` 요소**는 외부 어플리케이션이나 대화형 컨텐츠와의 통합점을 나타냅니다.

시도해보기
-----

* **컨텐츠 범주 (en-US)** 플로우 컨텐츠 (en-US), 구문 컨텐츠 (en-US), 포함된 컨텐츠, 대화형 컨텐츠, palpable 컨텐츠.
* **허용된 컨텐츠** 없음. 이것은 empty element.
* **태그 생략** 시작 태그는 있어야 하며, 종료태그는 있어서는 안됩니다.
* **허용된 부모 요소** 포함된 컨텐츠를 허용하는 모든 요소
* **DOM 인터페이스** `HTMLEmbedElement` (en-US)
속성
--

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

`height`

리소스의 표시될 높이 길이를 CSS 픽셀로 지정

`src`

포함된 리소스의 URL

`type`

인스턴스화할 플러그인을 고르기 위해 사용되는 MIME 타입

`width`

리소스의 표시될 가로 길이를 CSS 픽셀로 지정

예제
--

```html
<embed type="video/quicktime" src="movie.mov" width="640" height="480" />
```

명세
--

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

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

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

같이 보기
-----

* 다양한 타입의 포함된 컨텐츠를 위해 사용되는 다른 요소들 `<audio>` (en-US), `<canvas>`, `<iframe>` (en-US), `<img>`, `<math> (en-US)`, `<object>`, `<svg>` (en-US), and `<video>`.


<title>: 문서 제목 요소 - HTML: Hypertext Markup Language

<title>: 문서 제목 요소
=================

**HTML `<title>` 요소**는 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.

```html
<title>Grandma's Heavy Metal Festival Journal</title>
```

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 메타데이터 콘텐츠. |
| 가능한 콘텐츠 | 비어있지 않는 텍스트. |
| 태그 생략 |
 여는 태그와 닫는 태그 모두 필수입니다. `</title>`이
 없으면 브라우저가 페이지의 나머지 내용을 무시합니다.
  |
| 가능한 부모 요소 |
 다른 `<title>` 요소를 포함하지 않은
 `<head>`.
  |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLTitleElement` |

특성
--

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

사용 일람
-----

`<title>` 요소는 페이지의 `<head>` 안에서 사용해야 합니다.

### 페이지 제목과 SEO

페이지 제목은 SEO에 큰 영향을 줍니다. 보통, 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 합니다. 검색 엔진이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문입니다. 또한, 검색 결과에서 잠재적 독자의 주목을 끌 수 있는 최초 "훅"이 바로 제목입니다.

다음은 좋은 제목을 작성할 때 참고할 수 있는 몇 가지 지침입니다.

* 하나 혹은 두 개의 단어로만 제목을 구성하는걸 피하세요. 콘텐츠를 설명하는 문장을 넣거나, 사전과 참고 문서의 경우 용어와 정의를 짝지어 사용하세요.
* 검색 결과는 보통 페이지 제목의 첫 55~60글자만 노출합니다. 이후 텍스트는 보이지 않을 수도 있으므로 글자 수를 제한하세요. 긴 제목을 반드시 사용해야 하는 경우, 중요한 부분을 앞에 배치해서 뒷부분이 없어지더라도 내용을 잃지 않도록 주의하세요.
* "키워드 뭉치" 스타일의 제목은 피하세요. 제목이 단순한 단어 나열에 불과하다면 검색 알고리즘이 결과에서 순서를 내리곤 합니다.
* 웹 사이트 내에서 제목을 최대한 겹치지 않도록 하세요. 중복, 혹은 유사한 제목은 검색 결과의 정확도를 떨어트리는 요인입니다.
예제
--

```html
<title>엄청 흥미로운 내용</title>
```

예제 코드를 포함한 문서를 연 브라우저 창이나 탭의 제목이 "엄청 흥미로운 내용"으로 바뀌게 됩니다.

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

페이지의 목적을 설명하는 `title`을 제공하는 것이 중요합니다.

보조 기술 사용자가 자주 사용하는 탐색 기술 중 하나는 페이지의 제목을 읽고 어떤 내용일지 유추하는 것입니다. 일일히 탐색해가며 콘텐츠를 찾는건 시간도 많이 들 뿐더러 어려운 일이기 때문입니다.

### 예제

```html
<title>
  메뉴 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로 주문하세요!
</title>
```

사용자를 도와주려면 페이지의 `title` 값이 중요한 상태의 변화(입력 폼 유효성 문제 등)를 반영하도록 바꾸세요.

```html
<title>
  오류 2개 - 주문서 - 블루 하우스 치즈 - FoodYum: 지금 바로 온라인으로
  주문하세요!
</title>
```

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

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

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

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


<aside>: 별도 구획 요소 - HTML: Hypertext Markup Language

<aside>: 별도 구획 요소
=================

**HTML `<aside>` 요소**는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구획 콘텐츠,
 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소.`<aside>` 요소는
 `<address>`의 후손이 될 수 없음에 주의하세요.
  |
| 암시적 ARIA 역할 | `complementary (en-US)` |
| 가능한 ARIA 요소 | `feed` (en-US), `none` (en-US),
 `note` (en-US), `presentation` (en-US),
 `region` (en-US), `search` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

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

사용 일람
-----

* 괄호에 묶인 텍스트라도 문서의 주요 플로우에 포함되어야 하므로 `<aside>`로 나타내선 안됩니다.
예제
--

### `<aside>` 사용하기

다음 예제는 글 내의 문단을 `<aside>`로 표시합니다. 해당 문단은 글의 주제와 간접적으로만 연결되어 있습니다.

```html
<article>
  <p>디즈니 만화영화 <em>인어 공주</em>는 1989년 처음 개봉했습니다.</p>
  <aside>인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.</aside>
  <p>영화에 대한 정보...</p>
</article>
```

### 결과

명세
--

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

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

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

같이 보기
-----

* HTML 구획과 개요 사용하기


<form> - HTML: Hypertext Markup Language

<form>
======

**HTML `<form>` 요소**는 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다.

시도해보기
-----

`<form>` 요소를 꾸밀 땐, 모든 `elements`의 유효성을 나타내는 CSS `:valid` (en-US)와 `:invalid` (en-US) 의사 클래스를 사용할 수 있습니다.

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

특성
--

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

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

A comma-separated list of content types that the server accepts.

**참고:** **사용시 주의:** 이 속성은 HTML5에서 제거되고 더 이상 사용되서는 안됩니다. 대신에, `<input>` (en-US) 요소의 `accept` (en-US) 속성을 사용하세요.

`accept-charset`

스페이스로 구분한, 서버가 허용하는 문자 인코딩의 목록. 브라우저는 목록을 순서대로 사용합니다. 기본값은 페이지 인코딩과 같습니다.

`action`

양식 데이터를 처리할 프로그램의 URI. `<button>`, `<input type="submit">` (en-US), `<input type="image">` (en-US) 요소의 `formaction` 특성으로 재정의할 수 있습니다.

`autocapitalize`
비표준

양식 요소 내에서 영문을 입력할 때 자동으로 대문자 변환하는 방식. iOS Safari에서만 사용하는 비표준 특성입니다. 각 요소의 `autocapitalize` 특성이 `<form>`에 정의된 값을 재정의합니다.

* `none`: 자동 대문자 입력을 비활성화합니다.
* `sentences`: 문장의 첫 글자를 대문자로 변환합니다. 기본값.
* `words`: 각 단어의 첫 글자를 대문자로 변환합니다.
* `characters`: 모든 글자를 대문자로 변환합니다.

`autocomplete`

입력 요소가 자동완성된 값을 기본값으로 가질 수 있는지 나타냅니다. 각 요소의 `autocomplete` 특성이 `<form>`에 정의된 값을 재정의합니다.

* `off`: 브라우저가 각 항목에 자동으로 값을 채워 넣지 않습니다. (로그인 양식으로 의심되는 경우 보통 무시합니다)
* `on`: 사용자의 과거 입력값에 기반하여 브라우저가 자동으로 값을 채워 넣습니다.

`enctype`

`method` 특성이 `post`인 경우, `enctype`은 양식 제출 시 데이터의 MIME 유형을 나타냅니다.

* `application/x-www-form-urlencoded`: 기본값.
* `multipart/form-data`: `<input type="file">`이 존재하는 경우 사용하세요.
* `text/plain`: HTML 5에서 디버깅 용으로 추가된 값.

`<button>`, `<input type="submit">` (en-US), `<input type="image">` (en-US) 요소의 `formenctype` 특성으로 재정의할 수 있습니다.

`method`

양식을 제출할 때 사용할 HTTP 메서드.

* `post`: POST 메서드. 양식 데이터를 요청 본문으로 전송합니다.
* `get`: GET 메서드. 양식 데이터를 `action` URL과 `?` 구분자 뒤에 이어 붙여서 전송합니다.
* dialog: 양식이 `<dialog>` 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.

`<button>`, `<input type="submit">` (en-US), `<input type="image">` (en-US) 요소의 `formmethod` 특성으로 재정의할 수 있습니다.

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

양식의 이름. HTML 4부터 사용 중단됐습니다. `id`를 사용하세요.

`novalidate`

지정한 경우 양식의 유효성 검증을 건너뜁니다. `novalidate` 특성을 지정하지 않은(양식의 검증을 수행하는) 경우에도 `<button>`, `<input type="submit">` (en-US), `<input type="image">` (en-US) 요소의 `formnovalidate` 특성으로 재정의할 수 있습니다.

`target`

양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 브라우징 맥락(탭, 창, `<iframe>` (en-US))의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 `target` 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.

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

`<button>`, `<input type="submit">` (en-US), `<input type="image">` (en-US) 요소의 `formtarget` 특성으로 재정의할 수 있습니다.

예제
--

```html
<!-- Form which will send a GET request to the current URL -->
<form>
  <label
 >Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form which will send a POST request to the current URL -->
<form method="post">
  <label
 >Name:
    <input name="submitted-name" autocomplete="name" />
  </label>
  <button>Save</button>
</form>

<!-- Form with fieldset, legend, and label -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio" /> Select me</label>
  </fieldset>
</form>
```

명세
--

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

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

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

같이 보기
-----

* HTML 양식 안내서 (en-US)


<tfoot>: 표 바닥글 요소 - HTML: Hypertext Markup Language

<tfoot>: 표 바닥글 요소
=================

HTML 요소는 테이블의 열을 요약하는 행들의 집합입니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 0개 이상의 `<tr>` (en-US) 요소. |
| 태그 생략 |
 여는 태그는 필수입니다. 부모 `<table>` (en-US) 요소에 더
 이상의 컨텐츠가 없는 경우에는 닫는 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<table>` (en-US)요소. `<tfoot>`
 요소는 무조건 `<caption>`,
 `<colgroup>` (en-US), `<thead>`,
 `<tbody>` (en-US), 또는 `<tr>` (en-US) 요소
 뒤에 위치해야 합니다. 이것이 HTML5에서의 요구 사항임에 주의해야
 합니다.HTML4에서는 `<tfoot>` 요소는
 `<tbody>` (en-US) 와 `<tr>` (en-US) 요소의
 뒤에 배치할 수 없습니다. 이것은 위의 HTML5에서의 요구 사항과 완전히
 모순된다는 것에 주의해야 합니다.
  |
| 암시적 ARIA 역할 | `rowgroup (en-US)` |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLTableSectionElement` (en-US) |

특성
--

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

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

다음 특성은 더 이상 사용되지 않으므로 사용해서는 안 됩니다. 이 특성들은 기존 코드를 업데이트할 때 참조하는 용도와, 역사적인 흥미를 위해서만 작성되어 있습니다.

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

    + : 아래에 나열된 속성들은 각 셀 컨텐츠의 수평 정렬 방법을 지정합니다. 가능한 값:
        - `left`, 컨텐츠를 셀의 왼쪽으로 정렬합니다.
        - `center`, 컨텐츠를 셀의 가운데로 정렬합니다.
        - `right`, 컨텐츠를 셀의 오른쪽으로 정렬합니다.
        - `justify`, 컨텐츠가 셀의 양쪽으로 정렬되도록 텍스트 컨텐츠에 공백을 삽입합니다.
        - `char`, `char` (en-US) 와 `charoff` (en-US) 특성에 의해 정해지는 최소 오프셋을 가진 특수 문자에 대해 텍스트 컨텐츠를 정렬합니다.
         만약 값이 따로 할당되어 있지 않다면 `left` 가 기본값으로 지정됩니다.
    >
    > **주의:**
    >
    >
    >
    >     - `left`, `center`, `right` 또는 `justify` 값과 같은 효과를 내고 싶다면, CSS `text-align` 속성을 적용하세요.
    >     - `char` 값과 같은 효과를 내고 싶다면, CSS3에서 `char`의 값을 `text-align` 속성의 Unimplemented 값으로 사용할 수 있습니다.
    >
* `bgcolor`
지원이 중단되었습니다

    + : 표의 배경 색입니다. '`#`'이 앞에 붙는 6자리의 16진수 RGB 코드 형식으로 작성합니다. 이미 정의되어 있는 color keywords 도 사용할 수 있습니다.
     비슷한 효과를 적용하고 싶다면 CSS `background-color` 속성을 사용합니다.
* `char`
지원이 중단되었습니다

    + : 이 특성은 열을 특정 문자에 대해 정렬하도록 지정합니다. 숫자 또는 통화 값을 정렬할 때에는 일반적으로 마침표(.)가 포함됩니다. 만약 `align` 이 `char`로 설정되어 있지 않으면, 이 특성은 무시됩니다.
* `charoff`
지원이 중단되었습니다

    + : 이 특성은 `char` 특성으로 지정된 정렬 문자에서 열 데이터를 오프셋할 문자의 수를 나타내는 데 사용됩니다.
* `valign`
지원이 중단되었습니다

    + : 이 특성은 표 바닥글의 각 행 내에 있는 텍스트의 수직 정렬 방식을 지정합니다. 이 특성에 사용 가능한 값:
* `baseline`, 텍스트를 가능한 한 셀의 하단에 가깝게, 하지만 텍스트의 baseline 에 맞춰 배치합니다. 만약 문자들의 크기가 모두 같다면, 이것은 `bottom`과 같은 효과를 가집니다.
* `bottom`, 텍스트를 가능한 한 셀의 하단에 가깝게 배치합니다.
* `middle`, 텍스트를 셀의 가운데에 배치합니다.
* `top`, 텍스트를 가능한 한 셀의 상단에 가깝게 배치합니다.

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

예제
--

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

명세
--

| Specification |
| --- |
| HTML Standard # the-tfoot-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), `<th>` (en-US), `<thead>`, `<tr>` (en-US).
* `tfoot` 요소에 스타일을 지정할 때 특히 유용할 CSS 속성과 가상 클래스들:
    + 각 열의 셀들을 정렬할 때 사용하는 `:nth-child` 가상 클래스.
    + '.'같은 동일한 문자에 모든 셀 내용을 정렬할 때 사용하는 `text-align` 속성.


<code>: 인라인 코드 요소 - HTML: Hypertext Markup Language

<code>: 인라인 코드 요소
=================

**HTML `<code>` 요소**는 짧은 코드 조각을 나타내는 스타일을 사용해 자신의 콘텐츠를 표시합니다. 기본 스타일은 사용자 에이전트의 고정폭 글씨체입니다.

시도해보기
-----

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

특성
--

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

예제
--

```html
<p>
  함수 <code>selectAll()</code>는 입력 필드의 모든 텍스트를 선택하므로, 사용자가
  복사 혹은 삭제를 손쉽게 할 수 있습니다.
</p>
```

참고
--

여러 줄의 코드를 나타내려면 `<code>` 요소를 `<pre>`로 감싸세요. 보통 상황에서 `<code>`는 코드 한 줄만 나타냅니다.

CSS `code` 태그 선택자를 사용해 브라우저의 기본 글씨체를 바꿀 수 있습니다. 그러나 사용자 설정이 CSS보다 우선할 수도 있습니다.

명세
--

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

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

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

같이 보기
-----

* `<samp>`
* `<kbd>`
* `<var>`
* `<pre>`


<b> - HTML: Hypertext Markup Language

<b>
===

**HTML `<b>` 요소**는 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 `<b>`를 사용해 텍스트를 꾸미면 안됩니다. 대신 CSS `font-weight`를 사용해 굵은 글씨체를 적용하거나, `<strong>` (en-US) 요소를 사용해 특별히 중요한 텍스트를 나타내세요.

시도해보기
-----

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

특성
--

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

사용 일람
-----

* 요약 키워드, 리뷰의 제품명 등, 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분에 `<b>`를 사용하세요.
* `<b>` 요소와 `<strong>` (en-US), `<em>`, `<mark>` 요소를 혼동하지 않도록 주의하세요. `<strong>` (en-US) 요소는 **중요**한 글을, `<em>` 요소는 약간의 강조가 필요한 글을, `<mark>` 요소는 관련성이 있는 글을 나타냅니다. `<b>` 요소는 아무런 의미도 갖지 않으므로 다른 요소가 적합하지 않을 때만 사용하세요.
* 비슷한 이유로 `<b>` 요소로만 제목을 만들어선 안됩니다. 제목은 `<h1>`에서 `<h6>` 태그로 표현하세요. 특히 스타일 시트를 사용해 제목 요소의 스타일을 바꿀 수 있다는 점을 생각해보면, 제목이 꼭 굵은 글씨체일 필요는 없습니다.
    + It is a good practice to use the **class** attribute on the `<b>` in order to convey additional semantic information (for example `<b class="lede">` for the first sentence in a paragraph). This eases the development of several stylings of a web document, without the need to change its HTML code.
* 과거 `<b>` 요소는 굵을 글씨를 만들 때 사용했습니다. HTML4부터 스타일 정보는 사용하지 않으므로 `<b>` 요소의 의미도 바뀌었습니다.
* <b>의 의미와 관계 없이 굵은 글씨를 사용하고 있다면, CSS `font-weight` 속성의 `"bold"` 값을 사용하는 방법을 고려하세요.
예제
--

```html
<p>
  This article describes several <b class="keywords">text-level</b> elements. It
  explains their usage in an <b class="keywords">HTML</b> document.
</p>
Keywords are displayed with the default style of the
<b>element, likely in bold</b>.
```

### 결과

명세
--

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

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

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

같이 보기
-----

* <b>와 <i> 요소 사용하기 (W3C)


<frameset> - HTML: Hypertext Markup Language

<frameset>
==========

**지원이 중단되었습니다:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

요약
--

`<frameset>`은 HTML element로써 `<frame>` (en-US) element을 포함하고 사용된다.

>
> \*\*참고:\*\*frame의 사용이 지금 `<iframe>` (en-US)의 사용에 따라줄어드는 추세이기 때문에 , 이 element는 최근 웹사이트에서 잘 쓰이지 않는다.
>
>
>

속성(=Attributes)
---------------

다른 모든 HTML elments와 마찬가지로, `<frameset>` element는 전역속성(global attributes)이 적용된다.

`cols`

이 속성은 프레임셋안의 가로공간의 갯수와 크기를 정합니다.

`rows`

이 속성은 프레임셋안의 세로공간의 갯수와 크기를 정합니다.

예시
--

```html
<frameset cols="50%,50%">
  <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
</frameset>
```

참조
--

* `<frame>` (en-US)
* `<iframe>` (en-US)


<datalist> - HTML: Hypertext Markup Language

<datalist>
==========

**HTML `<datalist>` 요소**는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 `<option>` 요소 여럿을 담습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 구문 콘텐츠, 또는 0개 이상의 `<option>` 요소. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | `listbox` (en-US) |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLDataListElement` (en-US) |

특성
--

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

예제
--

```html
<label for="myBrowser">아래 목록에서 브라우저를 선택하세요:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Internet Explorer"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>
```

### 결과

명세
--

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

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

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

폴리필
---

datalist-polyfill을 추가해 구형 브라우저에서 `<datalist>` 지원을 추가하세요.

같이 보기
-----

* `<input>` (en-US) 요소와 `list` (en-US) 특성
* `<option>` 요소


<body>: 문서 본문 요소 - HTML: Hypertext Markup Language

<body>: 문서 본문 요소
================

**HTML `<body>` 요소**는 HTML 문서의 내용을 나타냅니다. 한 문서에 하나의 `<body>` 요소만 존재할 수 있습니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 구획 루트. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 |
 태그 내의 첫번째 것이 공백, 주석, `<script>`요소,
 `<style>`요소가 아닐경우 시작태그를 생략할수
 있습니다. body 요소가 시작태그를 가지고있고, 바로 뒤에 주석이 따라오지
 않는다면 종료 태그를 생략할수 있습니다.
  |
| 가능한 부모 요소 | `<html>` 요소의 두번째 요소여야 합니다. |
| 암시적 ARIA 역할 | `document` (en-US) |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLBodyElement` (en-US)* `<body>` 요소는
 `HTMLBodyElement` (en-US) 인터페이스를 노출합니다.
* `document.body` 속성을 통해
 `<body>` 요소에 접근할 수 있습니다.
 |

특성
--

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

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

선택한 하이퍼텍스트 링크의 색. *이 방법은 적합하지 않습니다. CSS `color` 속성과 `:active`의 조합을 대신 사용하세요.*

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

배경 이미지의 URI. *이 방법은 적합하지 않습니다. CSS `background` 속성을 대신 적용하세요.*

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

배경색. *이 방법은 적합하지 않습니다. CSS `background-color` 속성을 대신 적용하세요.*

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

아래쪽 여백. *이 방법은 적합하지 않습니다. CSS `margin-bottom` 속성을 대신 적용하세요.*

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

왼쪽 여백. *이 방법은 적합하지 않습니다. CSS `margin-left` 속성을 대신 적용하세요.*

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

방문하지 않은 하이퍼텍스트 링크의 색. *이 방법은 적합하지 않습니다. CSS `color` 속성과 `:link`의 조합을 대신 사용하세요.*

`onafterprint`

사용자가 문서를 출력한 뒤 호출할 함수.

`onbeforeprint`

사용자가 문서 출력을 요청했을 때 호출할 함수.

`onbeforeunload`

문서를 처분unload하기 직전에 호출할 함수.

`onblur`

문서가 포커스를 상실했을 때 호출할 함수.

`onerror`

문서를 제대로 불러오지 못했을 때 호출할 함수.

`onfocus`

문서가 포커스를 받을 때 호출할 함수.

`onhashchange`

문서의 현재 주소 중 Fragment identifier part(해시(`'#'`) 문자로 시작)가 변경됐을 때 호출할 함수.

`onlanguagechange`
Experimental

선호 언어 변경 시 호출할 함수.

`onload`

문서를 다 불러왔을 때 호출할 함수.

`onmessage`

문서가 메시지를 받았을 때 호출할 함수.

`onoffline`

네트워크 연결이 실패했을 때 호출할 함수.

`ononline`

네트워크 연결을 복구했을 때 호출할 함수.

`onpopstate`

사용자가 세션 기록을 따라 이동했을 때 호출할 함수.

`onredo`

사용자가 되돌리기 변경 기록(undo transaction history)에서 다시 이후로 이동했을 때 호출할 함수.

`onresize`

문서의 크기가 바뀔 때 호출할 함수.

`onstorage`

저장 영역이 변경되었을 때 호출할 함수.

`onundo`

사용자가 되돌리기 변경 기록(undo transaction history)에서 이전으로 이동했을 때 호출할 함수.

`onunload`

문서를 처분(unload) 중일 때 호출할 함수.

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

오른쪽 여백. *이 방법은 적합하지 않습니다. CSS `margin-right` 속성을 대신 적용하세요.*

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

글자의 전경색. *이 방법은 적합하지 않습니다. CSS `color` 속성을 대신 적용하세요.*

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

위쪽 여백. *이 방법은 적합하지 않습니다. CSS `margin-top` 속성을 대신 적용하세요.*

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

방문했던 하이퍼텍스트 링크의 색. *이 방법은 적합하지 않습니다. CSS `color` 속성과 `:visited`의 조합을 대신 사용하세요.*

예제
--

```html
<html>
  <head>
    <title>문서 제목</title>
  </head>
  <body>
    <p>문단입니다</p>
  </body>
</html>
```

명세
--

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

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

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

같이 보기
-----

* `<html>`
* `<head>`


<footer> - HTML: Hypertext Markup Language

<footer>
========

**HTML `<footer>` 요소**는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

* `<address>` 요소로 감싼 작성자 정보를 `<footer>` 요소에 배치하세요.
* `<footer>` 요소는 구획 콘텐츠가 아니므로 개요에 새로운 구획을 추가하지 않습니다.
예제
--

```html
<footer>
  Some copyright info or perhaps some author info for an <article>?
</footer>
```

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

VoiceOver 스크린 리더는 랜드마크 로터에서 푸터의 랜드마크 역할을 표현하지 않는 문제가 있습니다. 해결하려면 `<footer>`에 `role="contentinfo"`를 추가하세요.

* WebKit Bugzilla: 146930 – AX: HTML native elements (header, footer, main, aside, nav) should work the same as ARIA landmarks, sometimes they don't
명세
--

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

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

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

같이 보기
-----

* 다른 구획 관련 요소들: `<body>`, `<nav>`, `<article>`, `<aside>`, `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<hgroup>`, `<header>`, `<section>`, `<address>`


<dl> - HTML: Hypertext Markup Language

<dl>
====

**HTML `<dl>` 요소**는 설명 목록을 나타냅니다. `<dl>`은 `<dt>`로 표기한 용어와 `<dd>` 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성합니다. 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용합니다.

시도해보기
-----

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.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠. `<dl>`의 자식 중 이름-값 그룹이 있으면 뚜렷한 콘텐츠. |
| 가능한 콘텐츠 |
 하나 이상의 `<dt>` 요소와 하나 이상의
 `<dd>` 요소로 구성한 그룹 0개 이상. 선택적으로
 `<script>`와
 `<template>`을 혼합 가능.또는, 하나
 이상의 `<div>` (en-US). 선택적으로
 `<script>`, `<template>`
 혼합 가능.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | `group` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLDListElement` (en-US) |

특성
--

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

예제
--

### 하나의 용어와 하나의 정의

```html
<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>
```

### 여러 개의 용어와 하나의 정의

```html
<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>
```

### 하나의 용어와 여러 개의 정의

```html
<dl>
  <dt>Firefox</dt>
  <dd>
    Mozilla 재단과 수 백명의 자원봉사자가 개발한 무료 오픈소스 크로스 플랫폼
    그래픽 웹 브라우저.
  </dd>
  <dd>
    붉은 판다, 레서 판다, 랫서 판다, 혹은 "Firefox"는 초식성 포유류이다. 몸
    길이는 애완용 고양이보다 약간 큰 정도인 60cm다.
  </dd>

  <!-- 다른 용어 및 정의 -->
</dl>
```

### 여러 개의 용어와 여러 개의 정의

위의 예제를 결합하여 여러 용어를 여러 정의와 연결하는 것도 가능합니다.

### 메타데이터

`<dl>`은 메타데이터를 키-값 쌍으로 표시할 때도 유용합니다.

```html
<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>
```

팁: 아래처럼 키-값 구분자를 CSS로 지정하면 편리합니다.

```css
dt:after {
  content: ": ";
}
```

### 이름-값 그룹을 `<div>` (en-US)로 감싸기

WHATWG HTML에서는 `<dl>` 안 각각의 이름-값 그룹을 `<div>` (en-US)로 감쌀 수 있습니다. 마이크로데이터를 사용할 때, 그룹에 전역 특성을 적용할 때, 아니면 스타일을 적용할 때 유용할 수 있습니다.

```html
<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>
```

참고
--

페이지에서 들여쓰기를 하기 위한 목적으로 `<dl>` (또는 `<ul>`) 요소를 사용하지 마세요. 작동할 수는 있으나 좋지 않은 방법이고, 설명 목록의 원래 목적을 흐립니다.

용어의 들여쓰기를 수정하려면 CSS `margin` 속성을 사용하세요.

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

각각의 스크린 리더는 `<dl>`을 다르게 표현합니다. iOS의 VoiceOver 등 일부 스크린 리더는 `<dl>`의 콘텐츠를 리스트로 표현하지 않습니다. 따라서, 각 아이템의 콘텐츠는 리스트 그룹 내 다른 항목과의 관계를 표현할 수 있는 방식으로 작성해야 합니다.

* CodePen - HTML Buddies: dt & dd
명세
--

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

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

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

같이 보기
-----

* `<dt>` 요소
* `<dd>` 요소


표준 메타데이터 이름 - HTML: Hypertext Markup Language

표준 메타데이터 이름
===========

`<meta>` 요소는 `name` 특성을 메타데이터 이름으로, `content` 특성을 값으로 하여 문서 메타데이터를 이름-값 쌍의 형태로 제공할 때 사용할 수 있습니다.

### HTML 명세가 정의하는 표준 메타데이터 이름

HTML 명세는 다음과 같은 표준 메타데이터 이름을 정의하고 있습니다.

* `application-name`: 웹 페이지에서 구동 중인 애플리케이션의 이름.

**참고:**- 브라우저가 이 값을 사용해 애플리케이션을 식별할 수 있습니다. `<title>` 요소 역시 보통 애플리케이션 이름을 포함하지만, `application-name`과는 달리 문서 이름이나 상태 등 다른 정보도 존재할 수 있다는 점에서 차이가 있습니다.

    + 단순한 웹 페이지에서는 `application-name`을 지정하지 말아야 합니다.
* `author`: 문서 저작자.
* `description`: 페이지에 대한 짧고 정확한 요약. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 `description` 메타데이터를 사용합니다.
* `generator`: 페이지를 생성한 소프트웨어의 식별자.
* `keywords`: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.
* `referrer`: 문서에서 시작하는 요청의 HTTP `Referer` 헤더를 아래 표와 같이 통제합니다.

| `no-referrer` | HTTP `Referer` 헤더를 전송하지 않습니다. |
| --- | --- |
| `origin` | 문서의 출처를 전송합니다. |
| `no-referrer-when-downgrade` | 목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 전체 URL을 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다. 기본 동작 방식입니다. |
| `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을 전송합니다. |

**참고:**- `<meta name="referrer">`의 값을 `document.write()` (en-US) 또는 `appendChild()`를 사용해 동적으로 삽입할 경우 레퍼러 동작을 예측할 수 없습니다.

    + 여러 정책이 서로 충돌할 경우에는 `no-referrer` 정책을 사용합니다.
* `theme-color` (en-US): 사용자 에이전트가 페이지 혹은 주위의 사용자 인터페이스를 표시할 때 사용해야 할 색상에 대한 힌트. `content` 특성은 유효한 CSS `<color>` 색상을 포함해야 합니다.
### 다른 명세가 정의하는 표준 메타데이터 이름

CSS Color Adjustment 명세는 다음과 같은 메타데이터 이름을 정의합니다.

* `color-scheme`: 문서와 호환되는 하나 이상의 색채 조합.
 브라우저는 이 정보에 더해 자신과 장치의 사용자 설정을 함께 사용해 배경, 전경, 양식 컨트롤, 스크롤 바 등 대부분의 색상을 결정합니다. `<meta name="color-scheme">`의 주 용도는 문서의 "다크 모드"와 "라이트 모드"중 호환 가능한 조합 및 둘 중 선호하는 쪽을 나타내는 것입니다.
 `color-scheme`과 사용 가능한 `content` 특성의 값은 다음과 같습니다.

`normal`

문서가 특별한 색채 조합을 알지 못합니다. 렌더링 시 기본 색상 팔레트를 사용해야 합니다.

[`light` | `dark`]+

문서와 호환되는 하나 이상의 색채 조합. 동일한 색채 조합을 여러 번 지정하더라도 한 번 지정한 것과 다르지 않습니다. 여러 색채 조합을 명시하는 경우 문서는 맨 앞 항목을 선호하지만, 사용자가 원할 경우 다른 조합도 사용할 수 있음을 나타냅니다.

`only light`

문서가 오직 라이트 모드, 즉 밝은 배경과 어두운 전경색만 지원함을 나타냅니다. 명세에 따라 `only dark`는 유효하지 않습니다. 완전히 호환되지 않음에도 불구하고 문서를 다크 모드로만 렌더링 할 경우 콘텐츠를 읽을 수 없기 때문입니다. 지정하지 않은 경우, 모든 주요 브라우저는 라이트 모드를 기본값으로 사용합니다.

예를 들어, 문서가 다크 모드를 선호하나 라이트 모드도 지원 가능하다는 것을 알리려면 다음과 같이 작성하세요.

```html
<meta name="color-scheme" content="dark light" />
```

`name="color-scheme"`은 문서 전체의 선호 및 가능한 색채 조합을 지정한다면, CSS `color-scheme` (en-US) 속성은 개별 요소 단위로 지정합니다. CSS `prefers-color-scheme` 미디어 기능을 사용하면 스타일이 현재 색채 조합에 적응하도록 작성할 수도 있습니다.

CSS Device Adaptation 명세는 다음과 같은 메타데이터 이름을 정의합니다.

* `viewport`: 뷰포트의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용합니다.

| 값 | 가능한 하위 값 | 설명 |
| --- | --- | --- |
| `width` | 양의 정수 또는 `device-width` | 웹 사이트를 렌더링 하고자 하는 뷰포트 너비를 정의합니다. |
| `height` | 양의 정수 또는 `device-height` | 웹 사이트를 렌더링 하고자 하는 뷰포트 높이를 정의합니다. |
| `initial-scale` | `0.0`과 `10.0` 사이의 수 | 장치 너비(세로 모드에서는 `device-width`, 가로 모드에서는 `device-height`)와 뷰포트 너비의 비율을 정의합니다. |
| `maximum-scale` | `0.0`과 `10.0` 사이의 수 | 가능한 최대 확대 비율을 정의합니다. `minimum-scale` 이상이어야 하며, 미만으로 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다. |
| `minimum-scale` | `0.0`과 `10.0` 사이의 수 | 가능한 최소 확대 비율을 정의합니다. `maximum-scale` 이하여야 하며, 초과한 값을 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다. |
| `user-scalable` | `yes` 또는 `no` | `no`인 경우 사용자가 웹 페이지를 확대할 수 없습니다. 기본값은 `yes`입니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다. |
| `viewport-fit` | `auto`, `contain`, `cover` | `auto` 값은 초기 뷰포트 레이아웃에 영향을 주지 않으며, 전체 웹 페이지를 볼 수 있습니다.`contain` 값은 디스플레이 내에 맞출 수 있는 가장 큰 사각형에 맞춰 뷰포트의 크기를 조절합니다.`cover` 값은 뷰포트의 크기를 조절해 디스플레이 전체를 채웁니다. 안전 영역 (en-US) 환경 변수를 사용해 중요한 콘텐츠가 화면 밖에 놓이는 불상사가 없도록 하는 것이 좋습니다. |

**참고:**- 비록 표준은 아니지만, `viewport`의 사실상 표준적인 위치로 인해 대부분의 모바일 브라우저가 선언을 준수합니다.

    + 장치와 브라우저마다 기본값이 다를 수 있습니다.

##### Accessibility concerns with viewport scaling

`user-scalable` 을 `no` 로 지정해 확대 기능을 비활성화하면 저시력 사용자가 페이지의 내용을 읽고 이해하는 것을 방해합니다.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
### 다른 메타데이터 이름

WHATWG Wiki MetaExtensions 페이지는 거대한 수의 비표준 메타데이터 목록을 포함합니다. 그러나 다음 메타데이터 이름을 포함한 일부 항목은 실제로도 꽤 자주 사용하고 있습니다.

* `creator`: 단체, 협회 등 문서 저작자의 이름. 다수의 저작자가 존재할 경우 다수의 `<meta>` 요소를 사용해야 합니다.
* `googlebot`은 `robots`의 동의어로, Googlebot(Google의 색인 크롤러)만 준수합니다..
* `publisher`: 문서를 출판한 자의 이름.
* `robots`: 협조적인 크롤러, 또는 "로봇"의 동작을 지정합니다. 아래 표의 항목을 쉼표로 구분한 목록을 값으로 사용합니다

| 값 | 설명 | 사용처 |
| --- | --- | --- |
| `index` | 크롤러가 페이지를 색인할 수 있습니다. (기본값) | 모두 |
| `noindex` | 크롤러가 페이지를 색인하지 않도록 요청합니다. | 모두 |
| `follow` | 크롤러가 페이지 내의 링크를 따라갈 수 있습니다. (기본값) | 모두 |
| `nofollow` | 크롤러가 페이지 내의 링크를 따라가지 않도록 요청합니다. | 모두 |
| `all` | `index, follow`와 동일합니다. | Google |
| `none` | `noindex, nofollow`와 동일합니다. | Google |
| `noarchive` | 크롤러가 페이지를 캐시에 포함하지 않도록 요청합니다. | Google, Bing |
| `nosnippet` | 검색 엔진 결과에 어떤 설명도 표시하지 않도록 지정합니다. | Google, Bing |
| `noimageindex` | 크롤러가 페이지 이미지를 색인하지 않도록 요청합니다. | Google |
| `nocache` | `noarchive`와 동일합니다. | Bing |

**참고:**- 협조적인 크롤러만 규칙을 존중합니다. 이메일 주소 수집기가 요청을 따를 것이라고 기대하지 마세요.

    + 메타 태그의 규칙을 읽기 위해선 크롤러가 페이지에 접근을 하긴 해야 합니다. 대역폭을 아끼려면 robots.txt를 사용하세요.
    + 이미 등록된 페이지를 검색 결과에서 제거할 수단으로 `noindex`를 사용하는 것도 가능하지만, 수정 후 크롤러가 페이지에 재방문해야만 반영되므로 `robots.txt` 파일이 방문을 방지하고 있지는 않은지 확인하세요.
    + `index`와 `noindex`, `follow`와 `nofollow`처럼 특정 값은 서로 배타적입니다. 그러나 같은 페이지에서 동시에 사용한 경우 크롤러의 행동은 정의되지 않았으며 둘 중 어느 것이라도 취할 수 있습니다.
    + Google과 Bing 등 일부 크롤러는 위의 값을 HTTP `X-Robot-Tags` 헤더에 추가해도 인식하므로, 이미지처럼 HTML이 아닌 문서에서도 동일한 설정을 적용할 수 있습니다.
명세
--

| Specification |
| --- |
| HTML Standard # standard-metadata-names |
| Referrer Policy # referrer-policy-delivery-meta |

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

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


<input type="file"> - HTML: Hypertext Markup Language

<input type="file">
===================

**`file`** 유형의 `<input>` (en-US) 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| **값** | 선택한 파일의 경로를 나타내는 `DOMString`. |
| **이벤트** | `change`,
 `input` |
| **지원하는 공통 특성** | `required` (en-US) |
| **추가 특성** | `accept`,
 `capture`,
 `files`,
 `multiple` |
| **IDL 특성** | `files`, `value` |
| **DOM 인터페이스** | `HTMLInputElement` (en-US) |
| **메서드** | `select()` (en-US) |

값
-

파일 입력 칸의 `value` (en-US) 특성은 선택한 파일의 경로를 나타내는 `DOMString`을 담습니다. 사용자가 여러 개의 파일을 선택한 경우 `value`는 파일 목록의 첫 번째 파일을 가리키며, 나머지 파일은 요소의 `HTMLInputElement.files` (en-US) 속성으로 가져올 수 있습니다.

>
> \*\*참고:\*\*1. 아직 아무런 파일도 선택하지 않은 경우 빈 문자열(`""`)을 사용합니다. 2. 악의적인 소프트웨어가 사용자의 파일 구조를 알아내는 것을 방지하기 위해, 값 문자열은 항상 C:\fakepath\를 앞에 포함합니다.
>
>
>

추가 특성
-----

모든 `<input>` (en-US) 요소의 공용 특성 외에도, `file` 유형은 아래의 특성도 지원합니다.

| 특성 | 설명 |
| --- | --- |
| `accept` | 허용하는 파일 유형을 나타내는 하나 이상의 고유 파일 유형 지정자 |
| `capture` | 이미지 또는 비디오 데이터를 캡처할 때 사용할 방법 |
| `files` | 선택한 파일을 나열하는 `FileList` |
| `multiple` | 지정할 경우 사용자가 여러 개의 파일을 선택할 수 있음 |

### `accept`

`accept` (en-US) 특성은 파일 입력 칸이 허용할 파일 유형을 나타내는 문자열로, 쉼표로 구분한 **고유 파일 유형 지정자**의 목록입니다. 주어진 파일 유형의 식별 방법이 여러 가지일 수도 있으므로, 특정 파일 형식이 필요할 땐 유형의 집합을 제공하는 것이 좋습니다.

예를 들어, Microsoft Word 파일을 식별하는 방법은 여러가지이므로, Word 파일을 허용하는 `<input>`은 다음과 같은 형태를 갖게 됩니다.

```html
<input
 type="file"
 id="docpicker"
 accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
```

### `capture`

`accept` (en-US) 특성이 이미지나 비디오 캡처 데이터를 요구할 경우, `capture` (en-US) 특성으로는 어떤 카메라를 사용할지 지정할 수 있습니다. `user` 값은 전면 카메라(사용자를 향한 카메라)와 마이크를, `environment` 값은 후면 카메라와 마이크를 사용해야 함을 나타냅니다. `capture` 특성을 누락한 경우 사용자 에이전트가 어떤 쪽을 선택할지 스스로 결정합니다. 요청한 방향의 카메라를 사용할 수 없는 경우 사용자 에이전트는 자신이 선호하는 기본 모드로 대체할 수 있습니다.

**참고:** `capture`는 과거 불리언 특성이었으며, 존재할 경우 파일 선택 창을 요청하는 대신 장치의 카메라나 마이크 등 미디어 캡처 장치를 요청했었습니다.

### `files`

선택한 모든 파일을 나열하는 `FileList` 객체입니다. `multiple` 특성을 지정하지 않았다면 두 개 이상의 파일을 포함하지 않습니다.

### `multiple`

`multiple` (en-US) 불리언 특성을 지정한 경우 사용자가 파일 선택 창에서 복수의 파일을 선택할 수 있습니다.

비표준 특성
------

위의 표준 특성 외에도, 다음과 같이 일부 브라우저에서만 사용할 수 있는 비표준 특성도 존재합니다. 지원하지 않는 브라우저에서의 코드 동작에 제약이 생길 수 있으므로, 가능하면 사용을 피해야 합니다.

| 특성 | 설명 |
| --- | --- |
| `webkitdirectory` | 사용자가 디렉토리를 선택할 수 있는지 나타내는 불리언 특성. `multiple` 특성을 지정한 경우 복수 선택 가능 |

### `webkitdirectory`
비표준

`webkitdirectory` 불리언 특성이 존재할 경우 사용자의 파일 선택 창에서 디렉토리만 선택 가능해야 함을 나타냅니다. `HTMLInputElement.webkitdirectory` (en-US) 문서를 방문해 보다 자세한 정보와 예제를 알아보세요.

**참고:** `webkitdirectory`는 원래 WebKit 기반 브라우저에서만 구현했었으나, Microsoft Edge와 Firefox(50 이상)도 지원합니다. 그러나, 비록 상대적으로 널리 지원하고는 있으나, 여전히 비표준 특성이므로 대안이 없는 경우에만 사용해야 합니다.

고유 파일 유형 지정자
------------

**고유 파일 유형 지정자**는 `file` 유형의 `<input>` (en-US)에서 선택할 수 있는 파일의 종류를 설명하는 문자열입니다. 각각의 유형 지정자는 다음 형태 중 하나를 취할 수 있습니다.

* 마침표로 시작하는 유효한 파일 이름 확장자. 대소문자를 구분하지 않습니다. 예시: `.jpg`, `.pdf`, `.doc`.
* 확장자를 포함하지 않은 유효한 MIME 유형 문자열.
* `audio/*`는 "모든 오디오 파일"을 의미합니다.
* `video/*`는 "모든 비디오 파일"을 의미합니다.
* `image/*`는 "모든 이미지 파일"을 의미합니다.

`accept` 특성이 고유 파일 유형 지정자를 값으로 받습니다. 쉼표로 구분하면 여러 개의 지정자도 사용할 수 있습니다. 예를 들어, 표준 이미지 형식 뿐만 아니라 PDF 파일도 받을 수 있어야 하는 입력 칸은 다음 코드처럼 작성할 수 있습니다.

```html
<input type="file" accept="image/\*,.pdf" />
```

파일 입력 칸 사용하기
------------

### 기본 예제

```html
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to upload</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
}
```

결과는 다음과 같습니다.

**참고:** 이 예제는 GitHub에서도 볼 수 있습니다. 소스 코드와 라이브 예제를 확인하세요.

사용자의 장치와 운영체제에 상관없이, 파일 입력 칸은 사용자가 파일을 선택할 수 있도록 파일 선택 대화창을 여는 하나의 버튼을 제공합니다.

예제 코드와 같이 `multiple` 특성을 지정한 경우 파일 여러 개를 한 번에 선택할 수 있습니다. 사용자는 플랫폼이 허용하는 방법(`Shift`, `Ctrl` 누르기 등)을 통해 파일 선택 창에서 두 개 이상의 파일을 선택합니다. `<input>` 하나에 파일 하나씩만 선택을 허용하고 싶은 경우 `multiple` 특성을 제거하세요.

### 선택한 파일의 정보 가져오기

요소의 `HTMLInputElement.files` (en-US) 속성은 선택한 파일(`File`) 목록을 `FileList` 객체로 반환합니다. `FileList`는 배열처럼 행동하므로, `length` 속성을 사용해 현재 선택한 파일의 수를 알 수 있습니다.

각각의 `File` 객체는 다음과 같은 정보를 가지고 있습니다.

`name`

파일 이름.

`lastModified`

파일을 마지막으로 수정한 시각을 나타내는 숫자. UNIX 표준시(1970년 1월 1일 자정)으로부터 지난 시간을 밀리초 단위로 나타낸 값입니다.

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

파일을 마지막으로 수정한 시각을 나타내는 `Date` 객체. 더 이상 사용하지 않아야 합니다. `lastModified`를 대신 사용하세요.

`size`

파일의 크기를 바이트 단위로 나타낸 값.

`type`

파일의 MIME 유형.

`webkitRelativePath`
비표준

`webkitdirectory` 특성을 사용한 경우, 기준 디렉토리에 대한 파일의 상대적인 경로. 비표준 특성이므로 사용에 주의가 필요합니다.

**Note**: You can set as well as get the value of `HTMLInputElement.files` in all modern browsers; this was most recently added to Firefox, in version 57 (see [Firefox bug 1384030](https://bugzil.la/1384030)).

### 가능한 파일 유형 제한하기

종종, 사용자가 아무 파일이나 선택하지 못하도록 제한하고, 받을 수 있는 파일의 유형을 정해두고 싶을 때가 있습니다. 예를 들어, 프로필 사진을 받는 입력 칸의 경우, JPEG, PNG처럼 웹 호환 가능한 이미지 형식을 선택하도록 해야 할 것입니다.

허용하는 파일 유형은 `accept` 특성을 사용해 지정할 수 있으며, 허용할 파일 확장자나 MIME 유형을 쉼표로 구분한 값을 제공해야 합니다. 다음은 몇 가지 예시입니다.

* `accept="image/png"` or `accept=".png"` — PNG 파일을 허용합니다.
* `accept="image/png, image/jpeg"` 또는 `accept=".png, .jpg, .jpeg"` — PNG와 JPEG를 허용합니다.
* `accept="image/*"` — `image/*` MIME 유형을 가진 모든 파일을 허용합니다. 많은 모바일 기기에서는, 이 값을 지정할 경우 사용자가 카메라로 사진을 찍을 수 있도록 설정합니다.
* `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — MS Word 문서처럼 보이는 파일을 모두 허용합니다.

보다 완전한 예제 코드를 보겠습니다.

```html
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile\_pic">Choose file to upload</label>
    <input
 type="file"
 id="profile\_pic"
 name="profile\_pic"
 accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
}
```

위 코드는 이전 예제와 비슷하게 보이는 결과를 냅니다.

**참고:** GitHub에서도 볼 수 있습니다. 소스 코드, 라이브 실행 결과.

외형은 유사해 보일지라도, 이번 예제에서 파일을 선택하려고 한다면 `accept`에 지정한 파일 유형만 선택 가능함을 확인할 수 있습니다. (정확한 동작은 브라우저와 운영체제에 따라 다를 수 있습니다)

![Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable.](/ko/docs/Web/HTML/Element/input/file/file-chooser.png)

`accept` 특성은 선택한 파일 유형을 검증하지는 않으며, 단순히 브라우저가 사용자를 올바른 파일 유형으로 유도하도록 힌트를 제공할 뿐입니다. (대부분의 경우) 사용자가 파일 선택 창의 옵션을 설정해 `accept`를 덮어쓰고 자신이 원하는 아무 파일이나 선택할 수 있으므로, 파일 입력 칸에 잘못된 유형의 파일이 올 수 있습니다.

그러므로, 반드시 적절한 서버 사이드 유효성 검증을 통해 `accept` 특성을 보조해야 합니다.

### 참고

1. 파일 입력 칸의 값을 스크립트에서 설정할 수는 없습니다. 따라서 다음 코드는 아무런 효과도 내지 않습니다.

```js
const input = document.querySelector("input[type=file]");
input.value = "foo";
```

2. `<input type="file">` 로 선택한 원본 파일의 실제 경로는 명확한 보안상 문제로 인해 알 수 없습니다. 대신 앞에 `C:\fakepath\` 를 붙인 파일 이름을 경로로 보여줍니다. 하필 이런 모습이 된 것에는 역사적인 이유가 있지만 이 동작은 모든 최신 브라우저에서 지원하고 있으며, 사실 명세에도 포함되어 있습니다.
예제
--

이번 예제에서는 좀 더 발전된 파일 선책 창을 만들어 보겠습니다. `HTMLInputElement.files` 속성에서 알 수 있는 정보도 활용하면서, 몇 가지 재밌는 활용법도 보여드리겠습니다.

**참고:** 전체 소스 코드는 GitHub에 있습니다. file-example.html (라이브 실행 결과). 주 목적이 JavaScript이므로 CSS는 따로 설명하지 않겠습니다.

우선 HTML을 살펴보겠습니다.

```html
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image\_uploads">Choose images to upload (PNG, JPG)</label>
    <input
 type="file"
 id="image\_uploads"
 name="image\_uploads"
 accept=".jpg, .jpeg, .png"
 multiple />
  </div>
  <div class="preview">
    <p>No files currently selected for upload</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

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

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
```

지금까지 봤던 것과 거의 같으므로 설명할 부분은 없겠습니다.

이제 JavaScript 차례입니다.

우선 양식의 파일 입력 칸과, `.preview` 클래스를 가진 `<div>` (en-US) 요소에 대한 참조를 가져옵니다. 그 후, `<input>` (en-US) 요소를 숨겨버립니다. 파일 입력 칸은 보통 못생겼고, 스타일을 적용하기도 어려우며 브라우저마다 디자인이 다르기 때문입니다. `<input>`은 연결된 `<label>`을 클릭해도 활성화할 수 있으므로, 시각적으로 `<input>`을 숨긴 후 레이블에 버튼처럼 스타일을 적용해서, 파일을 업로드하고 싶은 경우 레이블을 누르라는 것을 알려주는 편이 낫습니다.

```js
var input = document.querySelector("input");
var preview = document.querySelector(".preview");

input.style.opacity = 0;
```

**참고:** `visibility: hidden`, `display: none` (en-US)로 숨길 경우 접근성 보조 기술이 파일 입력 칸을 상호작용 할 수 없는 상태라고 인식하기 때문에 `opacity`를 대신 사용합니다.

그 다음으로는 입력 칸에 이벤트 수신기를 부착해 그 값이 달라지는지(예제의 경우, 파일을 선택할 때) 지켜봅니다. 이벤트 수신기는 밑에서 만들 `updateImageDisplay()` 함수를 호출하게 됩니다.

```js
input.addEventListener("change", updateImageDisplay);
```

`updateImageDisplay()` 함수를 호출하면 다음 작업을 수행하게 됩니다.

* `while` 반복문을 사용해 `<div>`에 존재하는 이전 파일의 미리보기를 제거합니다.
* 선택한 모든 파일의 정보를 들고 있는 `FileList` 객체를 가져온 후 `curFiles` 변수에 저장합니다.
* `curFiles.length`가 0과 같은지 검사해 아무런 파일도 선택하지 않았는지 검사합니다. 그렇다면, `<div>`에 아무런 파일도 선택하지 않았다는 메시지를 출력합니다.
* 반면, 파일을 선택한 경우라면, 각각의 파일을 순회하며 각각의 정보를 미리보기 `<div>`에 출력합니다. 참고할 점:
* 뒤에서 작성할 `validFileType()` 함수를 사용해 순회 중인 파일이 올바른 유형, 즉 `accept` 특성에 속한 파일인지 판별합니다.
* 올바른 파일이라면,
    + `<div>` 안의 목록에 해당 파일의 이름과 크기를 항목으로 추가합니다. 이름은 `file.name`과 `file.size`로 가져옵니다. 또 다른 함수인 `returnFileSize()`는 파일 크기를 보기 좋게 바이트/KB/MB로 서식해 출력합니다. (브라우저는 바이트 크기로만 알려줍니다)
    + `URL.createObjectURL(curFiles[i])`를 호출해 이미지 미리보기 썸네일을 생성하고, 새로 만든 `<img>` 태그의 `src`에 지정한 후, 이미지도 목록의 항목에 추가합니다.
* 파일 유형이 유효하지 않은 경우 사용자에게 다른 파일을 선택해야 한다고 알려주는 메시지를 표시합니다.

```js
function updateImageDisplay() {
  while (preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  const curFiles = input.files;
  if (curFiles.length === 0) {
    const para = document.createElement("p");
    para.textContent = "No files currently selected for upload";
    preview.appendChild(para);
  } else {
    const list = document.createElement("ol");
    preview.appendChild(list);

    for (const file of curFiles) {
      const listItem = document.createElement("li");
      const para = document.createElement("p");
      if (validFileType(file)) {
        para.textContent = `File name ${file.name}, file size ${returnFileSize(
 file.size,
 )}.`;
        const image = document.createElement("img");
        image.src = URL.createObjectURL(file);

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}
```

`validFileType()` 함수는 매개변수로 `File` 객체를 받아서, 그 파일의 `type`이 `fileTypes`의 아무 값과 동일한지 판별합니다. `Array.prototype.includes()`를 사용하여 type과 일치하는 값이 존재하면 `true`, 아니면 `false`를 반환합니다.

```js
// https://developer.mozilla.org/ko/docs/Web/Media/Formats/Image\_types
const fileTypes = [
  "image/apng",
  "image/bmp",
  "image/gif",
  "image/jpeg",
  "image/pjpeg",
  "image/png",
  "image/svg+xml",
  "image/tiff",
  "image/webp",
  "image/x-icon",
];

function validFileType(file) {
  return fileTypes.includes(file.type);
}
```

`returnFileSize()` 함수는 숫자(현재 파일의 `size` 속성에서 가져온, 파일의 바이트 크기)를 받은 후, 읽기 좋게 바이트/KB/MB 단위로 서식을 적용합니다.

```js
function returnFileSize(number) {
  if (number < 1024) {
    return number + "bytes";
  } else if (number >= 1024 && number < 1048576) {
    return (number / 1024).toFixed(1) + "KB";
  } else if (number >= 1048576) {
    return (number / 1048576).toFixed(1) + "MB";
  }
}
```

결과는 다음과 같습니다. 한번 직접 파일을 선택해보세요.

명세
--

| Specification |
| --- |
| HTML Standard # file-upload-state-(type=file) |

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

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

같이 보 기
------

* 웹 애플리케이션에서 파일 사용하기 — `<input type="file">`과 File API에 대한 유용한 예제를 더 가지고 있습니다.
* CSS 속성 호환성 (en-US)


<input type="date"> - HTML: Hypertext Markup Language

<input type="date">
===================

**`date`** 유형의 `<input>` (en-US) 요소는 유효성 검증을 포함하는 텍스트 상자 또는 특별한 날짜 선택 인터페이스를 사용해 날짜를 입력할 수 있는 입력 칸을 생성합니다.

입력 칸의 값은 연, 월, 일을 포함하지만 시간은 포함하지 않습니다. time (en-US)과 datetime-local (en-US) 입력 유형이 시간과 시간+날짜 조합을 지원합니다.

시도해보기
-----

입력 UI는 브라우저마다 다릅니다. 브라우저 호환성에서 더 자세한 정보를 알아보세요. 날짜 입력 유형을 지원하지 않는 브라우저에서는 우아하게 `<input type="text">` (en-US)로 저하됩니다.

날짜 선택을 위한 별도의 인터페이스를 갖춘 브라우저 중, Chrome과 Opera는 다음과 같은 모양의 달력을 보여줍니다.

![A textbox containing "dd/mm/yyyy", an increment/decrement button combo, and a downward arrow that opens into a calendar control.](/ko/docs/Web/HTML/Element/input/date/date-picker-chrome.png)

구 Edge의 컨트롤입니다.

![A textbox containing "mm/dd/yyyy", but when interacted with, opens a tri-column date selector.](/ko/docs/Web/HTML/Element/input/date/date-picker-edge.png)

Firefox의 날짜 컨트롤입니다.

![Another "dd/mm/yyyy" textbox that expands into a selectable calendar control.](/ko/docs/Web/HTML/Element/input/date/firefox_datepicker.png)

|  |  |
| --- | --- |
| **값** |
 YYYY-MM-DD 형식으로 날짜를 나타내거나, 빈
 `DOMString`.
  |
| **이벤트** | `change`,
 `input` |
| **지원하는 공통 특성** | `autocomplete` (en-US),
 `list` (en-US),
 `readonly` (en-US),
 `step` (en-US) |
| **IDL 특성** | `list`, `value`, `valueAsDate`,
 `valueAsNumber`.
  |
| **메서드** | `select()` (en-US),
 `stepDown()` (en-US),
 `stepUp()` (en-US) |

값
-

날짜 입력 칸의 값은 입력한 날짜를 나타내는 `DOMString`입니다. 날짜는 유효한 날짜 문자열 문서에서 설명하듯, ISO8601을 따르는 서식을 취합니다.

`value` (en-US) 특성에 날짜를 지정해서 입력 칸의 기본값을 지정할 수 있습니다.

```html
<input type="date" value="2017-06-01" />
```

**표시 값과 실제 `value`의 불일치** — 입력 칸에 표시되는 값은 사용자 브라우저의 로케일에 기반한 서식을 따라가지만, `value`는 항상 `yyyy-mm-dd`의 서식을 사용합니다.

입력 요소의 날짜 값은 JavaScript의 `value`와 `valueAsNumber` 속성으로 설정할 수도 있습니다. 다음 예제 코드를 보세요.

```js
var dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a UNIX timestamp
```

위의 코드는 `type`이 `date`인 첫 번째 `<input>` (en-US) 요소를 찾아서, 값을 `2017-06-01`로 설정합니다. 그리고 값을 다시 문자열과 숫자 형태로 가져옵니다.

추가 특성
-----

모든 `<input>` (en-US) 요소의 공용 특성 외에도, `date` 유형은 아래의 특성도 지원합니다.

| 특성 | 설명 |
| --- | --- |
| `max` | 허용하는 가장 늦은 날짜 |
| `min` | 허용하는 가장 이른 날짜 |
| `step` | 위/아래 조절 버튼을 눌렀을 때와, 날짜 유효성을 검증할 때 사용하는 스텝 간격. |

### `max`

받을 수 있는 제일 나중 날짜. 입력받은 `value` (en-US)가 `max`보다 더 나중이라면 유효성 검증에 실패합니다. `max`의 값이 `yyyy-mm-dd` 형식의 유효한 날짜 문자열이 아니면 최댓값을 지정하지 않은 것으로 간주합니다.

`max`와 `min` 특성을 모두 사용할 경우, `max`는 `min`과 **동일하거나 이후**인 날짜 문자열이어야 합니다.

### `min`

받을 수 있는 제일 이전 날짜. 입력받은 `value` (en-US)가 `min`보다 더 이전이라면 유효성 검증에 실패합니다. `min`의 값이 `yyyy-mm-dd` 형식의 유효한 날짜 문자열이 아니면 최솟값을 지정하지 않은 것으로 간주합니다.

`max`와 `min` 특성을 모두 사용할 경우, `min`은 `max`와 **동일하거나 이전**인 날짜 문자열이어야 합니다.

### `step`

The `step` attribute is a number that specifies the granularity that the value must adhere to, or the special value `any`, which is described below. Only values which are equal to the basis for stepping (`min` if specified, `value` (en-US) otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of `any` means that no stepping is implied, and any value is allowed (barring other constraints, such as `min` and `max`).

**참고:** When the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

`date` 입력 칸의 `step` 값은 날짜 단위, 즉 밀리초 단위로 86,400,000 ✕ `step`로 처리합니다. 기본값은 1로, 하루를 나타냅니다.

**참고:** `date` 입력 칸에서 `step`의 값으로 `any`를 지정하면 `1`과 같습니다.

날짜 입력 칸 사용하기
------------

날짜 입력 칸은 꽤 편리하게 보입니다. 날짜를 선택할 수 있는 쉬운 인터페이스를 제공하고, 서버로 값을 전송할 땐 현재 사용자의 로케일과 관계 없이 정규화하니까요. 그러나, 지금은 제한적인 브라우저 지원으로 인한 문제가 존재합니다.

이 구획에서는 `<input type="date">`의 기본 사용법과 복잡한 사용법을 살펴볼 것이고, 뒤에서는 브라우저 지원 문제를 처리할 때 사용할 수 있는 조언을 드리겠습니다. (미지원 브라우저 처리하기로 가세요.)

**참고:** 모든 브라우저에서 날짜 입력 칸을 지원하는 날이 오면 이 문제도 자연스럽게 사라질 것입니다.

### 기본 예제

`<input type="date">`의 가장 간단한 사용법은 아래 코드처럼 하나의 `<input>`과 그 `<label>`로 이뤄집니다.

```html
<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>
```

위의 HTML은 입력받은 날짜를 `bday`라는 키로 `https://example.com`에 제출합니다. 그래서, 최종 URL은 `https://example.com/?bday=1955-06-08`이 됩니다.

### 최대와 최소 날짜 설정

`min` (en-US)과 `max` (en-US) 특성을 사용하면 사용자가 선택할 수 있는 날짜를 제한할 수 있습니다. 다음 코드에서는 최소 날짜 `2017-04-01`, 최대 날짜 `2017-04-30`을 지정합니다.

```html
<form>
  <label for="party"
 >Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>
```

실행 결과에서 2017년 4월의 날짜만 선택 가능함을 볼 수 있습니다. 입력 칸의 연과 월은 편집이 불가능해지며, 날짜 선택 위젯에서도 2017년 4월 바깥의 날짜는 선택할 수 없습니다.

**참고:** 원래 `step` (en-US) 특성을 사용해 날짜를 증감할 때 늘어날 일 수를 조절할 수 있어야 하고, 이를 이용해 토요일만 선택 가능하게 하는 등의 처리가 가능해야 합니다. 그러나 지금은 아무 브라우저에서도 구현하고 있지 않습니다.

### 입력 칸 크기 조절

`<input type="date">`는 `size` (en-US) 등의 크기 조절 특성을 지원하지 않습니다. CSS를 사용하세요.

유효성 검사
------

`<input type="date">`는 기본값에선 값의 형식 외에 다른 유효성 검사는 수행하지 않습니다. 보통 날짜 입력 칸의 인터페이스가 날짜 이외의 값을 처음부터 허용하지 않는 것이 유용하긴 하나, 아무 값을 입력하지 않을 수도 있고, 미지원 브라우저에서 텍스트 입력 칸으로 대체된 경우 4월 32일처럼 유효하지 않은 날짜도 입력할 수 있습니다.

`min` (en-US)과 `max` (en-US)를 사용해 가능한 날짜 범위를 제한(최대와 최소 날짜 설정)한 경우, 지원하는 브라우저에서는 범위 밖의 값을 받았을 때 오류를 표시합니다. 그러나 브라우저가 온전히 지원하지 않을 수도 있기 때문에, 제출받은 값을 이중으로 검증하는 것이 필요합니다.

`required` (en-US) 특성을 사용해 값을 필수로 요구할 수도 있으며, 빈 입력 칸을 제출하려고 하면 오류를 표시합니다. required는 대부분의 브라우저에서, 텍스트 입력 칸으로 대체되더라도 지원하고 있습니다.

최소/최대 날짜와 필수 검증 예제를 보겠습니다.

```html
<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
 type="date"
 name="party"
 min="2017-04-01"
 max="2017-04-20"
 required />
    <span class="validity"></span>
  </label>

  <p>
    <button>Submit</button>
  </p>
</form>
```

날짜 입력 칸의 입력을 완전히 끝내지 않았거나, 범위 밖의 값으로 제출을 시도하면 브라우저가 오류를 표시하는 것을 확인할 수 있습니다. 아래 실행 결과에서 직접 해보세요.

지원하지 않는 브라우저를 사용하시는 경우엔 다음 스크린샷을 참고하세요.

![The input field has an overlaid speech balloon, with an orange exclamation mark icon and the message "Please fill in this field."](/ko/docs/Web/HTML/Element/input/date/date-picker-chrome-error-message.png)

다음은 위 코드에서 사용한 CSS로, `:valid` (en-US)와 `:invalid` (en-US) 의사 클래스를 사용해 입력한 값의 유효성 여부에 따라 다른 스타일을 적용하고 있습니다. 구체적으로는, 유효성에 따라 입력 칸의 옆에 배치한 `<span>`에 아이콘을 추가합니다.

```css
label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}
```

**경고:** **중요**: 클라이언트측 유효성 검사는 서버의 검사를 대체할 수 없습니다. HTML을 수정하는 것도 쉽지만, HTML을 완전히 우회하고 서버에 데이터를 직접 제출할 수도 있기 때문입니다. 서버가 받은 데이터의 검증을 하지 못하는 경우 잘못된 형식, 잘못된 유형, 너무 큰 데이터 등으로 인해 심각한 상황을 맞을 수도 있습니다.

미지원 브라우저 처리하기
-------------

위에서 언급했듯, 현재 날짜 입력 칸의 큰 문제는 브라우저 지원입니다. 예를 하나 들자면, Firefox for Android의 날짜 입력기는 다음과 같은 모습입니다.

![A popup calendar picker modal floats above the web page and browser UI.](/ko/docs/Web/HTML/Element/input/date/date-picker-fxa.png)

지원하지 않는 브라우저에서는 단순한 텍스트 입력 칸으로 우아하게 저하되긴 하지만, 이는 (보여지는 컨트롤이 다르므로) 사용자 인터페이스와 데이터 처리가 일관적이지 못하다는 문제를 만듭니다.

두 문제 중 데이터 처리가 더 심각합니다. 날짜 입력 칸을 지원하는 브라우저에서는 값을 `yyyy-mm-dd`의 형식으로 정규화합니다. 그러나 텍스트 입력만으로는 값의 형식을 브라우저가 알 수 없으며, 사람들은 다양한 형태로 날짜를 입력합니다. 다음은 그 일부입니다.

* `yymmdd`
* `yyyymmdd`
* `yyyy/mm/dd`
* `yyyy-mm-dd`
* `dd/mm/yyyy`
* `mm-dd-yyyy`

해결하는 방법 중 하나는 날짜 입력 칸에 `pattern` (en-US) 특성을 사용하는 것입니다. 날짜 입력 칸은 사용하지 않는 특성이지만 텍스트 입력 칸으로 대체된 경우에는 사용하기 때문인데, 미지원 브라우저에서 다음 코드를 확인해보세요.

```html
<form>
  <label for="bday"
 >Enter your birthday:
    <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}" />
    <span class="validity"></span>
  </label>
  <p>
    <button>Submit</button>
  </p>
</form>
```

입력한 값을 패턴 `####-##-##` (`#`은 0에서 9까지의 숫자)에 맞추지 않고 제출해보면 브라우저가 날짜 입력 칸을 강조하며 오류를 표시함을 볼 수 있습니다. 물론 아직도 사람들이 유효하지 않은 날짜나 잘못된 형태로 입력하는 것은 막을 수 없으므로, 문제를 해결한 것은 아닙니다.
```

span {
  position: relative;
}

span::after {
  right: -18px;
  position: absolute;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}
```

그러므로 지금으로서는, 크로스 브라우저 날짜 처리를 지원하기 위한 가장 좋은 방법은 각각 다른 입력 칸에 연, 월, 일을 입력하도록 하는 방법과, 외부 JavaScript 라이브러리를 사용하는 편이 최선입니다.

예제
--

이번 예제에서는 날짜를 선택할 수 있는 사용자 인터페이스 두 개를 만들어보겠습니다. 첫 번째는 네이티브 `<input type="date">` 입력 칸을 사용한 것이고, 두 번째는 네이티브 입력 칸을 지원하지 않는 구형 브라우저에서 사용할 수 있도록 세 개의 `<select>` (en-US) 요소를 이용한 것입니다.

### HTML

HTML은 다음과 같습니다.

```html
<form>
  <label class="nativeDatePicker"
 >Enter your birthday:
    <input type="date" name="bday" />
    <span class="validity"></span>
  </label>

  <fieldset class="fallbackDatePicker" hidden>
    <legend class="fallbackLabel">Enter your birthday:</legend>

    <label>
      Day:
      <select name="day"></select>
    </label>

    <label>
      Month:
      <select name="month">
        <option>January</option>
        <option>February</option>
        <option>March</option>
        <option>April</option>
        <option>May</option>
        <option>June</option>
        <option>July</option>
        <option>August</option>
        <option>September</option>
        <option>October</option>
        <option>November</option>
        <option>December</option>
      </select>
    </label>

    <label>
      Year:
      <select name="year"></select>
    </label>
  </fieldset>
</form>
```

월은 변하지 않으므로 하드코딩합니다. 일과 연은 현재 선택 값에 따라 동적으로 생성하도록 비워놓습니다. (자세한 설명은 아래의 코드 주석을 참고하세요.)
```

span {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}
```

### JavaScript

코드에서 관심을 가질만한 곳은 브라우저의 `<input type="date">` 지원 여부를 알아내기 위한 기능 탐지 부분입니다.

우선 새로운 `<input>` (en-US) 요소를 만들고, `type`을 `date`로 설정해봅니다. 그리고 즉시 `<input>`의 유형을 검사하는데, 지원하지 않는 브라우저에서 `date`는 `text`로 대체되므로 `text`를 반환합니다. `<input type="date">`을 지원하지 않는다는 사실을 알아냈으면 네이티브 입력 칸을 숨기고, 대체 요소(`<select>` (en-US))를 대신 노출합니다.

```js
// define variables
var nativePicker = document.querySelector(".nativeDatePicker");
var fallbackPicker = document.querySelector(".fallbackDatePicker");

var yearSelect = document.querySelector("[name=year]");
var monthSelect = document.querySelector("[name=month]");

// Test whether a new date input falls back to a text input
var testElement = document.createElement("input");

try {
  test.type = "date";
} catch (e) {
  console.log(e.description);
}

// If it does, run the code inside the if () {} block
if (testElement.type === "text") {
  // hide the native picker and show the fallback
  nativePicker.hidden = true;
  fallbackPicker.hidden = false;

  // populate the days and years dynamically
  // (the months are always the same, therefore hardcoded)
  populateDays(monthSelect.value);
  populateYears();
}

function populateDays(month) {
  const daySelect = document.querySelector("[name=day]");
  const month = monthSelect.value;

  // Create variable to hold new number of days to inject
  let dayNum;

  // 31 or 30 days?
  switch (month) {
    case "April":
    case "June":
    case "September":
    case "November":
      dayNum = 30;
      break;
    case "February":
      // If month is February, calculate whether it is a leap year or not
      const year = yearSelect.value;
      const isLeap = new Date(year, 1, 29).getMonth() === 1;
      dayNum = isLeap ? 29 : 28;
      break;
    default:
      dayNum = 31;
  }

  // inject the right number of new <option>s into the <select>
  daySelect.options = Array.from({ length: dayNum }, function (index) {
    return index + 1;
  });

  // if previous day has already been set, set daySelect's value
  // to that day, to avoid the day jumping back to 1 when you
  // change the year
  if (previousDay) {
    daySelect.value = previousDay;

    // If the previous day was set to a high number, say 31, and then
    // you chose a month with fewer days in it (like February),
    // this code ensures that the highest day available
    // is selected, rather than showing a blank daySelect
    if (previousDay > daySelect.length + 1) {
      daySelect.selectedIndex = daySelect.length;
    }
  }
}

function populateYears() {
  // get this year as a number
  var year = new Date().getFullYear();

  // Make this year and the 100 years before it available in the <select>
  daySelect.options = Array.from({ length: 100 }, function (index) {
    return index + year;
  });
}

// when the month or year <select> values are changed, rerun populateDays()
// in case the change affected the number of available days
yearSelect.onchange = populateDays;
monthSelect.onchange = populateDays;

// preserve day selection
var previousDay;

// update what day has been set to previously
// see end of populateDays() for usage
daySelect.onchange = function () {
  previousDay = daySelect.value;
};
```

**참고:** 어떤 연도는 53주임을 기억하세요! (Wikipedia) 프로덕션 애플리케이션을 개발할 땐 고려해야 할 사항입니다.

명세
--

| Specification |
| --- |
| HTML Standard # date-state-(type=date) |

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

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

같이 보기
-----

* 일반 `<input>` (en-US) 요소와, 그 인터페이스인 `HTMLInputElement` (en-US).


<input type="checkbox"> - HTML: Hypertext Markup Language

<input type="checkbox">
=======================

공문서에서 볼 법한 **`checkbox`** 유형의 `<input>` (en-US) 요소는 기본적으로 활성화될 시에 체크되는 박스로 렌더링 됩니다. 박스의 정확한 외형은 브라우저가 실행 중인 운영체제의 시스템 구성에 따라 달라질 수 있습니다. 일반적으로는 사각형의 모습이지만, 둥근 모서리를 가질 수도 있습니다. **`checkbox`** 는 폼 안에서 선택된 단일 값들을 제출할 수 있는 기능을 제공합니다.

시도해보기
-----

**참고:** 라디오 버튼 (en-US) 은 체크박스와 비슷하지만 중요한 차이점이 하나 있습니다. 여러 라디오 버튼은 하나의 집합으로 그룹화되어 그 안에서 단 하나만 선택될 수 있지만, 체크박스의 경우는 각각의 값을 켜고 끌 수 있다는 점입니다. 다수의 컨트롤이 존재할 때 라디오 버튼은 전체에서 하나의 요소에 대한 선택만을 허용하고, 체크박스는 여러 개의 요소가 선택되는 것을 허용합니다.

Value
-----

체크박스의 값을 나타내는 하나의 문자열입니다. 클라이언트 쪽에서 이 값은 보이지 않지만, 서버 쪽에서 이 값은 체크박스의 `name`과 함께 전달되는 데이터에 부여되는 값입니다. 아래의 예제를 살펴보겠습니다.

```html
<form>
  <div>
    <input
 type="checkbox"
 id="subscribeNews"
 name="subscribe"
 value="newsletter" />
    <label for="subscribeNews">뉴스레터를 구독하시겠습니까?</label>
  </div>
  <div>
    <button type="submit">구독하기</button>
  </div>
</form>
```

이 예제에서는 `name` 특성은 `subscribe`로, `value` 특성은 `newsletter`으로 지정되었습니다. 폼이 제출되면 전달될 `name/value` 쌍의 데이터는 `subscribe=newsletter`와 같이 표현됩니다.

만약 `value` 특성이 생략되면, 해당 체크박스의 기본 값은 `on`입니다. 따라서 이 경우 제출된 데이터는 `subscribe=on`이 됩니다.

**참고:** 폼이 제출될 때 체크박스가 체크되어 있지 않으면, 체크되지 않은 상태를 표현하는 (이를테면 `value=unchecked`과 같은) 데이터가 서버에 전달되지는 않습니다. 값 자체가 서버에 전달되지 않습니다. 만약 체크박스가 체크되지 않은 경우 기본 값을 제출하고 싶다면, 폼 안에 <input type="hidden"> (en-US)를 Javascript 등에 의해 생성된 동일한 `name` 그리고 `value`과 함께 포함시킬 수 있습니다.

추가 특성들
------

모든 `<input>` (en-US) 요소들에 의해 공유되는 공통 특성들 외에도, `checkbox` input은 아래의 특성들을 지원합니다.

`checked`

(페이지가 로드될 때) 체크박스가 기본적으로 체크된 상태로 보여질 것인지를 지칭하는 불리언 특성입니다. 이 특성은 체크박스가 "현재 체크된 상태"인지를 나타내지 않습니다. 만약 체크박스의 상태가 변경되면, 이 특성은 그 변경을 반영하지 않습니다 (단지 `HTMLInputElement` (en-US) 의 `checked` IDL 특성이 변경됩니다.)

**참고:** 다른 Input 컨트롤들과는 다르게, 체크박스의 값은 현재 체크박스의 상태가 `checked`일 때에만 제출되는 데이터에 포함됩니다. 이 경우, 체크박스의 `value` 특성에 지정된 값이 Input의 `value`으로서 전달됩니다.
 다른 브라우저들과는 다르게, Firefox의 경우 기본적으로 페이지 로드에 걸쳐서 `<input>`의 `checked` 상태를 동적으로 유지합니다. 이 기능을 제어하기 위해서는 `autocomplete` (en-US) 특성을 사용해야 합니다.

`value`

The `value` 특성은 `<input>` (en-US) 요소가 공유하는 특성입니다. 하지만, `checkbox` 유형의 `input`에서는 특별한 용도로 사용됩니다. 폼이 제출될 때, 현재 활성화되어 있는 체크박스만이 서버 측에 전달됩니다. 그리고 `value` 특성에 지정된 값이 바로 전달되는 값이 됩니다. 만약 `value` 특성의 값이 지정되어 있지 않다면, 서버 측에는 기본 값으로 `on`이 전달됩니다. 이는 위의 Value 구획에서도 설명하고 있습니다.

체크박스 Input 사용하기
---------------

이미 위에서 대부분의 기본적인 체크박스 사용법을 다루었습니다. 여기부터는 체크박스의 다른 공통 기능들과 필요한 기술들을 다룹니다.

### 여러 개의 체크박스 다루기

위에서 살펴본 예제의 경우 하나의 체크박스만을 가지고 있었습니다. 실제 상황에서는 여러 체크박스들을 자주 마주치게 됩니다. 만약 체크박스들이 서로 완전히 관계가 없다면, 각각의 체크박스들을 위에서처럼 하나씩 다룰 수 있습니다. 하지만 만약 체크박스들이 모두 서로 관련되어 있다면 일이 간단하지는 않습니다.

예를 들면, 아래의 데모는 사용자로 하여금 자신의 관심사에 대해서 선택할 수 있게 하는 여러 개의 체크박스를 포함합니다. (전체 예제를 확인하려면 예제 구획을 참조하세요.)

```html
<fieldset>
  <legend>관심사들을 선택하세요</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" />
    <label for="coding">코딩</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">음악</label>
  </div>
</fieldset>
```

이 예제에서 여러 체크박스들에 같은 `name` 특성의 값이 지정된 것을 알 수 있습니다. 두 체크박스가 모두 활성화된 뒤에 폼이 제출되면 `interest=coding&interest=music`과 같은 `name/value` 쌍의 문자열 데이터가 얻어집니다. 이 문자열이 서버에 전달되면, 연관 배열이 아닌 다른 방식으로 구문 분석을 수행해서 마지막 하나의 값만이 아닌 모든 `interest` 이름을 가지고 있는 값들을 얻어내야 합니다. 예를 들어, 파이썬으로 이를 수행하는 기술을 확인하려면 Handle Multiple Checkboxes with a Single Serverside Variable를 참조하세요.

### 기본적으로 체크박스를 활성화 하기

체크박스를 기본적으로 활성화된 상태로 만들기 위해서는 `checked` 특성을 부여해야 합니다. 아래의 예제를 확인하세요.

```html
<fieldset>
  <legend>관심사들을 선택하세요</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding" checked />
    <label for="coding">코딩</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music" />
    <label for="music">음악</label>
  </div>
</fieldset>
```

### 체크박스에 대해서 더 넓은 선택 영역을 제공하기

위의 예제에서 체크박스 자체 뿐만 아니라, 해당 체크박스와 연관된 `<label>` 요소를 클릭함으로써 체크박스를 활성화시킬 수 있다는 것을 알아챘을 수도 있습니다. 이는 특히 스마트폰과 같이 작은 화면을 가진 기기에서 사용자가 원하는 사항을 쉽게 선택할 수 있도록 해주는, HTML 폼 레이블의 굉장히 유용한 기능입니다.

접근성을 넘어서, 이는 폼에 `<label>` 요소를 적절히 설정할 또 다른 좋은 이유가 됩니다.

### 중간 상태 체크박스

 활성화 및 비활성화 상태에 덧붙여서, 체크박스는 **indeterminate**라는 세번째 상태를 가질 수 있습니다. 이 상태는 해당 사항이 선택되었는지 혹은 선택되지 않았는지 판단할 수 없는 상태를 의미합니다.
 이는 Javascript의 `HTMLInputElement` (en-US) 객체의 `indeterminate` 특성에 의해 설정될 수 있습니다. HTML 특성을 이용해서는 설정할 수 없습니다.

```js
inputInstance.indeterminate = true;
```

indeterminate 상태에 있는 체크박스는 대부분의 브라우저에서 박스 안에 활성화/비활성화 상태가 드러나는 대신, 붙임표 혹은 빼기 기호와 같은 수평선을 가지게 됩니다.

이 특성을 사용할 일이 많지는 않습니다. 가장 흔하게 사용되는 경우는 체크박스가 여러 하위 체크박스를 가지는 경우입니다. 만약 모든 하위 체크박스가 활성화되면, 상위 체크박스 또한 활성화됩니다. 만약 하위 체크박스가 모두 활성화되지 않았다면 상위 체크박스는 활성화되지 않습니다. 만약 하위 체크박스 중 하나가 다른 체크박스들과는 다른 상태를 가진다면 상위 체크박스는 indeterminate 상태가 됩니다.

이는 아래의 예제로 확인할 수 있습니다. (영감을 준 CSS Tricks에 감사를 표합니다.) 이 예제에서 우리는 조합에 사용할 재료를 선택하는 과정을 추적하게 됩니다. 하나의 재료에 대한 체크박스를 활성화하게 되면, Javascript 함수는 선택된 재료의 수를 확인합니다.

* 아무 것도 활성화되지 않았다면, 조합 이름에 해당하는 체크박스는 비활성화됩니다.
* 하나 혹은 두 개가 활성화되었다면, 조합 이름에 해당하는 체크박스는 `indeterminate` 상태가 됩니다.
* 세 개가 모두 활성화되었다면, 조합 이름에 해당하는 체크박스는 `checked` 상태가 됩니다.

따라서 이 예제에서 `indeterminate` 상태는 재료를 선택하는 과정이 시작되었지만 조합이 완료되지는 않았다는 것을 표현하기 위해 사용됩니다.

```js
const overall = document.querySelector("#enchantment");
const ingredients = document.querySelectorAll("ul input");

overall.addEventListener("click", (e) => {
  e.preventDefault();
});

for (const ingredient of ingredients) {
  ingredient.addEventListener("click", updateDisplay);
}

function updateDisplay() {
  let checkedCount = 0;
  for (const ingredient of ingredients) {
    if (ingredient.checked) {
      checkedCount++;
    }
  }

  if (checkedCount === 0) {
    overall.checked = false;
    overall.indeterminate = false;
  } else if (checkedCount === ingredients.length) {
    overall.checked = true;
    overall.indeterminate = false;
  } else {
    overall.checked = false;
    overall.indeterminate = true;
  }
}
```

**참고:** 만약 `indeterminate` 상태의 체크박스와 함께 폼을 제출하게 되면 활성화되지 않은 체크박스를 제출하는 것과 같은 일이 발생합니다. 즉, 체크박스를 표현하는 데이터는 전달되지 않습니다.

유효성 검증하기
--------

체크박스는 모든 `<input>` (en-US) 요소들에 제공되는 유효성 검증 (en-US) 을 지원합니다. 하지만 대부분의 `ValidityState` 값은 `false`입니다. 만약 체크박스가 `required` (en-US) 특성을 가졌지만 활성화되지 않은 경우에, `ValidityState.valueMissing` (en-US) 값은 `true`가 됩니다.

예제
--

아래의 예제는 위에서 본 "여러 개의 체크박스 다루기" 에서의 예제를 확장한 것입니다. 더 많은 체크박스를 가지고 있으며, "Other" 체크박스는 활성화되었을 때 이 체크박스에 대해서 다른 값을 입력할 수 있는 텍스트 영역이 나타납니다. 이는 간단한 JavaScript 블록을 통해 구현할 수 있습니다. 또한 이 예제는 스타일을 개선하기 위해 일부 CSS 또한 포함합니다.

### HTML

```html
<form>
  <fieldset>
    <legend>Choose your interests</legend>
    <div>
      <input type="checkbox" id="coding" name="interest" value="coding" />
      <label for="coding">Coding</label>
    </div>
    <div>
      <input type="checkbox" id="music" name="interest" value="music" />
      <label for="music">Music</label>
    </div>
    <div>
      <input type="checkbox" id="art" name="interest" value="art" />
      <label for="art">Art</label>
    </div>
    <div>
      <input type="checkbox" id="sports" name="interest" value="sports" />
      <label for="sports">Sports</label>
    </div>
    <div>
      <input type="checkbox" id="cooking" name="interest" value="cooking" />
      <label for="cooking">Cooking</label>
    </div>
    <div>
      <input type="checkbox" id="other" name="interest" value="other" />
      <label for="other">Other</label>
      <input type="text" id="otherValue" name="other" />
    </div>
    <div>
      <button type="submit">Submit form</button>
    </div>
  </fieldset>
</form>
```

### CSS

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

form {
  width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 10px;
}

fieldset {
  background: cyan;
  border: 5px solid blue;
}

legend {
  padding: 10px;
  background: blue;
  color: cyan;
}
```

### JavaScript

```js
const otherCheckbox = document.querySelector("#other");
const otherText = document.querySelector("#otherValue");
otherText.style.visibility = "hidden";

otherCheckbox.addEventListener("change", () => {
  if (otherCheckbox.checked) {
    otherText.style.visibility = "visible";
    otherText.value = "";
  } else {
    otherText.style.visibility = "hidden";
  }
});
```

기술 요약
-----

|  |  |
| --- | --- |
| **Value** | 체크박스의 값을 나타내는 문자열 |
| **이벤트** | `change` 그리고 `input` |
| **지원하는 공통 특성** | `checked` |
| **IDL 특성** | `checked`,
 `indeterminate` 그리고
 `value` |
| **DOM 인터페이스** | `HTMLInputElement` (en-US) |
| **메서드** | `select()` (en-US) |
| **암시적 ARIA 역할** | `checkbox` (en-US) |

명세서
---

| Specification |
| --- |
| HTML Standard # checkbox-state-(type=checkbox) |

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

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

같이 보기
-----

* `<input>` (en-US) 과 그를 구현하는 `HTMLInputElement` (en-US) 인터페이스
* `:checked` 그리고 현재 상태를 기반으로 체크박스를 꾸밀 수 있는 `:indeterminate` (en-US) CSS 선택자
* CSS 속성 호환성 (en-US)


<input type="button"> - HTML: Hypertext Markup Language

<input type="button">
=====================

**`button`** 유형의 `<input>` (en-US) 요소는 단순한 푸시 버튼으로 렌더링 됩니다. 이벤트 처리기(주로 `click` 이벤트)를 부착하면, 사용자 지정 기능을 웹 페이지 어느 곳에나 제공할 수 있습니다.

시도해보기
-----

**참고:** `<input>` 요소의 `button` 유형도 전혀 틀리지 않은 방법이지만, 이후에 생긴 `<button>` 요소를 사용하는 것이 선호되는 방식입니다. `<button>`의 레이블 텍스트는 여는 태그와 닫는 태그 사이에 넣기 때문에, 심지어 이미지까지도 포함할 수 있습니다.

|  |  |
| --- | --- |
| **값** | 버튼의 레이블로 사용할 `DOMString` |
| 이벤트 | `click` |
| 지원하는 공용 특성 | `type` (en-US),
 `value` (en-US) |
| **IDL 특성** | `value` |
| 메서드 | 없음 |

값
-

`<input type="button">` 요소의 `value` (en-US) 특성은 버튼의 레이블로 사용할 `DOMString`을 담습니다.

```html
<input type="button" value="클릭하세요" />
```

`value`를 지정하지 않으면 빈 버튼이 됩니다.

```html
<input type="button" />
```

버튼 사용하기
-------

`<input type="button">` 요소는 아무런 기본 기능도 가지지 않습니다. (유사한 요소인 `<input type="submit">` (en-US)과 `<input type="reset">` (en-US)은 각각 양식을 제출하고 초기화할 수 있습니다.) 버튼이 뭐라도 하게 만들려면 JavaScript 코드를 작성해야 합니다.

### 간단한 버튼

`click` 이벤트 처리기를 부착한 간단한 버튼을 통해 기계를 켜고 끄는 기능을 만드는 것으로 시작해보겠습니다. (기계라고는 하지만, 그냥 버튼의 `value`와 문단 내용을 바꾸는 것입니다.)

```html
<form>
  <input type="button" value="기계 켜기" />
</form>
<p>기계가 멈췄습니다.</p>
```

```js
var btn = document.querySelector("input");
var txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
  if (btn.value === "기계 켜기") {
    btn.value = "기계 끄기";
    txt.textContent = "기계가 켜졌습니다!";
  } else {
    btn.value = "기계 켜기";
    txt.textContent = "기계가 멈췄습니다.";
  }
}
```

위의 스크립트는 DOM의 `<input>`을 나타내는 `HTMLInputElement` (en-US) 객체의 참조를 획득해 변수 `button`에 저장합니다. 그 후 `addEventListener()`를 사용해, `click` 이벤트가 발생했을 때 실행할 함수를 생성합니다.

### 버튼에 키보드 단축키 추가하기

접근 키라고도 불리는 키보드 단축키는 사용자가 키보드의 키 혹은 키 조합을 통해 버튼을 누를 수 있는 방법을 제공합니다. 단축키를 추가하는 법은, 다른 `<input>` (en-US)과 마찬가지로, `accesskey` 전역 특성을 추가하는 것입니다.

이번 예제에서는 이전 예제에 더해 `s` 키를 접근 키로 지정합니다. (브라우저/운영체제에 따라 특정 조합키를 같이 눌러야 할 수도 있습니다. `accesskey` 문서를 방문해 조합키 목록을 확인하세요.)

```html
<form>
  <input type="button" value="기계 켜기" accesskey="s" />
</form>
<p>기계가 멈췄습니다.</p>
```

```
var btn = document.querySelector("input");
var txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
  if (btn.value === "기계 켜기") {
    btn.value = "기계 끄기";
    txt.textContent = "기계가 켜졌습니다!";
  } else {
    btn.value = "기계 켜기";
    txt.textContent = "기계가 멈췄습니다.";
  }
}
```

**참고:** 위 예제의 문제는, 사용자 입장에선 어떤 단축키가 있는지 알 수도 없다는 것입니다! 실제 웹 사이트에서는, 쉽게 접근 가능한 곳에 놓인 링크로 단축키 정보를 설명하는 문서를 가리키는 등 사이트 디자인을 방해하지 않는 선에서 단축키 정보를 제공해야 할 것입니다.

### 버튼 활성화와 비활성화

버튼을 비활성화하려면 간단히 `disabled` 전역 특성을 지정하는 것으로 충분합니다.

```html
<input type="button" value="Disable me" disabled />
```

런타임에서 바꿀 땐 요소의 `disabled` 속성에 `true`나 `false`를 설정하면 끝입니다. 이번 예제의 버튼은 활성화 상태지만, 누르는 순간 `btn.disabled = true`를 통해 비활성화합니다. 그 후, `setTimeout()` 함수를 통해 2초 후 다시 활성화 상태로 되돌립니다.
```

<input type="button" value="활성" />
```

```
var btn = document.querySelector("input");

btn.addEventListener("click", disableBtn);

function disableBtn() {
  btn.disabled = true;
  btn.value = "비활성";
  window.setTimeout(function () {
    btn.disabled = false;
    btn.value = "활성";
  }, 2000);
}
```

`disabled` 특성을 지정하지 않은 경우 부모 요소의 `disabled`를 상속합니다. 이 점을 이용하면, 여러 개의 요소를 `<fieldset>` 등 부모 요소로 감싸고, 그 부모의 `disabled` 를 사용해 한꺼번에 상태를 통제할 수 있습니다.

다음 예제로 한 번에 비활성화하는 예제를 볼 수 있습니다. 이전 예제와 거의 똑같지만, 다른 점은 `disabled` 특성을 `<fieldset>`에 설정한다는 점입니다. 1번 버튼을 눌러보세요. 모든 버튼이 비활성화되고, 2초 후 활성화됩니다.
```

<fieldset>
  <legend>Button group</legend>
  <input type="button" value="Button 1" />
  <input type="button" value="Button 2" />
  <input type="button" value="Button 3" />
</fieldset>
```

```
var btn = document.querySelector("input");
var fieldset = document.querySelector("fieldset");

btn.addEventListener("click", disableBtn);

function disableBtn() {
  fieldset.disabled = true;
  window.setTimeout(function () {
    fieldset.disabled = false;
  }, 2000);
}
```

유효성 검사
------

버튼은 제한할 값이 없으므로 유효성 검사의 대상이 아닙니다.

예제
--

아래 예제는 `<canvas>` 요소와 CSS(분량 조절을 위해 생략), JavaScript를 사용해 만든 매우 단순한 그림 그리기 앱입니다. 위쪽 두 컨트롤은 색과 펜 크기를 조절할 때 사용하고, 버튼은 클릭하면 캔버스의 그림을 모두 지우는 함수를 호출합니다.

```html
<div class="toolbar">
  <input type="color" aria-label="펜 색상" />
  <input type="range" min="2" max="50" value="30" aria-label="펜 크기" /><span
 class="output"
 >30</span
 >
  <input type="button" value="캔버스 지우기" />
</div>

<canvas class="myCanvas">
  <p>Add suitable fallback here.</p>
</canvas>
```

```
body {
  margin: 0;
  overflow: hidden;
  background: #ccc;
}

.toolbar {
  width: 150px;
  height: 75px;
  background: #ccc;
  padding: 5px;
}

input[type="color"],
input[type="button"] {
  width: 90%;
  margin: 0 auto;
  display: block;
}

input[type="range"] {
  width: 70%;
}

span {
  position: relative;
  bottom: 5px;
}
```

```js
var canvas = document.querySelector(".myCanvas");
var width = (canvas.width = window.innerWidth);
var height = (canvas.height = window.innerHeight - 85);
var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(0, 0, width, height);

var colorPicker = document.querySelector('input[type="color"]');
var sizePicker = document.querySelector('input[type="range"]');
var output = document.querySelector(".output");
var clearBtn = document.querySelector('input[type="button"]');

// covert degrees to radians
function degToRad(degrees) {
  return (degrees \* Math.PI) / 180;
}

// update sizepicker output value

sizePicker.oninput = function () {
  output.textContent = sizePicker.value;
};

// store mouse pointer coordinates, and whether the button is pressed
var curX;
var curY;
var pressed = false;

// update mouse pointer coordinates
document.onmousemove = function (e) {
  curX = window.Event
    ? e.pageX
    : e.clientX +
      (document.documentElement.scrollLeft
        ? document.documentElement.scrollLeft
        : document.body.scrollLeft);
  curY = window.Event
    ? e.pageY
    : e.clientY +
      (document.documentElement.scrollTop
        ? document.documentElement.scrollTop
        : document.body.scrollTop);
};

canvas.onmousedown = function () {
  pressed = true;
};

canvas.onmouseup = function () {
  pressed = false;
};

clearBtn.onclick = function () {
  ctx.fillStyle = "rgb(0,0,0)";
  ctx.fillRect(0, 0, width, height);
};

function draw() {
  if (pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(
      curX,
      curY - 85,
      sizePicker.value,
      degToRad(0),
      degToRad(360),
      false,
    );
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();
```

명세
--

| Specification |
| --- |
| HTML Standard # button-state-(type=button) |

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

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

같이 보기
-----

* `<input>` (en-US) 요소와 그 인터페이스 `HTMLInputElement` (en-US).
* 보다 현대적인 `<button>` 요소.


동등 비교 및 동일성 - JavaScript

동등 비교 및 동일성
===========

JavaScript는 다음 세 가지의 값 비교 연산을 제공합니다.

* `===` (en-US) - 엄격한 동등 (삼중 등호)
* `==` - 느슨한 동등 (이중 등호)
* `Object.is()`

어느 연산을 사용할지 선택하는 것은 여러분이 어떤 종류의 비교를 수행하려고 하는지에 달려있습니다. 간단히 말하자면 다음과 같습니다.

* 이중 등호(`==`)는 두 대상을 비교할 때 유형 변환을 수행한 뒤, IEEE 754를 준수하도록 `NaN`, `-0`, `+0`을 특별히 처리합니다(따라서 `NaN != NaN`이고 `-0 == +0`).
* 삼중 등호(`===`)는 이중 등호와 동일한 비교(`NaN`, `-0`, `+0`에 대한 특수 처리 포함)를 수행하지만 유형 변환은 수행하지 않습니다. 유형이 다르면 `false`가 반환됩니다.
* `Object.is()`는 `NaN`, `-0`, `+0`에 대한 형식 변환과 특수 처리를 수행하지 않습니다(특수 숫자 값을 제외하고 `===`와 동일한 동작 제공).

이들은 JavaScript의 4가지 동등 알고리즘 중 3가지에 해당합니다.

* IsLooselyEqual: `==`
* IsStrictlyEqual: `===`
* SameValue: `Object.is()`
* SameValueZero: 많은 내장 연산에 사용됨.

이들 사이의 구별은 모두 원시 값 처리와 관련 있습니다. 이들 중 어느 것도 매개변수가 구조에서 개념적으로 유사한지 비교하지 않습니다. 동일한 구조를 가지고 있지만, 고유한 객체인 비 원시 값 객체 `x`와 `y`의 경우, 위의 모든 형식은 `false`로 평가됩니다.

===를 사용하는 엄격한 동등
----------------

엄격한 동등은 두 값이 같은지 비교합니다. 비교되기 전 어떠한 값도 암시적으로 다른 값으로 변환되지 않습니다. 값의 형식이 다른 경우, 두 값은 동등하지 않다고 간주됩니다. 값의 형식이 같고 숫자가 아니고 값이 같다면 두 값은 동등하다고 간주됩니다. 마지막으로 두 값이 모두 숫자인 경우, 둘 다 `NaN`이 아닌 동일한 값이거나, 하나가 `+0`이고 하나가 `-0`이면 동등한 것으로 간주됩니다.

```js
const num = 0;
const obj = new String("0");
const str = "0";

console.log(num === num); // true
console.log(obj === obj); // true
console.log(str === str); // true

console.log(num === obj); // false
console.log(num === str); // false
console.log(obj === str); // false
console.log(null === undefined); // false
console.log(obj === null); // false
console.log(obj === undefined); // false
```

엄격한 동등은 거의 항상 사용하는 올바른 비교 연산입니다. 숫자를 제외한 모든 값에 대해 "한 값은 자신과만 같다"라는 명백한 의미 체계를 사용합니다. 숫자의 경우 약간 다른 의미 체계를 사용하여 서로 다른 두 가지 경우를 처리합니다. 첫 번째는 부동 소수점 0이 양수 또는 음수로 부호화 된다는점입니다. 이는 특정 수학 해를 나타내는 데 유용하지만, 대부분의 상황에서는 `+0`과 `-0`의 차이를 신경 쓰지 않으므로 엄격한 동등은 두 값을 동일한 값으로 취급합니다. 두 번째는 부동 소수점이 `NaN`이라는 숫자가 아닌 값의 개념을 포함하여 어떤 불분명한 수학 문제(예: 양의 무한대에 음의 무한대를 더함)에 대한 해를 나타내는 경우입니다. 엄격한 동등은 `NaN`을 다른 모든 값과 같지 않은 것으로 취급합니다. (`(x !== x)`가 `true`인 유일한 경우는 `x`가 `NaN`일 때입니다.)

`===` 외에도 엄격한 동등은 `Array.prototype.indexOf()`, `Array.prototype.lastIndexOf()`, `TypedArray.prototype.indexOf()`, `TypedArray.prototype.lastIndexOf()` (en-US), 그리고 `case` (en-US) 일치를 포함한 인덱스 검색 메서드에서 사용됩니다. 즉, `indexOf(NaN)`을 사용하여 배열에서 `NaN` 값의 인덱스를 찾거나 `NaN`을 `switch` 문에서 `case` 값으로 사용하여 어떤 항목과 일치하도록 만들 수 없습니다.

```js
console.log([NaN].indexOf(NaN)); // -1
switch (NaN) {
  case NaN:
    console.log("Surprise"); // 아무것도 로그되지 않습니다.
}
```

==를 사용하는 느슨한 동등
---------------

느슨한 동등은 대칭입니다. 즉, `A == B`는 `A`와 `B`가 어떤 값이든 항상 `B == A`와 동일한 의미 체계를 가집니다(적용된 변환 순서 제외). `==`를 사용하여 느슨한 동등을 수행하는 동작은 다음과 같습니다.

1. 피연산자의 형식이 동일한 경우 다음과 같이 비교됩니다.
    * 객체: 두 피연산자가 동일한 객체를 참조하는 경우에만 `true`를 반환합니다.
    * 문자열: 두 피연산자가 동일한 순서로 동일한 문자를 갖는 경우에만 `true`를 반환합니다.
    * 숫자: 두 피연산자의 값이 같은 경우에만 `true`를 반환합니다. `+0`과 -`0`은 같은 값으로 취급합니다. 피연산자 중 하나가 `NaN` 이면 `false`를 반환합니다. 따라서 `NaN`은 결코 `NaN`과 같지 않습니다.
    * 불리언: 피연산자가 둘 다 `true`이거나 둘 다 `false`인 경우에만 `true`를 반환합니다.
    * BigInt: 두 피연산자가 동일한 값인 경우에만 `true`를 반환합니다.
    * Symbol: 두 피연산자가 동일한 symbol을 참조하는 경우에만 `true`를 반환합니다.
2. 피연산자 중 하나가 `null`이거나 `undefined`인 경우 `true`를 반환하려면 다른 피연산자도 `null`이거나 `undefined` 여야 합니다. 그렇지 않으면 `false`를 반환합니다.
3. 피연산자 중 하나가 객체이고 다른 하나가 원시 값인 경우 객체를 원시 값으로 변환합니다.
4. 이 단계에서 두 피연산자는 원시 값(문자열, 숫자, 불리언, Symbol, BigInt 중 하나)로 변환됩니다. 나머지 변환은 사항별로 수행됩니다.
    * 동일한 형식인 경우, 1단계를 사용하여 비교합니다.
    * 피연산자 중 하나가 Symbol이고 다른 피연산자는 아닌 경우, `false`를 반환합니다.
    * 피연산자 중 하나가 불리언이고 다른 피연산자는 아닌 경우, 불리언을 숫자로 변환합니다. `true`는 1로 변환되고 `false`는 0으로 변환됩니다. 그런 다음 두 피연산자를 다시 느슨하게 비교합니다.
    * 숫자를 문자열로: 문자열을 숫자로 변환합니다. 변환 실패로 인해 `NaN`이 발생하면 동등성이 `false` 임을 보장합니다.
    * 숫자를 BigInt로: 숫자 값으로 비교합니다. 숫자가 ±Infinity이거나 `NaN` 이면 `false`를 반환합니다.
    * 문자열을 BigInt로: `BigInt()` 생성자와 동일한 알고리즘을 사용하여 문자열을 BigInt로 변환합니다. 변환에 실패하면 `false`를 반환합니다.

전통적으로, 그리고 ECMAScript에 따르면 모든 원시 값과 객체는 `undefined`와 `null`과 느슨하게 동등하지 않습니다. 그러나 대부분의 브라우저는 특정한 클래스의 객체(특히 모든 페이지의 `document.all` 객체)가 일부 상황에서 마치 값 `undefined`을 모방하는 것처럼 동작하는 것을 허용합니다. 느슨한 동등성은 다음 맥락 중 하나입니다. `null == A`와 `undefined == A`는 A가 `undefined`로 에뮬레이트 하는 객체인 경우에만 `true`로 평가됩니다. 다른 모든 경우에는 객체가 `undefined` 또는 `null`과 느슨하게 동등하지 않습니다.

대부분의 경우에서 느슨한 동등을 사용하는 것이 권장되지 않습니다. 엄격한 동등을 사용한 비교 결과는 예측하기 쉽고, 강제 형변환이 없기 때문에 더 빨리 평가될 수 있습니다.

다음 예제는 숫자 원시 값 `0`, bigint 원시 값 `0n`, 문자열 원시 값 `'0'`, 그리고 `toString()` 값이 `'0'`인 객체와 관련된 느슨한 동등 비교를 보여줍니다.

```js
const num = 0;
const big = 0n;
const str = "0";
const obj = new String("0");

console.log(num == str); // true
console.log(big == num); // true
console.log(str == big); // true

console.log(num == obj); // true
console.log(big == obj); // true
console.log(str == obj); // true
```

느슨한 동등에는 `==` 연산자만 사용합니다.

Object.is()를 사용한 동일 값 동등
------------------------

동일 값 동등은 두 값이 모든 맥락에서 기능적으로 동일한지 여부를 결정합니다. (이 사용 사례는Liskov 대체 원칙 사례를 보여줍니다.) 변경할 수 없는 속성을 변경하려 하는 경우 한 사례가 발생합니다.

```js
// 변경할 수 없는 NEGATIVE\_ZERO 속성을 Number 생성자에 추가합니다.
Object.defineProperty(Number, "NEGATIVE\_ZERO", {
  value: -0,
  writable: false,
  configurable: false,
  enumerable: false,
});

function attemptMutation(v) {
  Object.defineProperty(Number, "NEGATIVE\_ZERO", { value: v });
}
```

`Object.defineProperty`는 변경할 수 없는 속성을 변경하려고 시도할 때 예외를 발생시키지지만, 실제 변경이 요청되지 않으면 아무 작업도 수행하지 않습니다. `v`가 `-0`이면 변경이 요청되지 않았으며, 오류가 발생하지 않습니다. 내부적으로 변경할 수 없는 속성이 재정의되면, 새로 지정된 값을 동일 값 동등을 사용하여 현재 값과 비교합니다.

동일 값 동등은 `Object.is` 메서드에 의해 제공됩니다. 이는 동등한 ID 값이 예상되는 언어의 거의 모든 곳에서 사용됩니다.

동일 값 제로 동등
----------

동일 값 값 동등과 유사하지만, +0과 -0은 같은 것으로 간주됩니다.

동일 값 제로 동등은 JavaScript API로 노출되지 않지만, 사용자 지정 코드로 구현할 수 있습니다.

```js
function sameValueZero(x, y) {
  if (typeof x === "number" && typeof y === "number") {
    // x와 y는 같거나(-0과 0일 수 있음) 둘 다 NaN입니다.
    return x === y || (x !== x && y !== y);
  }
  return x === y;
}
```

동일 값 제로는 `NaN`을 동등하게 취급하는 점에서만 엄격한 동등과 다르고, `-0`을 `0`과 동등하게 취급하는 점에서만 동일 값 동등과 다릅니다. 따라서 특히 NaN으로 작업할 때, 일반적으로 검색에서 가장 합리적인 동작을 수행합니다. 키 동등을 비교하기 위해 `Array.prototype.includes()`, `TypedArray.prototype.includes()` (en-US), 그리고 `Map`과 `Set` (en-US) 메서드에서 사용됩니다.

동등 메서드 비교
---------

사람들은 종종 삼중 등호가 이중 등호의 "향상된" 버전이라고 말하면서 이 둘을 비교합니다. 예를 들어, 이중 등호는 삼중 등호의 확장된 버전이라고 말할 수 있습니다. 왜냐하면 전자는 후자의 모든 작업을 수행하지만 피연산자에 유형 변환이 있기 때문입니다(예: `6 == "6"`). 또는 이중 등호가 기준선이고 삼중 등호가 향상된 버전이라고 주장할 수 있습니다. 두 피연산자가 동일한 유형이어야 하므로 추가 제약 조건이 추가되기 때문입니다.

그러나 이러한 생각은 방식은 동등 비교가 한쪽 끝에는 "완전히 엄격함"이 있고, 다른쪽에는 "완전히 느슨함"이 있는 1차원 "스펙트럼"을 형성합니다. 이 스펙트럼은 `Object.is`에서 부족한 점이 드러나는데, 이는 이중 등호보다 "느슨하지"도 않고, 삼중 등호보다 "엄격"하지도 않아 중간 어딘가에 맞지도 않기 때문입니다(즉, 이중 등호보단 엄격하지만 삼중 등호보다 느슨하다). 아래의 동일성 비교 표에서 이것이 `Object.is`가 `NaN`을 처리하는 방식 때문임을 알 수 있습니다. 만약 `Object.is(NaN, NaN)`이 `false`로 평가되면 `Object.is`는 `-0`과 `+0`을 구별하는 더 엄격한 삼중 등호의 형식으로 느슨/엄격 스펙트럼에 적합하다고 말할 수 있습니다. 그러나 `NaN` 처리는 이것이 사실이 아님을 의미합니다. 불행하게도 `Object.is`는 등호 연산자에 대한 느슨함이나 엄격함이 아니라 고유한 특성의 관점에서 생각해야 합니다.

| x | y | `==` | `===` | `Object.is` | `SameValueZero` |
| --- | --- | --- | --- | --- | --- |
| `undefined` | `undefined` | `✅ true` | `✅ true` | `✅ true` | `✅ true` |
| `null` | `null` | `✅ true` | `✅ true` | `✅ true` | `✅ true` |
| `true` | `true` | `✅ true` | `✅ true` | `✅ true` | `✅ true` |
| `false` | `false` | `✅ true` | `✅ true` | `✅ true` | `✅ true` |
| `'foo'` | `'foo'` | `✅ true` | `✅ true` | `✅ true` | `✅ true` |
| `0` | `0` | `✅ true` | `✅ true` | `✅ true` | `✅ true` |
| `+0` | `-0` | `✅ true` | `✅ true` | `❌ false` | `✅ true` |
| `+0` | `0` | `✅ true` | `✅ true` | `✅ true` | `✅ true` |
| `-0` | `0` | `✅ true` | `✅ true` | `❌ false` | `✅ true` |
| `0n` | `-0n` | `✅ true` | `✅ true` | `✅ true` | `✅ true` |
| `0` | `false` | `✅ true` | `❌ false` | `❌ false` | `❌ false` |
| `""` | `false` | `✅ true` | `❌ false` | `❌ false` | `❌ false` |
| `""` | `0` | `✅ true` | `❌ false` | `❌ false` | `❌ false` |
| `'0'` | `0` | `✅ true` | `❌ false` | `❌ false` | `❌ false` |
| `'17'` | `17` | `✅ true` | `❌ false` | `❌ false` | `❌ false` |
| `[1, 2]` | `'1,2'` | `✅ true` | `❌ false` | `❌ false` | `❌ false` |
| `new String('foo')` | `'foo'` | `✅ true` | `❌ false` | `❌ false` | `❌ false` |
| `null` | `undefined` | `✅ true` | `❌ false` | `❌ false` | `❌ false` |
| `null` | `false` | `❌ false` | `❌ false` | `❌ false` | `❌ false` |
| `undefined` | `false` | `❌ false` | `❌ false` | `❌ false` | `❌ false` |
| `{ foo: 'bar' }` | `{ foo: 'bar' }` | `❌ false` | `❌ false` | `❌ false` | `❌ false` |
| `new String('foo')` | `new String('foo')` | `❌ false` | `❌ false` | `❌ false` | `❌ false` |
| `0` | `null` | `❌ false` | `❌ false` | `❌ false` | `❌ false` |
| `0` | `NaN` | `❌ false` | `❌ false` | `❌ false` | `❌ false` |
| `'foo'` | `NaN` | `❌ false` | `❌ false` | `❌ false` | `❌ false` |
| `NaN` | `NaN` | `❌ false` | `❌ false` | `✅ true` | `✅ true` |

### 언제 Object.is()와 삼중 등호를 사용해야 할까?

일반적으로 0에 대한 `Object.is`의 특별한 동작에 관심을 가질 수 있는 유일한 시간은 특정 메타 프로그래밍 체계를 추구할 때, 특히 속성 설명자와 관련하여 작업이 `Object.defineProperty`의 일부 특성을 반영하는 것이 바람직할 때 입니다. 여러분의 사용 사례에 이것이 필요하지 않은 경우, `Object.is`를 피하고 대신 `===`를 사용하는 것이 좋습니다. 요구 사항에 두 `NaN` 값 간의 비교가 `true`로 평가되는 것이 포함되더라도, 일반적으로 `NaN` 검사(이전 버전의 ECMAScript에서 사용할 수 있는 `isNaN` 메서드 사용)를 특수한 경우로 지정하는 것이 비교에서 발생하는 0의 부호가 주변 계산에 어떻게 영향을 미칠 수 있는지 알아내는 것보다 쉽습니다.

다음은 코드에서 `-0`과 `+0`을 구분할 수 있는 내장 메서드와 연산자의 일부 목록입니다.

`-` (단항 부정)

다음 예제를 참조하세요.

```js
const stoppingForce = obj.mass \* -obj.velocity;
```

`obj.velocity`가 `0`(또는 `0`으로 계산)이면 해당 위치에 `-0`이 도입되고 `stopsingForce`로 전파됩니다.

`Math.atan2` (en-US), `Math.ceil`, `Math.pow`, `Math.round`

경우에 따라 `-0`이 매개변수 중 하나로 존재하지 않는 경우에도 `-0`이 이 메서드의 반환 값으로 식에 도입될 수 있습니다. 예를 들어 `Math.pow`를 사용하여 `-Infinity`를 음의 거듭제곱으로 올리면 홀수 지수는 `-0`으로 평가됩니다. 개별 메서드에 대한 문서를 참조하세요.

`Math.floor`, `Math.max`, `Math.min`, `Math.sin`, `Math.sqrt`, `Math.tan`

`-0`이 매개변수 중 하나로 존재하는 경우에 이 메서드에서 `-0` 반환 값을 가져올 수 있습니다. 예를 들어 `Math.min(-0, +0)`은 `-0`으로 평가됩니다. 개별 메서드,에 대한 문서를 참조하세요.

`~`, `<<`, `>>` (en-US)

이러한 연산자는 내부적으로 ToInt32 알고리즘을 사용합니다. 내부 32비트 정수 유형에는 0에 대한 표현이 하나만 있기 때문에 `-0`은 역 연산 후 왕복 여행에서 살아남지 못합니다. 예를 들어, `Object.is(~~(-0), -0)`과 `Object.is(-0 << 2 >> 2, -0)`은 모두 `false`로 평가됩니다.

0의 부호가 고려되지 않은 경우 `Object.is`에 의존하는 것은 위험할 수 있습니다. 물론 의도가 `-0`과 `+0`을 구분하는 것이라면 정확히 원하는대로 수행됩니다.

### 주의: Object.is()와 NaN

`Object.is` 사양은 `NaN`의 모든 인스턴스를 동일한 객체로 취급합니다. 그러나 형식화 배열을 사용할 수 있으므로 모든 맥락에서 동일하게 작동하지 않는 `NaN`의 고유한 부동 소수점 표현을 가질 수 있습니다.

```js
const f2b = (x) => new Uint8Array(new Float64Array([x]).buffer);
const b2f = (x) => new Float64Array(x.buffer)[0];
// NaN의 바이트 표현을 가져옵니다.
const n = f2b(NaN);
// NaN에 중요하지 않은 부호 비트인 첫 번째 비트를 변경합니다.
n[0] = 1;
const nan2 = b2f(n);
console.log(nan2); // NaN
console.log(Object.is(nan2, NaN)); // true
console.log(f2b(NaN)); // Uint8Array(8) [0, 0, 0, 0, 0, 0, 248, 127]
console.log(f2b(nan2)); // Uint8Array(8) [1, 0, 0, 0, 0, 0, 248, 127]
```

같이 보기
-----

* JS 비교 표