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

시도해보기
-----

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

특성
--

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

사용 일람
-----

* 요약 키워드, 리뷰의 제품명 등, 특별한 중요성을 가지고 있지는 않지만 굵게 표시할 부분에 `&#x3C;b>`를 사용하세요.
* `&#x3C;b>` 요소와 `<strong>` (en-US), `<em>`, `<mark>` 요소를 혼동하지 않도록 주의하세요. `<strong>` (en-US) 요소는 **중요**한 글을, `<em>` 요소는 약간의 강조가 필요한 글을, `<mark>` 요소는 관련성이 있는 글을 나타냅니다. `&#x3C;b>` 요소는 아무런 의미도 갖지 않으므로 다른 요소가 적합하지 않을 때만 사용하세요.
* 비슷한 이유로 `&#x3C;b>` 요소로만 제목을 만들어선 안됩니다. 제목은 `<h1>`에서 `<h6>` 태그로 표현하세요. 특히 스타일 시트를 사용해 제목 요소의 스타일을 바꿀 수 있다는 점을 생각해보면, 제목이 꼭 굵은 글씨체일 필요는 없습니다.
    + It is a good practice to use the **class** attribute on the `&#x3C;b>` in order to convey additional semantic information (for example `&#x3C;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.
* 과거 `&#x3C;b>` 요소는 굵을 글씨를 만들 때 사용했습니다. HTML4부터 스타일 정보는 사용하지 않으므로 `&#x3C;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>
==========

**지원이 중단되었습니다:** 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 `<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 `<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 `<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 &lt;article&gt;?
</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 `<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>` 요소
JavaScript 안내서
==============

JavaScript 안내서에서 JavaScript 언어 개요와 사용법을 알아보세요. 언어 기능에 대해 상세한 정보가 필요하면 JavaScript 참고서를 방문하세요.

본 안내서는 여러 장으로 구성되어 있습니다.

소개
--

Overview: Introduction

* About this guide
* About JavaScript
* JavaScript and Java
* ECMAScript
* Tools
* Hello World
Grammar and types
-----------------

Overview: Grammar and types

* Basic syntax & comments
* Declarations
* Variable scope
* Variable hoisting
* Data structures and types
* Literals
Control flow and error handling
-------------------------------

Overview: Control flow and error handling

* `if...else`
* `switch`
* `try`/`catch`/`throw`
* Error objects
Loops and iteration
-------------------

Overview: Loops and iteration

* `for`
* `while`
* `do...while`
* `continue`
* `break`
* `for..in`
* `for..of`
Functions
---------

Overview: Functions

* Defining functions
* Calling functions
* Function scope
* Closures
* Arguments & parameters
* Arrow functions
Expressions and operators
-------------------------

Overview: Expressions and operators

* Assignment & Comparisons
* Arithmetic operators
* Bitwise & logical operators
* Conditional (ternary) operator
Numbers and dates
-----------------

Overview: Numbers and dates

* Number literals
* `Number` object
* `Math` object
* `Date` object
Text formatting
---------------

Overview: Text formatting

* String literals
* `String` object
* Template literals
* Internationalization
* Regular Expressions
Indexed collections
-------------------

Overview: Indexed collections

* Arrays
* Typed arrays
Keyed collections
-----------------

Overview: Keyed collections

* `Map`
* `WeakMap`
* `Set`
* `WeakSet`
Working with objects
--------------------

Overview: Working with objects

* Objects and properties
* Creating objects
* Defining methods
* Getter and setter
Using classes
-------------

Overview: Using classes

* Declaring a class
* Various class features (en-US)
* Extends and inheritance (en-US)
* Why classes? (en-US)
Promises
--------

Overview: Promises

* Guarantees
* Chaining
* Error propagation
* Composition
* Timing
Iterators and generators
------------------------

Overview: Iterators and generators

* Iterators
* Iterables
* Generators
Meta programming
----------------

Overview: Meta programming (en-US)

* `Proxy` (en-US)
* Handlers and traps (en-US)
* Revocable Proxy (en-US)
* `Reflect` (en-US)
JavaScript modules
------------------

Overview: JavaScript modules

* Exporting
* Importing
* Default exports
* Renaming features
* Aggregating modules
* Dynamic module loading
* 다음 »
JavaScript 참고서
==============

 이 페이지는 JavaScript 언어에 대한 정보 보관소입니다.
 이 참고서에 대해 더 읽어보세요.

내장 객체
-----

JavaScript 표준 내장 객체와 그 메서드 및 속성입니다.

### 값 속성

* `globalThis`
* `Infinity`
* `NaN`
* `undefined`
### 함수 속성

* `eval()`
* `isFinite()`
* `isNaN()`
* `parseFloat()`
* `parseInt()`
* `decodeURI()`
* `decodeURIComponent()`
* `encodeURI()`
* `encodeURIComponent()`
### 기초 객체

* `Object`
* `Function`
* `Boolean`
* `Symbol`
### 오류 객체

* `Error`
* `EvalError`
* `RangeError`
* `ReferenceError`
* `SyntaxError`
* `TypeError`
* `URIError`
* `AggregateError`
### 숫자와 날짜

* `Number`
* `BigInt`
* `Math`
* `Date`
### 텍스트 처리

* `String`
* `RegExp`
### 인덱스 콜렉션

* `Array`
* `Int8Array`
* `Uint8Array`
* `Uint8ClampedArray`
* `Int16Array`
* `Uint16Array`
* `Int32Array`
* `Uint32Array`
* `BigInt64Array`
* `BigUint64Array`
* `Float32Array`
* `Float64Array`
### 키 콜렉션

* `Map`
* `Set` (en-US)
* `WeakMap`
* `WeakSet`
### 구조화된 데이터

* `ArrayBuffer`
* `SharedArrayBuffer`
* `Atomics`
* `DataView`
* `JSON`
### 메모리 관리

* `WeakRef` (en-US)
* `FinalizationRegistry` (en-US)
### 제어 추상화

* `Promise`
* `GeneratorFunction`
* `AsyncGeneratorFunction` (en-US)
* `Generator`
* `AsyncGenerator` (en-US)
* `AsyncFunction`
### 리플렉션

* `Reflect`
* `Proxy`
### 국제화

* `Intl` (en-US)
* `Intl.Collator` (en-US)
* `Intl.DateTimeFormat`
* `Intl.DisplayNames`
* `Intl.ListFormat` (en-US)
* `Intl.Locale` (en-US)
* `Intl.NumberFormat`
* `Intl.PluralRules` (en-US)
* `Intl.RelativeTimeFormat` (en-US)
* `Intl.Segmenter` (en-US)
명령문
---

JavaScript 명령문과 선언문입니다.

### 흐름 제어

* 블록
* 빈 명령문
* `break`
* `continue`
* `if...else`
* `switch` (en-US)
* `throw`
* `try...catch` (en-US)
### 선언

* `var`
* `let`
* `const`
### 함수와 클래스

* `function`
* `function*`
* `async function`
* `return`
* `class`
### 순회와 반복

* `do...while`
* `for`
* `for each...in`
* `for...in`
* `for...of`
* `for await...of`
* `while`
### 기타

* `debugger`
* `export`
* `import`
* `label`
* `with` (en-US)
표현식 및 연산자
---------

JavaScript 표현식과 연산자입니다.

### 일차 표현식

* `this`
* `function`
* `class`
* `function*`
* `yield`
* `yield*`
* `async function`
* `async function*`
* `await`
* `[]`
* `{}`
* `/ab+c/i`
* `( )`
* `null`
### 좌변 표현식

* Property accessors
* `?.` (Optional chaining)
* `new`
* `new.target`
* `import.meta` (en-US)
* `super`
* `...obj`
### 증감

* `A++`
* `A--`
* `++A`
* `--A`
### 단항 연산자

* `delete` (en-US)
* `void`
* `typeof`
* `+`
* `-`
* `~`
* `!`
### 산술 연산자

* `+`
* `-`
* `/`
* `*`
* `%`
* `**`
### 관계 연산자

* `in`
* `instanceof`
* `<` (en-US)
* `>` (en-US)
* `<=` (en-US)
* `>=` (en-US)
### 동일 연산자

* `==`
* `!=`
* `===` (en-US)
* `!==` (en-US)
### 비트 시프트 연산자

* `<<`
* `>>` (en-US)
* `>>>` (en-US)
### 이진 비트 연산자

* `&`
* `|` (en-US)
* `^` (en-US)
### 이진 논리 연산자

* `&&`
* `||`
* `??`
### 조건(삼항) 연산자

* `(condition ? ifTrue : ifFalse)`
### 할당 연산자

* `=`
* `*=`
* `**=`
* `/=`
* `%=`
* `+=`
* `-=`
* `<<=`
* `>>=` (en-US)
* `>>>=`
* `&=`
* `^=` (en-US)
* `|=` (en-US)
* `&&=` (en-US)
* `||=` (en-US)
* `??=` (en-US)
* `[a, b] = arr`
* `{ a, b } = obj`
### 쉼표 연산자

* `,`
함수
--

 이 장은 응용 프로그램을 개발할 때 JavaScript 함수를 사용하는
 법을 설명합니다.

* `arguments`
* 화살표 함수
* 기본 매개변수
* 나머지 매개변수
추가 참고 페이지
---------

* 어휘 구문 (en-US)
* 자료형과 자료 구조
* 엄격 모드
* 사라진 기능 (en-US)
표준 내장 객체
========

이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다.

표준 내장 객체와 **전역 객체**를 헷갈리지 않도록 주의하세요. 표준 내장 객체는 **전역 범위의 여러 객체**를 일컫습니다. 전역 객체는 엄격 모드를 사용하지 않을 땐 전역 범위에서 `this`, 지원하는 환경에선 `globalThis`를 사용해 접근할 수 있는 객체입니다. 사실 전역 범위는 **전역 객체와 전역 객체가 상속한 속성**으로 이루어집니다.

전역 범위의 나머지 객체는 사용자 스크립트가 생성하거나, 호스트 응용 프로그램이 제공합니다. 브라우저 맥락에서 사용 가능한 호스트 객체는 API 참고서에서 읽을 수 있습니다. DOM (en-US) 및 코어 JavaScript의 차이에 관한 자세한 정보는 JavaScript 기술 개요를 참고하세요.

항목별 표준 객체
---------

### 값 속성

아래 전역 속성은 간단한 값을 반환하며 속성이나 메서드를 가지고 있지 않습니다.

* `Infinity`
* `NaN`
* `undefined`
* `globalThis`
### 함수 속성

객체에 붙지 않고 전역으로 호출하는 함수로, 반환 값을 호출자에게 바로 반환합니다.

* `eval()`
* `isFinite()`
* `isNaN()`
* `parseFloat()`
* `parseInt()`
* `encodeURI()`
* `encodeURIComponent()`
* `decodeURI()`
* `decodeURIComponent()`
* **Deprecated**
    + `escape()` (en-US) 
    지원이 중단되었습니다
    + `unescape()` (en-US) 
    지원이 중단되었습니다
### 기초 객체

다른 모든 객체의 기반이 되는 기초이자 기본 객체입니다. 일반 객체, 함수, 오류를 나타내는 객체를 포함합니다.

* `Object`
* `Function`
* `Boolean`
* `Symbol`

#### 오류 객체

오류 객체는 기초 객체의 특별한 유형으로, 기본적인 `Error` 객체와 함께 특정 용도에 최적화된 오류 형태도 포함합니다.

* `Error`
* `AggregateError`
* `EvalError`
* `InternalError` 
비표준
* `RangeError`
* `ReferenceError`
* `SyntaxError`
* `TypeError`
* `URIError`
### 숫자 및 날짜

숫자, 날짜, 수학 계산을 나타내는 기본 객체입니다.

* `Number`
* `BigInt`
* `Math`
* `Date`
### 텍스트 처리

문자열을 나타내는 객체로 문자열을 조작할 방법도 제공합니다.

* `String`
* `RegExp`
### 인덱스 콜렉션

인덱스 값으로 정렬된 데이터의 콜렉션을 나타냅니다. 배열(형식배열 포함)과 배열형 객체를 포함합니다.

* `Array`
* `Int8Array`
* `Uint8Array`
* `Uint8ClampedArray`
* `Int16Array`
* `Uint16Array`
* `Int32Array`
* `Uint32Array`
* `Float32Array`
* `Float64Array`
* `BigInt64Array`
* `BigUint64Array`
### 키 콜렉션

키를 사용하는 콜렉션을 나타냅니다. `Map`, `Set` (en-US) 등 순회 가능한 콜렉션은 요소를 삽입 순서대로 순회할 수 있습니다.

* `Map`
* `Set` (en-US)
* `WeakMap`
* `WeakSet`
### 구조화된 데이터

구조화된 데이터 버퍼 및 JavaScript Object Notation(JSON)을 사용하여 작성한 데이터를 나타내고 상호작용합니다.

* `ArrayBuffer`
* `SharedArrayBuffer`
* `Atomics`
* `DataView`
* `JSON`
### 제어 추상화 객체

제어 추상화는 코드 구조화에 도움을 줍니다. 특히, 비동기 코드를 (예를 들어) 깊게 중첩된 콜백 함수 없이 작성할 수 있습니다.

* `Promise`
* `Generator`
* `GeneratorFunction`
* `AsyncFunction`
* `AsyncGenerator` (en-US)
* `AsyncGeneratorFunction` (en-US)
### 리플렉션

* `Reflect`
* `Proxy`
### 국제화

ECMAScript 코어에 추가된 언어 구분 기능입니다.

* `Intl` (en-US)
* `Intl.Collator` (en-US)
* `Intl.DateTimeFormat`
* `Intl.ListFormat` (en-US)
* `Intl.NumberFormat`
* `Intl.PluralRules` (en-US)
* `Intl.RelativeTimeFormat` (en-US)
* `Intl.Locale` (en-US)
ReferenceError: invalid assignment left-hand side
=================================================

메시지
---
```

    ReferenceError: invalid assignment left-hand side
```

에러 타입
-----

`ReferenceError`.

무엇이 잘못되었을까?
-----------

예상치 못한 할당이 일어났습니다. 이것은 할당 연산자(assignment operator (en-US))와 비교 연산자(comparison operator (en-US)) 간의 불일치로 인한 것일 겁니다. 예를 들면, "`=`" 부호는 값을 변수에 할당합니다. "`==`" 나 "`===`"는 값을 비교하는 연산을 합니다.

예
-


```js
if (Math.PI = 3 || Math.PI = 4) {
  console.log('no way!');
}
// ReferenceError: invalid assignment left-hand side

var str = 'Hello, '
+= 'is it me '
+= 'you\'re looking for?';
// ReferenceError: invalid assignment left-hand side
```


`if` 구문에서, 비교 연산자 ("==")로 비교하려 할 때, 문자열의 연속적인 결합의 경우에는, 플러스("+") 연산자가 필요합니다.


```js
if (Math.PI == 3 || Math.PI == 4) {
  console.log("no way!");
}

var str = "Hello, " + "from the " + "other side!";
```

참조
--

* Assignment operators (en-US)
* Comparison operators (en-US)