recursal/MDN huggingface dataset:
<fieldset>: 필드셋 요소
==================

**HTML `<fieldset>` 요소**는 웹 양식의 여러 컨트롤과 레이블(`<label>`)을 묶을 때 사용합니다.

시도해보기
-----

위의 예제에서 보듯, `<fieldset>` 요소는 HTML 양식 속에서 그룹을 만들 수 있으며 `<legend>` 요소로 그룹의 설명을 제공할 수 있습니다. 여러 특성을 지정할 수 있는데, 그 중 중요한 것 하나는 페이지 내 `<form>` 요소의 `id`를 받을 수 있는 `form` 특성으로, `<form>` 바깥의 `<fieldset>` 요소를 해당 양식에 포함해야 할 때 사용합니다. 다른 하나는 `disabled`로, `<fieldset>`의 모든 콘텐츠를 한 번에 비활성화할 수 있습니다.

특성
--

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

`disabled`

지정한 경우, 모든 자손 컨트롤을 비활성화합니다. 비활성 컨트롤은 편집할 수 없고, `<form>`을 제출할 때 데이터에 포함되지 않습니다. 마우스 클릭, 포커스 등 브라우저 이벤트도 모두 받지 않습니다. 브라우저는 비활성 컨트롤을 주로 회색으로 표시합니다. 단, `<legend>` 안의 양식 요소는 비활성 상태로 전환되지 않습니다.

`form`

`<fieldset>` 요소와 연결할 `<form>` 요소("양식 소유자")의 `id`. `<fieldset>`이 해당 `<form>` 안에 위치하지 않아도 연결할 수 있습니다.

`name`

그룹과 연관지을 이름.

**참고:** `<fieldset>`에 대한 설명은 자신이 포함한 첫 번째 `<legend>` 요소가 담당합니다.

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

`<fieldset>`에 스타일을 적용하기 전에 고려해야 하는 부분이 있습니다.

`<fieldset>`의 `display` (en-US) 속성의 값은 기본적으로 `block`이며, 새로운 블록 서식 맥락 (en-US)을 형성합니다. 인라인형 `display` 값을 지정하면 `inline-block`, 그렇지 않으면 `block`처럼 행동합니다. `<fieldset>`은 기본 스타일로 콘텐츠를 감싸는 `2px` 너비의 `groove` 테두리, 작은 양의 내부 여백, 그리고 `min-inline-size: min-content` (en-US)를 갖습니다.

`<legend>` 요소는 `<fieldset>`의 블록 시작 방향(대개 위쪽) 테두리 위를 가로지르는 위치에 놓입니다. `<legend>` 또한 자신의 블록 서식 맥락을 만들며, 너비는 자신의 콘텐츠에 맞춰져 늘어나거나 줄어듭니다. `display`는 항상 블록형이 됩니다. 즉, `display: inline`도 `block`처럼 동작합니다.

`<fieldset>`의 콘텐츠는 별도의 익명 상자가 담게 됩니다. 익명 상자는 `<fieldset>`으로부터 특정 속성을 상속합니다. `<fielset>`에 `display: grid` 또는 `display: inline-grid`를 지정하면 익명 상자는 그리드 서식 맥락을 가지며, `display: flex` 또는 `display: inline-flex`를 지정하면 익명 상자가 플렉스 서식 맥락을 갖습니다. 그 외의 경우 블록 서식 맥락입니다.

**참고:** 글 작성 시점에서, Microsoft Edge와 Google Chrome에는 `<fieldset>` 내부에서 플렉스박스와 그리드 레이아웃을 사용할 수 없는 버그가 존재합니다. GitHub 이슈에서 버그 추적 링크를 확인할 수 있습니다.

예제
--

### 간단한 필드셋

다음 예제는 `<legend>`와 하나의 컨트롤을 가진 단순한 `<fieldset>`을 보입니다.


```html
<form action="#">
  <fieldset>
    <legend>Simple fieldset</legend>
    <input type="radio" id="radio" />
    <label for="radio">Spirit of radio</label>
  </fieldset>
</form>
```

### 비활성 필드셋

다음 예제는 두 개의 컨트롤을 가진 비활성 `<fieldset>`을 보입니다. 각각의 컨트롤은 `disabled` 특성이 없으나, 필드셋으로 인해 함께 비활성 상태가 된 점을 확인할 수 있습니다.


```html
<form action="#">
  <fieldset disabled>
    <legend>Disabled fieldset</legend>
    <div>
      <label for="name">Name: </label>
      <input type="name" id="text" value="Chris" />
    </div>
    <div>
      <label for="pwd">Archetype: </label>
      <input type="password" id="text" value="Wookie" />
    </div>
  </fieldset>
</form>
```

기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠, 구획 루트,
 양식 관련 콘텐츠(나열됨), 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 
 선택적인 `<legend>` 요소와 그 이후의
 플로우 콘텐츠.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | `group` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLFieldSetElement` (en-US) |

명세
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<var>: 변수 요소
============

**HTM `<var>` 요소**는 수학 표현 또는 프로그래밍에서 변수의 이름을 나타냅니다. 보통 현재 글씨체의 기울임꼴로 표시하지만, 브라우저마다 다를 수 있습니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

### 관련 요소

`<var>`와 함께 자주 사용하는 요소는 다음과 같습니다.

* `<code>`: HTML 코드 요소
* `<kbd>`: HTML 키보드 입력 요소
* `<smap>`: HTML 출력 예시 요소

`<var>`의 의미에 맞춰 사용하지 않고, 기울임꼴을 적용하기 위해 잘못 사용한 경우, 적절한 CSS와 `<span>`를 사용해야 합니다. 혹은, 의미에 맞는 요소를 다음 목록에서 골라 사용하세요.

* `<em>`
* `<i>`
* `<q>`
예제
--

### 기본 예제

`<var>`를 사용해 수학 등식의 변수명을 나타내는 간단한 예제입니다.
```

A simple equation:
  x = y + 2
```

명세
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<ol>
====

**HTML `<ol>` 요소**는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠. 또한, 최소 하나의 `<li>` 요소를 자식으로 둔다면
 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 
 0개 이상의 `<li>`,
 `<script>`, `<template>`
 요소.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | `directory` (en-US), `group` (en-US),
 `listbox` (en-US), `menu` (en-US),
 `menubar` (en-US), `radiogroup` (en-US),
 `tablist` (en-US), `toolbar` (en-US),
 `tree` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLOListElement` (en-US) |

특성
--

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

`reversed`

목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.

`start`

항목을 셀 때 시작할 수. `type`이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 `start="4"`를 사용하세요.

`type`

항목을 셀 때 사용할 카운터 유형.

* `'a'`는 소문자 알파벳,
* `'A'`는 대문자 알파벳,
* `'i'`는 소문자 로마 숫자,
* `'I'`는 대문자 로마 숫자,
* `'1'` 는 숫자(기본값)을 나타냅니다.

`type`은 아래의 모든 `<li>`에 적용되지만, `type` 특성을 가진 `<li>`는 그 값을 대신 사용합니다.

**참고:** 항목을 각각의 숫자/문자로 참조하는 기술적 또는 법률적 문서가 아니라면 CSS `list-style-type` (en-US) 속성을 대신 사용하세요.

사용 일람
-----

보통 정렬 목록의 항목은 선행하는 숫자나 문자 등 마커 (en-US)와 함께 표시합니다.

`<ol>`과 `<ul>`은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.

`<ol>`과 `<ul>`은 모두 목록을 나타냅니다. 차이가 있다면 `<ol>`에서는 순서가 중요하다는 점입니다. 예를 들어,

* 단계별 요리법
* 내비게이션
* 영양정보에서 비율의 내림차순으로 정렬한 원재료 목록

항목의 순서를 바꿨을 때 의미도 바뀐다면 `<ol>`을 사용하세요. 그렇지 않으면 `<ul>`을 사용할 수 있습니다.

예제
--

### 간단한 예제


```html
<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>
```

### 로마 숫자로 표기


```html
<ol type="i">
  <li>Introduction</li>
  <li>List of Greivances</li>
  <li>Conclusion</li>
</ol>
```

### `start` 특성 사용하기


```html
<p>Finishing places of contestants not in the winners’ circle:</p>

<ol start="4">
  <li>Speedwalk Stu</li>
  <li>Saunterin’ Sam</li>
  <li>Slowpoke Rodriguez</li>
</ol>
```

### 중첩 목록


```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- closing </li> tag not here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  </li>
  <!-- Here's the closing </li> tag -->
  <li>third item</li>
</ol>
```

### 정렬 목록 안의 비정렬 목록


```html
<ol>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>
  <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>
```

명세
--

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

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

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

같이 보기
-----

* 리스트 관련 다른 요소: `<ul>`, `<li>`, `<menu>` (en-US)
* `<ol>` 요소와 유용하게 사용할 수 있는 CSS 속성
    + 서수를 표현할 방식을 지정하는 `list-style` (en-US) 속성.
    + 복잡한 중첩 목록을 처리하기 위한 CSS 카운터
    + 더 이상 사용하지 않는 `compact` 특성을 대체할 수 있는 `line-height` (en-US)
    + 항목의 들여쓰기를 조정하기 위한 `margin` 속성.
<figcaption>
============

**HTML `<figcaption>` 요소는** 부모 `<figure>` 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | `<figure>` 요소의 처음 혹은 마지막. |
| 가능한 ARIA 역할 | `group` (en-US), `presentation` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

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

예제
--

`<figcaption>`에 대한 예제는 `<figure>` 페이지에 포함되어 있습니다.

명세
--

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

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

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

같이 보기
-----

* `<figure>` 요소
<progress>
==========

**HTML `<progress>` 요소**는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.

시도해보기
-----

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

특성
--

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

`max`

`<progress>` 요소가 나타내는 작업에 필요한 작업량. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.

`value`

`<progress>` 요소가 나타내는 작업을 완료한 양. 유효한 부동소수점 숫자여야 하고, `max` 특성을 지정한 경우 0 이상 `max` 이하, 그렇지 않으면 0 이상 1 이하여야 합니다. `value` 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.


**참고:** `<meter>` 요소와 달리, 최솟값은 항상 0이며 `min` 특성을 지정할 수 없습니다.

**참고:** CSS `:indeterminate` (en-US) 의사 클래스를 사용하면 미결정 상태의 진행 표시줄을 선택할 수 있습니다. 값을 지정한 진행 표시줄을 미결정 상태로 바꾸려면 `element.removeAttribute('value')`를 사용해 `value` 특성을 제거해야 합니다.

예제
--


```html
<progress value="70" max="100">70 %</progress>
```

### 결과

명세
--

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

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

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

같이 보기
-----

* `<meter>`
* `:indeterminate` (en-US)
* `-moz-orient` (en-US)
* `::-moz-progress-bar` (en-US)
* `::-ms-fill`
* `::-webkit-progress-bar` (en-US)
* `::-webkit-progress-value` (en-US)
* `::-webkit-progress-inner-element` (en-US)
<data>
======

**HTML `<data>` 요소**는 주어진 콘텐츠를 기계가 읽을 수 있는 해석본과 연결합니다. 콘텐츠가 시간 혹은 날짜 관련 정보라면 대신 `<time>` 요소를 사용하세요.

시도해보기
-----

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

특성
--

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

`value`

기계가 읽을 수 있는 형태의 콘텐츠 해석본.

예제
--

밑의 예제는 상품의 이름을 표시하면서, 각각의 상품 번호도 연결합니다.


```html
<p>새로운 상품들</p>
<ul>
  <li><data value="398">미니 케찹</data></li>
  <li><data value="399">점보 케찹</data></li>
  <li><data value="400">메가 점보 케찹</data></li>
</ul>
```

명세
--

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

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

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

같이 보기
-----

* HTML `<time>` 요소.
<caption>: 표 설명 요소
==================

**HTML `<caption>` 요소**는 표의 설명 또는 제목을 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음 |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 바로 뒤에 스페이스나 주석이 오지 않으면 닫는 태그를 생략할 수 있습니다. |
| 가능한 부모 요소 | `<table>` (en-US) 요소. 첫 번째 자식이어야 합니다. |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLTableCaptionElement` (en-US) |

특성
--

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

### Deprecated attributes

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

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

This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:

`left`

The caption is displayed to the left of the table.

`top`

The caption is displayed above the table.

`right`

The caption is displayed to the right of the table.

`bottom`

The caption is displayed below the table.


> 
> **Warning:** Do not use this attribute, as it has been deprecated. The `<caption>` element should be styled using the CSS properties `caption-side` (en-US) and `text-align`.
> 
> 
> 

사용 일람
-----

`<caption>` 요소는 부모 `<table>` (en-US) 요소의 첫 번째 자식이어야 합니다.

`<caption>` 요소를 가진 `<table>` 요소가 만약 `<figure>` 요소의 유일한 자식인 경우, `<figcaption>`을 대신 사용하세요.

예제
--

다음의 간단한 예제는 설명을 포함한 표를 보입니다.


```html
<table>
  <caption>
    Example Caption
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>
```


```
caption {
  caption-side: top;
  align: right;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  border: 1px solid black;
}
```

명세
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<head>: 문서 메타데이터 (헤더) 요소
========================

**HTML `<head>` 요소**는 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있습니다.

**참고:** `<head>`의 주 목적은 기계 처리를 위한 정보이고, 사람이 읽을 수 있는 정보가 아닙니다. 최상위 제목, 작성자 목록 등 사람에게 보여야 할 정보는 `<header>` 요소를 사용하세요.


|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 
 현재 문서가 `<iframe>` (en-US)
`srcdoc` (en-US) 문서거나, 제목 정보가
 더 높은 단계의 규약에 존재하는 경우(HTML 이메일의 제목처럼) 0개 이상의
 메타에이터 콘텐츠.


 이외에는 하나 이상의 메타데이터 콘텐츠. 단, 정확히 한 개의
 `<title>` 요소를 포함해야 합니다.
  |
| 태그 생략 | `<head>` 요소 내의 첫 번째 것이 요소라면 여는 태그를
 생략할 수 있습니다.`<head>` 요소 뒤의 첫 번째
 항목이 공백문자나 주석이 아니라면 닫는 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<html>` 요소의 첫 번째 자식으로 배치. |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 요소 | 없음 |
| DOM 인터페이스 | `HTMLHeadElement` (en-US) |

특성
--

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

예제
--


```html
<!doctype html>
<html>
  <head>
    <title>문서 제목</title>
  </head>
</html>
```

참고
--

HTML5 호환 브라우저는 `<head>`가 없는 경우 자동으로 생성합니다. 하지만 오래된 구형 브라우저에서는 그렇지 않습니다.

명세
--

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

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

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

같이 보기
-----

* `<head>` 안에 배치할 수 있는 요소
    + `<title>`
    + `<base>`
    + `<link>`
    + `<style>`
    + `<meta>`
    + `<script>`
    + `<noscript>`
    + `<template>`
<noscript>
==========

**HTML `<noscript>` 요소**는 페이지의 스크립트 유형을 지원하지 않거나, 브라우저가 스크립트를 비활성화한 경우 보여줄 HTML 구획을 정의합니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 메타데이터 콘텐츠,
 플로우 콘텐츠,
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 
 스크립트가 비활성 상태이며 자신이 `<head>`
 요소의 자손인 경우, 순서대로
 * 0개 이상의 `<link>` 요소
* 0개 이상의 `<style>` 요소
* 0개 이상의 `<meta>` 요소

 스크립트가 비활성 상태이나 `<head>` 요소의 자손이 아닌
 경우 모든 투명 콘텐츠. 단, 다른 `<noscript>` 요소는
 불가능합니다.

그 외의 경우 플로우 콘텐츠와 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 
 구문 콘텐츠를 허용하는 모든 요소, 또는 `<head>`.
 단, 두 경우 모두 다른 `<noscript>` 요소가 존재하는 경우
 불가능합니다.
  |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLElement` |

특성
--

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

예제
--


```html
<noscript>
  <!-- anchor linking to external file -->
  <a href="http://www.mozilla.com/">External Link</a>
</noscript>
<p>Rocks!</p>
```

### 스크립트 활성화 상태에서의 결과

Rocks!

### 스크립트 비활성화 상태에서의 결과

External Link

Rocks!

명세
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<canvas>: 그래픽 캔버스 요소
====================

**HTML `<canvas>` 요소**는 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠,
 내장 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 투명하지만
 대화형 콘텐츠가 아닌 요소. 단, `<a>`,
 `<button>`, 그리고
 `<input>` (en-US) 중
 `type` (en-US) 특성이
 `checkbox`, `radio`, `button`인 요소는
 가능
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 가능한 ARIA 역할 | 모두 |
| DOM 인터페이스 | `HTMLCanvasElement` |

특성
--

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

`height`

좌표 공간의 높이입니다. CSS 픽셀 단위로, 기본값은 150입니다.

`moz-opaque` 
비표준

지원이 중단되었습니다

투명도가 중요한 요소인지를 캔버스에 알려줍니다. 투명도가 없음을 알게되면 페인팅 성능이 최적화됩니다. Mozilla 기반 브라우저에서만 지원하므로, 표준 `canvas.getContext('2d', { alpha: false })` 를 대신 사용하세요.

`width`

좌표 공간의 너비입니다. CSS 픽셀 단위로, 기본값은 300입니다.

사용 일람
-----

### 대체 콘텐츠

`<canvas>` 블록 안에 콘텐츠를 추가해 대체 콘텐츠로서 사용할 수 있습니다. 대체 콘텐츠는 캔버스를 지원하지 않는 구형 브라우저와, JavaScript를 비활성화한 브라우저에서 표시됩니다. 유용한 대체 텍스트, 혹은 하위 DOM을 제공하면 캔버스의 접근성을 향상할 수 있습니다.

### 닫는 태그 필수

`<img>` 요소와 달리, `<canvas>` 요소는 닫는 태그(`</canvas>`)를 필요로 합니다.

### 캔버스 크기 조절: CSS vs. HTML

캔버스의 표시 크기는 CSS로도 수정할 수 있습니다. 그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.

따라서 `<canvas>` 요소의 `width`와 `height` 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.

### 최대 캔버스 크기

`<canvas>` 요소의 최대 크기는 매우 크지만, 정확한 최대 크기는 브라우저마다 다릅니다. 다음 표는 다양한 테스트와 여러 출처(Stack Overflow 등)에서 수집한 값입니다.

| 브라우저 | 최대 높이 | 최대 너비 | 최대 크기 |
| --- | --- | --- | --- |
| Chrome | 32,767 픽셀 | 32,767 픽셀 | 268,435,456 픽셀 (i.e., 16,384 x 16,384) |
| Firefox | 32,767 픽셀 | 32,767 픽셀 | 472,907,776 픽셀 (i.e., 22,528 x 20,992) |
| Safari | 32,767 픽셀 | 32,767 픽셀 | 268,435,456 픽셀 (i.e., 16,384 x 16,384) |
| IE | 8,192 픽셀 | 8,192 픽셀 | ? |

**참고:** 최대 면적 또는 영역을 초과하면 그리기 명령이 동작하지 않으므로, 캔버스를 사용할 수 없습니다.

예제
--

### HTML

이 코드 조각은 HTML 문서에 캔버스를 추가합니다. 대체 텍스트를 추가해서 브라우저가 캔버스를 렌더링 할 수 없거나, 캔버스를 읽을 수 없는 경우에 대비했습니다.


```html
<canvas id="canvas" width="300" height="300">
  캔버스의 내용을 설명하는 대체 텍스트
</canvas>
```

### JavaScript

그 다음, JavaScript 코드 내에서 `HTMLCanvasElement.getContext()`를 호출해 그리기 맥락을 얻어서 캔버스 위에 그립니다.


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
```

### 결과

접근성 문제
------

### 대체 콘텐츠

`<canvas>` 요소 자체는 비트맵에 불과하며 그려진 객체에 대한 어떠한 정보도 제공하지 않습니다. 캔버스 콘텐츠는 시맨틱 HTML 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성 웹 사이트나 앱에서는 캔버스 사용을 피해야 합니다. 다음 안내서는 캔버스를 보다 쉽게 접근 가능한 형태로 사용하는 법을 설명합니다.

* MDN Hit regions and accessability
* Canvas 접근성 유즈 케이스
* Canvas 엘리먼트 접근성 문제
* Firefox 13 의 HTML5 Canvas 접근성 – by Steve Faulkner
* 대화형 캔버스 엘리먼트의 모범 사례
명세
--

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

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

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

같이 보기
-----

* Canvas API
* 캔버스 자습서
* 캔버스 치트 시트
* 캔버스 관련 데모 (en-US)
<template>: 콘텐츠 템플릿 요소
======================

**HTML `<template>` 요소**는 페이지를 불러온 순간 즉시 그려지지는 않지만, 이후 JavaScript를 사용해 인스턴스를 생성할 수 있는 HTML 코드를 담을 방법을 제공합니다.

템플릿은 콘텐츠 조각을 나중에 사용하기 위해 담아놓는 컨테이너로 생각하세요. 페이지를 불러오는 동안 구문 분석기가 `<template>` 요소의 콘텐츠도 읽기는 하지만, 이는 유효성을 검증하기 위함이며 렌더링 하기 위함은 아닙니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 메타데이터 콘텐츠,
 플로우 콘텐츠,
 구문 콘텐츠,
 스크립트 지원 요소.
  |
| 가능한 콘텐츠 | 제한 없음. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 
 메타데이터 콘텐츠, 구문 콘텐츠, 또는 스크립트 지원 요소를 허용하는 모든
 요소. 또한, `span` (en-US) 특성이 없는
 `<colgroup>` (en-US) 요소도 가능.
  |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLTemplateElement` |

특성
--

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

다만, `HTMLTemplateElement`는 읽기 전용 `content` (en-US) 속성을 가집니다. `content`는 템플릿이 담고 있는 DOM 하위 트리를 나타내는 `DocumentFragment`입니다.

예제
--

우선 예제의 HTML부터 보겠습니다.


```html
<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- 존재하는 데이터는 선택적으로 여기에 포함됩니다 -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>
```


먼저, 나중에 JavaScript 코드를 사용해 컨텐츠를 삽입할 테이블이 있습니다. 그 다음 테이블의 열을 표현하는 HTML 조각의 구조를 설명하는 템플릿이 옵니다.

이제 테이블이 생성되었고 템플릿이 정의되었으므로, JavaScript 를 사용해 템플릿을 사용해 구성된 열을 기반으로 각 열을 테이블로 삽입합니다.


```js
// 템플릿 엘리먼트의 컨텐츠 존재 유무를 통해
// 브라우저가 HTML 템플릿 엘리먼트를 지원하는지 확인합니다
if ("content" in document.createElement("template")) {
  // 기존 HTML tbody 와 템플릿 열로 테이블을 인스턴스화합니다
  var t = document.querySelector("#productrow");

  // 새로운 열을 복제하고 테이블에 삽입합니다
  var tb = document.querySelector("tbody");
  var clone = document.importNode(t.content, true);
  td = clone.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  tb.appendChild(clone);

  // 새로운 열을 복제하고 테이블에 삽입합니다
  var clone2 = document.importNode(t.content, true);
  td = clone2.querySelectorAll("td");
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans 2";

  tb.appendChild(clone2);
} else {
  // HTML 템플릿 엘리먼트를 지원하지 않으므로
  // 테이블에 열을 추가하는 다른 방법을 찾습니다.
}
```


결과는 JavaScript 를 통해 추가된 두 개의 새로운 열을 포함하는 기존 HTML 테이블입니다.
```

table {
  background: #000;
}
table td {
  background: #fff;
}
```

명세
--

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

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

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

같이 보기
-----

* 템플릿과 슬롯 사용하기 (en-US)
<ruby>
======

**HTML `<ruby>` 요소**는 루비 주석을 나타냅니다. 루비 주석은 동아시아 문자의 발음을 표기할 때 사용합니다.

시도해보기
-----

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

특성
--

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

예제
--

### 문자별 표기


```html
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
```

### 단어별 표기


```html
<ruby> 明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp> </ruby>
```

명세
--

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

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

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

같이 보기
-----

* `<rt>`
* `<rp>`
* `<rb>`
* `<rtc>`
* `<rbc>`
<nav>: 탐색 구획 요소
===============

**HTML `<nav>` 요소**는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

* 문서의 모든 링크가 `<nav>` 요소 안에 있을 필요는 없습니다. `<nav>` 요소는 주요 탐색 링크 블록을 위한 요소입니다. 대개 `<footer>` 요소가 `<nav>`에 들어가지 않아도 되는 링크를 포함합니다.
* `<nav>` 하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 문서에서 여러 개의 `<nav>` 태그를 가질 수 있습니다. 이럴 때 `aria-labelledby`를 사용해 접근성을 향상할 수 있습니다.
* 스크린 리더 등 장애를 가진 사용자를 위한 사용자 에이전트는 최초 렌더링에서 탐색 전용 콘텐츠를 제외할지 결정할 때 `<nav>`를 참고합니다.
예제
--


```xml
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
```

명세
--

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<center>
========

**지원이 중단되었습니다:** 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.

개요
--

이 HTML Center (`<center>`)요소는 또다른 블록요소을 포함하거나, 인라인요소(Inline)를 포함할 수 있는 블록속성(block-level) 의 요소이다. 그리고 해당 <center> 요소안에 포함된 전체요소는 <center>의 내용안에 가운데 정렬이 된다. (통상적으로 `<body>`로 쓰임).

이 태그는 HTML4(또는 XHTML 1)이후에는 잘사용되지 않고, CSS의 `text-align` 속성이 즐겨 사용된다. `<div>` (en-US) 요소나 `<p>`요소 같은 블록속성이 있는 요소에 사용될 수 있다.또 다른 방법으로는 CSS속성을 사용하여 `margin-left` 또는 `margin-right` 또는 margin을 자동(Css("margin") 를 `0 auto)`으로 설정한다.

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

이 요소는 `HTMLElement` 인터페이스를 구현합니다.

**참고:** **Implementation note:** up to Gecko 1.9.2 inclusive, Firefox implements the `HTMLSpanElement` interface for this element.

예제 1
----


```html
<center>
  This text will be centered.
  <p>So will this paragraph.</p>
</center>
```

예제 2 (CSS 대안)
-------------


```html
<div style="text-align:center">
  This text will be centered.
  <p>So will this paragraph.</p>
</div>
```

예제 3 (CSS 대안)
-------------


```html
<p style="text-align:center">
  This line will be centered.<br />
  And so will this line.
</p>
```

메모
--

Applying `text-align``:center` to a `<div>` (en-US) or `<p>` element centers the *contents* of those elements while leaving their overall dimensions unchanged.

더 보기
----

* `text-align`
* `display` (en-US)
<legend>
========

**HTML `<legend>` 요소**는 부모 `<fieldset>` 콘텐츠의 설명을 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 구문 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | `<fieldset>` 요소. `<legend>`가
 첫 번째 자식이어야 합니다.
  |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLLegendElement` (en-US) |

특성
--

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

예제
--

`<form>`의 예제를 참고하세요.

명세
--

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

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

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