Link types - HTML: Hypertext Markup Language

Link types
==========

다음 표에 나열된 링크 타입 속성은 HTML에서 두 문서간의 관계를 명시할 때 사용합니다. 이 때 `<a>`, `<area>`, 또는 `<link>` 요소를 사용해 한 쪽에서 다른 쪽으로 향하는 연결고리를 만듭니다.

링크 타입 및 HTML에서의 중요도| 링크 타입 | 설명 | 적용 가능한 요소 | 적용 불가능한 요소 |
| --- | --- | --- | --- |
| `alternate` | * 만약 요소가 `<link>`이고,
 `rel` 속성값에
 `stylesheet`라는 값이 들어 있다면, 링크가
 대체 스타일 시트로 정의된 것입니다. 이 경우,
 `title` 속성은 반드시 존재해야
 하고 빈 문자열 값을 가지고 있으면 안됩니다.
* 만약 `type`의 값이
 `application/rss+xml`이거나
 `application/atom+xml`로 설정되어 있다면, 링크를
 syndication feed(기고 알림)로 정의된 것입니다. 페이지에서 정의된 것 중 첫번째 것이
 기본값입니다.
* 위의 두 경우를 제외하면, 링크는 아래 대체 페이지 항목 중 한가지로
 정의된 것입니다.
    + 휴대용 기기와 같은 다른 매체에서 보여질
     페이지(`media` 속성이
     정의되어 있을 시)
    + 외국어로 된
     페이지(`hreflang` 속성이
     정의되어 있을 시)
    + PDF처럼 다른 형식으로 된
     페이지(`type` 속성이 정의되어
     있을 시)
    + 위 세가지 속성 중 2개 이상 같이 쓰인 페이지
 | `<a>`, `<area>`,
 `<link>` | *없음.* |
| `archives`
지원이 중단되었습니다
 |
 '이 요소는 본인 페이지에 대한 아카이브 링크를 포함하고 있는 문서로
 연결해 주는 하이퍼링크임'이라고 정의하는 값입니다. 예를 들어, 이
 속성값을 사용해 블로그 대문(entry)에서 월별 인덱스 페이지로 이동할 수
 있는 링크를 걸 수 있습니다.**알아두기:**
`archive` 값 하나만 써도 인식이 되기는 하나, 올바른
 사용법이 아니므로 이런 식의 사용은 하지 말아 주십시오.
  | `<a>`, `<area>`,
 `<link>` | *없음.* |
| `author` |
 '저자에 대한 정보 및 저자와 연락 가능한 연락처 정보가 담긴 페이지로
 향하는 하이퍼링크임'이라고 정의하는 값입니다.**알아두기:**
 mailto: 하이퍼링크가 동일한 역할을 하긴 하나, 웹 크롤러(robot
 harvester)에 의해 이 주소로 많은 스팸이 보내질 가능성이 높으므로
 사용을 권할만하지는 않습니다. 이이런 경우에는 연락처 폼 요소가
 들어있는 페이지로 사용자를 이끄는 편이 더 낫습니다.

`<a>`, `<area>`,
 `<link>` 요소에
 `rev` 속성을 사용하고 링크 타입을
 `made`로 넣으면 인식이 되기는 하지만 부정확한 값이므로
 `rel` 속성값을
 `author`로 대체해야 합니다.
  | `<a>`, `<area>`,
 `<link>` | *없음.* |
| `bookmark` |
 '가장 가까운 조상 `<article>` 요소에 대해
 퍼머링크(permalink)를 제공하는
 하이퍼링크임'이라고 정의하는 값입니다. 만약
 `article` 요소가 없다면, 링크 요소와 가장 가까운 관계를
 맺고 있는
 `section`에 대한 퍼머링크로 인식이 됩니다.

 이 속성을 사용하면 (월별 블로그 총결산 페이지라던가 블로그 aggregator
 사이트 등에서) 한 페이지 내에 존재하는 여러 편의 글(article)이 존재할
 때, 특정한 하나의 글에 대한 즐겨찾기를 표시 해 둘 수 있습니다.
  | `<a>`, `<area>` | `<link>` |
| `canonical` |
 캐노니컬 링크 요소는 웹 마스터의 SEO 작업 중, 중복
 콘텐츠 이슈를 해소하기 위해 웹 페이지의 "공식" 혹은 "선호" URL을 지정할
 수 있는 HTML 요소입니다.
  | `<link>` |
`<a>`, `<area>`,
 `<form>`
 |
| `dns-prefetch` (en-US)
Experimental
 |
 브라우저에게 해당 리소스가 필요하다고 알려줘서 사용자가 링크를 클릭하기
 전에 미리 DNS 조회와 프로토콜 핸드셰이크를 수행할 수 있도록 허용합니다.
  | `<link>` | `<a>`, `<area>` |
| `external` |
 하이퍼링크가 현재 사이트 바깥의 리소스를 가리킴을 나타냅니다. 즉, 이
 링크를 따라가면 사이트를 떠나게 됩니다.
  | `<a>`, `<area>` | `<link>` |
| `first`
지원이 중단되었습니다
 |
 하이퍼링크가 현재 페이지가 속한 시퀀스(*sequence*) 중 첫번째
 리소스로 이동하는 링크임을 정의합니다.**알아두기:**
 이것 말고도 리소스를 같은 시퀀스로 연결할 때 이와 관련있는 링크
 타입으로 `last`, `prev`, `next`가
 있습니다.

`begin`이나 `start`라고 쓰면 인식이 되긴 하나
 부정확한 값이므로 사용하지 말아야 합니다.
  | `<a>`, `<area>`,
 `<link>` | *None.* |
| `help` | * 만약 요소가 `<a>`거나
 `<area>`이면, `help`는
 하이퍼링크가 부모와 자손 요소에 대한 추가 도움말을 제공하는 리소스를
 가리킴을 나타냅니다.
* 만약 요소가 `<link>`라면 help는 하이퍼링크가
 페이지 전체에 대한 추가 도움말을 제공하는 리소스를 가리킴을
 나타냅니다.
 | `<a>`, `<area>`,
 `<link>` | *None.* |
| `icon` |
 사용자 인터페이스에서 페이지를 나타낼 때 사용하는 리소스, 보통
 아이콘을 정의합니다.`media`,
 `type`,
 `sizes` 특성을 사용하면
 브라우저가 현재 맥락에서 제일 적합한 아이콘을 선택할 수 있습니다.
 다수의 적합한 리소스가 존재하는 경우, 브라우저는 트리 순서에서 제일
 뒤에 정의된 리소스를 사용합니다. 위의 특성은 단순히 힌트에 불과하며,
 추가 조사 결과 더 적합한 리소스를 찾았다면 이전 선택을 스스로 바꿀 수
 있습니다.**참고:** Apple의 iOS는 Web Clip
 또는 시작 화면 플레이스 홀더에 사용할 아이콘을 고를 때, 다른 모바일
 브라우저와는 달리 `icon` 링크 유형은 물론
 `sizes` 특성을 사용하지 않습니다.
 대신, 각각에 대응하는 비표준
 `apple-touch-icon`과
 `apple-touch-startup-image`를 사용합니다.종종 `icon` 앞에
 `shortcut` 링크 유형이 존재하나, `shortcut`은
 비표준이며 브라우저가 무시하므로 웹 작성자는
 **이제 사용해서는 안되는 유형**입니다.
  | `<link>` | `<a>`, `<area>` |
| `index`
지원이 중단되었습니다
 |
 Indicates that the page is part of a *hierarchical* structure and
 that the hyperlink leads to the top level resource of that structure.If
 one or several `up` link types are also present, the number
 of these `up` indicates the depth of the current page in the
 hierarchy.
  | `<a>`, `<area>`,
 `<link>` | *None.* |
| `last`
지원이 중단되었습니다
 |
 Indicates that the hyperlink leads to the *last* resource of the
 *sequence* the current page is in.**Note:**
 Other link types related to linking resources in the same sequence are
 `first`, `prev`,
 `next`.Although recognized, the synonym
 `end` is incorrect and must be avoided.
  | `<a>`, `<area>`,
 `<link>` | *None.* |
| `license` |
 하이퍼링크가 라이선스 정보를 담은 문서를 가리킴을 나타냅니다.
 `<head>` 요소 밖에 위치한 경우, 표준에서는
 `license`에 대해 문서 전체에 대한 것인지, 문서 일부에 대한
 것인지 구분하지 않으며 해당 페이지 내의 데이터로만 알 수 있습니다.**참고:** `copyright`은 잘못된 동의어로, 브라우저가 인식하긴 하나
 사용을 지양해야 합니다.
  | `<a>`, `<area>`,
 `<link>` | *None.* |
| `manifest (en-US)` |
 연결한 파일이 Web App Manifest임을
 나타냅니다.
  | `<link>` | `<a>`, `<area>` |
| `next` |
 Indicates that the hyperlink leads to the *next* resource of the
 *sequence* the current page is in.**Note:**
 Other link types related to linking resources in the same sequence are
 `first`, `prev`, `last`.
  | `<a>`, `<area>`,
 `<link>` | *None.* |
| `nofollow` |
 Indicates that the linked document is not endorsed by the author of this
 one, for example if it has no control over it, if it is a bad example or
 if there is commercial relationship between the two (sold link). This
 link type may be used by some search engines that use popularity ranking
 techniques.
  | `<a>`, `<area>` | `<link>` |
| `noopener` |
 해당 속성을 사용하여 링크를 클릭하면, 브라우저 컨텍스트 권한 없이
 열립니다. 이 말은 곧, 새 창에서 `Window.opener`
 속성이 `null` 값을 반환하는것과 같습니다.

 해당 속성은 특히나 신뢰할 수 없는 링크를 열 때 유용합니다.
 `Window.opener` 속성을 통한 컨트롤을 막아주고,
 (더욱 자세한 사항은 링크를 참조하세요.
 About rel=noopener) `Referer` HTTP 헤더를 사용합니다.

`noopener` 속성을 사용한다면, target 속성의 값으로
 `_top`, `_self`, `_parent` 속성을
 제외한 다른 속성은, 새 브라우저 창을 열 것인가에 대하여
 `_blank` 속성으로써 적용됨을 주의하세요.
  | `<a>`, `<area>` | `<link>` |
| `noreferrer` |
 Prevents the browser, when navigating to another page, to send this
 page address, or any other value, as referrer via the
 `Referer:` HTTP header.(In Firefox, before Firefox
 37, this worked only in links found in pages. Links clicked in the UI,
 like "Open in a new tab" via the contextual menu, ignored this).
  | `<a>`, `<area>` | `<link>` |
| `pingback` |
 Defines an external resource URI to call if one wishes to make a comment
 or a citation about the webpage. The protocol used to make such a call
 is defined in the
 Pingback 1.0
 specification.**Note:** if the
 `X-Pingback:` HTTP header is also present, it supersedes the
 `<link>` element with this link type.
  | `<link>` | `<a>`, `<area>` |
| `preconnect`
Experimental
 |
 Provides a hint to the browser suggesting that it open a connection to
 the linked web site in advance, without disclosing any private
 information or downloading any content, so that when the link is
 followed the linked content can be fetched more quickly.
  | `<link>` | `<a>`, `<area>` |
| `prefetch` |
 Suggests that the browser fetch the linked resource in advance, as it is
 likely to be requested by the user. Starting with Firefox 44, the value
 of the `crossorigin` attribute is
 taken into consideration, making it possible to make anonymous
 prefetches.**Note:** The
 Link Prefetch FAQ (en-US) has
 details on which links can be prefetched and on alternative methods.
  | `<a>` Unimplemented,`<area>`
Unimplemented,`<link>` | *None.* |
| `preload` |
 Tells the browser to download a resource because this resource will be
 needed later during the current navigation. See
 Preloading content with rel="preload" (en-US)
 for more details.
  | `<link>` | `<a>`, `<area>` |
| `prerender`
Experimental
 |
 Suggests that the browser fetch the linked resource in advance, and that
 it also render the prefetched content offscreen so it can be quickly
 presented to the user once needed.
  | `<link>` | `<a>`, `<area>` |
| `prev` |
 Indicates that the hyperlink leads to the *preceding* resource of
 the *sequence* the current page is in.**Note:**
 You can also use the `next` keyword to specify a link to the
 next page in the sequence.Although recognized, the synonym
 `previous` is incorrect and must be avoided.
  | `<a>`, `<area>`,
 `<link>` | *None.* |
| `search` |
 Indicates that the hyperlink references a document whose interface is
 specially designed for searching in this document, or site, and its
 resources.If the `type`
 attribute is set to
 `application/opensearchdescription+xml` the resource is an
 OpenSearch plugin (en-US)
 that can be easily added to the interface of some browsers like Firefox
 or Internet Explorer.
  | `<a>`, `<area>`,
 `<link>` | *None.* |
| `stylesheet` |
 Defines an external resource to be used as a stylesheet. If the
 `type` is not set, the browser should assume it is a
 `text/css` stylesheet until further inspection.If
 used in combination with the `alternate` keyword, it defines
 an
 alternative style sheet; in that case the `title`
 attribute must be present and not be the empty string.
  | `<link>` | `<a>`, `<area>` |
| `sidebar`
비표준
 |
 Indicates that the hyperlink leads to a resource that would be better
 suited for a secondary browsing context, like a *sidebar*.
 Browsers, that don't have such a context will ignore this keyword.While
 once part of the HTML specification, this has been removed from the spec
 and is only implemented by Firefox at this time.
  | `<a>`, `<area>`,
 `<link>` | *None.* |
| `tag` |
 Indicates that the hyperlink refers to a document describing a
 *tag* that applies to this document.**Note:**
 This link type should not be set on links to a member of a tag cloud as
 these do not apply to a single document but to a set of pages.
  | `<a>`, `<area>` | `<link>` |
| `up`
지원이 중단되었습니다
 |
 Indicates that the page is part of a *hierarchical* structure and
 that the hyperlink leads to the higher level resource of that
 structure.The number of `up` link types indicates
 the depth difference between the current page and the linked resource.
  | `<a>`, `<area>`,
 `<link>` | *None.* |

명세
--

| Specification |
| --- |
| HTML Standard # linkTypes |

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

### html.elements.link.rel

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

### html.elements.a.rel

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

### html.elements.area.rel

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


HTML autocomplete 특성 - HTML: Hypertext Markup Language

HTML autocomplete 특성
====================

**`autocomplete`** 특성을 사용하면 사용자 에이전트의 자동완성을 허용할 양식 입력 필드를 지정할 수 있으며, 사용자 에이전트에게 어떤 정보에 대한 자동완성을 원하는지 안내할 수도 있습니다. HTML `autocomplete` 특성은 텍스트와 숫자를 허용하는 `<input>` (en-US) 요소, `<textarea>` (en-US) 요소, `<select>` (en-US) 요소, `<form>` 요소에 사용할 수 있습니다.

자동완성으로 제안할 값의 출처는 대개 브라우저가 선택합니다. 사전 정의된 값을 사용할 수도 있으나 보통 과거에 사용자가 입력했던 값을 사용합니다. 예를 들어 사용자가 입력한 이름, 주소, 전화번호, 이메일 주소를 브라우저에 저장할 방법을 제공하기도 하고, 신용카드 정보를 미리 암호화해 저장하고 인증절차 후 자동완성 값으로 쓸 수도 있습니다.

`<input>` (en-US), `<select>` (en-US), `<textarea>` (en-US) 요소에 `autocomplete` 특성을 지정하지 않은 경우, 브라우저는 요소의 양식 소유자, 즉 조상 `<form>` 요소 또는 `form` (en-US) 특성의 값을 `id` 특성으로 사용하는 `<form>` 요소의 `autocomplete` 특성을 사용합니다.

더 많은 정보는 `<form>` 요소의 `autocomplete` 특성을 참고하세요.

**참고:** `<input>`/`<select>`/`<textarea>` 요소가 다음 조건을 만족해야 사용자 에이전트가 자동완성을 제공할 수도 있습니다.

1. `name` 또는 `id` 특성 존재
2. `<form>` 요소의 자손일 것
3. 양식에 제출 (en-US) 버튼이 있을 것

값
-

`off`

브라우저가 이 필드에 값을 자동으로 넣는 것을 금지합니다. 문서나 애플리케이션이 자신만의 자동완성 기능을 구현하거나, 보안상 문제로 자동완성을 사용하지 않아야 할 경우 지정할 수 있습니다.

**참고:** 대부분의 최신 브라우저에서는 `autocomplete`을 `off`로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동완성하는 것도 막을 수 없습니다. The autocomplete attribute and login fields 문서를 참고하세요.

`on`

브라우저의 자동완성을 허용합니다. 아무런 안내 정보도 제공하지 않으므로, 브라우저가 스스로의 판단 하에 값을 결정합니다.

`name`

사람의 전체 이름. 사람 이름 구조의 복잡함과 다양성으로 인해 보통 개별 이름 구성요소보다 `name`을 사용하는 것을 선호하지만, 하나씩 받아야 한다면 다음 `autocomplete` 값도 사용할 수 있습니다.

`honorific-prefix`

호칭. "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", "Mlle." 등.

`family-name`

성.

`given-name`

이름.

`additional-name`

가운데 이름.

`honorific-suffix`

접미사. "Jr.", "B.Sc.", "PhD.", "MBASW", "IV" 등.

`nickname`

별명, 별칭.

`email`

이메일 주소.

`username`

사용자 또는 계정 이름.

`new-password`

새로운 비밀번호. 계정을 생성할 때나 비밀번호를 변경할 때, new-password는 "새로운 비밀번호를 입력하세요" 또는 "비밀번호 확인"에 지정해야 합니다. 일반적인 비밀번호와 구분하는 이유는 브라우저가 기존 비밀번호를 자동완성으로 채우는 것을 피하기 위함이며, 안전한 무작위 비밀번호 생성을 제안할 곳을 결정할 때도 사용하기 때문입니다.

`current-password`

사용자의 현재 비밀번호.

`one-time-code`

사용자를 인증할 때 사용하는 1회성 코드.

`organization-title`

직위. "사장", "매니저", "시니어 테크니컬 커뮤니케이터" 등.

`organization`

회사 또는 조직명.

`street-address`

도로 주소. 여러 줄의 텍스트도 가능하며 두 번째 행정구역(시/군/구) 내에서 구분할 수 있는 주소여야 하지만, 도시 이름, 우편번호, 국가 이름은 포함해선 안됩니다.

`address-line1`, `address-line2`, `address-line3`

도로 주소의 각 줄. `street-address`가 존재하지 않는 경우에만 사용해야 합니다.

`address-level4`

4단계 주소에서 가장 상세한 행정구역.

`address-level3`

최소 3단계 주소에서의 3단계 행정구역.

`address-level2`

최소 2단계 주소에서의 2단계 행정구역. 주소에 사용하는 행정구역을 두 단계로 분류하는 국가에서는 보통 도시, 마을 등입니다.

`address-level1`

첫 번째 행정구역. 대한민국에서는 특별시·광역시·도, 미국에서는 주입니다.

`country`

국가 코드.

`country-name`

국가 이름.

`postal-code`

우편번호.

`cc-name`

신용카드 등 지불수단 소유자의 전체 이름. 보통 개별 이름 구성요소보다 이 쪽을 더 선호합니다.

`cc-family-name`

지불수단 소유자의 성.

`cc-given-name`

지불수단 소유자의 이름.

`cc-additional-name`

지불수단 소유자의 가운데 이름.

`cc-number`

신용카드 번호, 계좌번호 등 지불수단 식별 번호.

`cc-exp`

지불수단 유효기간. 보통 MM/YY 또는 MM/YYYY의 형태입니다.

`cc-exp-month`

지불수단 유효기간의 월.

`cc-exp-year`

지불수단 유효기간의 연도.

`cc-csc`

지불수단 보안 코드. 신용카드의 경우 뒷면의 세자리 숫자입니다.

`cc-type`

지불수단 유형. "Visa", "Master Card" 등.

`transaction-currency`

거래에 사용할 통화 단위.

`transaction-amount`

결제 양식에 나타나는 거래량, 금액. 단위는 `transaction-currency`에 나타난 값을 사용합니다.

`language`

선호 언어. 유효한 BCP 47 언어 태그여야 합니다.

`bday`

생년월일.

`bday-day`

생일.

`bday-month`

생월.

`bday-year`

생년.

`sex`

성별. "남성", "여성", "안드로진" 등 줄바꿈 없는 자유형식 텍스트입니다.

`tel`

국가 코드를 포함한 전체 전화번호. 개별 전화번호 구성요소가 필요한 경우 다음 값을 사용할 수 있습니다.

`tel-country-code`

국가 코드. 1(북미), 82(대한민국) 등.

`tel-national`

국가 코드를 제외한 전체 전화번호. 지역번호도 포함합니다. 대한민국 전화번호 "82-2-555-6502"의 경우 "02-555-6502"가 됩니다.

`tel-area-code`

지역번호.

`tel-local`

국가 코드와 지역번호를 제외한 전화번호. 두 부분으로 나눌 수도 있으며, "555-6502"의 경우 `tel-local-prefix`는 "555", `tel-local-suffix`는 "6502"가 됩나다.

`tel-extension`

내선번호.

`impp`

인스턴트 메시지 프로토콜 엔드포인트의 URL. "xmpp:username@example.net" 등.

`url`

URL. 홈페이지, 회사 웹 사이트 주소 등 양식의 맥락에 맞는 값입니다.

`photo`

이미지 URL. 사람, 회사, 연락처 정보 등 양식의 맥락에 맞는 값입니다.

WHATWG 표준을 방문해 더 많은 정보를 알아보세요.

예제
--

```html
<div>
  <label for="cc-number">Enter your credit card number</label>
  <input type="number" name="cc-number" id="cc-number" autocomplete="off" />
</div>
```

주소의 행정 단계
---------

네 단계의 행정 단계(`address-level1`부터 `address-level4`까지)는 주소의 위치를 점차 좁아지는 범위로 나타냅니다. 각각의 국가는 서로 다른 행정구역 시스템을 사용하며 주소를 작성하는 순서도 다를 수 있습니다.

`address-level1`은 항상 제일 큰 단계이므로, 국가 이름을 제외한 주소에서 가장 넓은 범위를 나타냅니다.

### 유연한 양식 레이아웃

각각의 국가가 서로 다른 주소 형태를 사용하며, 구성요소의 위치는 물론 개수도 다를 수 있다는 점을 고려했을 때, 가능하다면 사용자가 입력하는 주소가 속한 국가에 따라서 양식의 형태를 바꾸는 것이 도움이 될 것입니다.

### 예제

행정구역 단위 사용법은 국가마다 다릅니다. 다음은 일부 예제로, 모든 상황을 포함하지는 않을 것입니다.

#### 대한민국

도로명주소는 다음과 같은 형태입니다.

* 서울특별시 종로구 세종로 1
* 경기도 수원시 팔달구 효원로 1
* 충청남도 홍성군 홍북읍 충남대로 21
* `address-level1`
    + :
     시/도: "서울특별시", "경기도", "충청남도"
* `address-level2`
    + : 시/군/구: "수원시", "홍성군", "종로구"
* `address-level3`
    + : 구/읍/면: "팔달구", "홍북읍"

    **참고:** 구/읍/면은 `address-level2`에 합쳐 "수원시 팔달구", "홍성군 홍북읍"의 형태로 작성하는 경우도 많습니다.
* `address-line1`
    + : 도로명, 건물번호: "세종로 1", "효원로 1", "충남대로 21"
* `address-line2`
    + : 상세주소. 아파트의 경우 동/호를 작성합니다.

    **참고:** `street-address`를 사용하는 경우 도로명, 건물번호와 상세주소를 같이 작성합니다.

우편번호 찾기 기능을 사용하는 경우 행정구역과 도로명, 건물번호까지는 사용자가 직접 입력하지 않는 점도 유의하세요.

#### 미국

평범한 주소는 다음 형태입니다.

 432 Anywhere St
 Exampleville CA 95555

미국에서의 가장 큰 행정구역은 "주"로, 위 주소에서는 "CA"("캘리포니아"의 미국 우정청 공식 줄임말)입니다. 따라서 `address-level1`은 주, 즉 "CA"를 사용합니다.

두 번째 행정구역은 도시 혹은 마을 이름이므로 `adress-level2`는 "Examplevile"입니다.

미국 주소는 3단계 이상을 사용하지 않습니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-fe-autocomplete |

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

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

같이 보기
-----

* `<input>` (en-US) 요소.
* `<select>` (en-US) 요소.
* `<textarea>` (en-US) 요소.
* `<form>` 요소.
* HTML 양식
* 모든 전역 특성.


링크 유형: preload - HTML: Hypertext Markup Language

링크 유형: preload
==============

`<link>` 요소의 `rel` 특성의 `preload` 값은 HTML의 `<head>`에서 가져오기 요청을 선언할 수 있게 해주며, 페이지에서 즉시 필요로 할 리소스를 명시할 수 있습니다. 이러한 리소스는 브라우저의 주요 렌더링 절차가 개입하기 전에 페이지 생명주기의 초기에서 불러오고자 하는 리소스입니다. 이는 해당 리소스들을 더 빨리 사용할 수 있게 하고, 페이지의 렌더링을 막을 가능성이 낮아져 성능이 향상됩니다.

기본
--

페이지를 스타일링하기 위해 주로 다음과 같이 `<link>`를 이용해 CSS 파일을 로드할 것입니다.

```html
<link rel="stylesheet" href="styles/main.css" />
```

하지만 여기서는 `<link>`를 원하는 어떤 리소스에도 사용 가능한 프리로더로 바꿔주는 `preload`의 `rel` 값을 사용하겠습니다. 동시에 다음 사항도 명시해야 합니다.

* `href` 특성에 리소스의 경로를 명시해야 합니다.
* `as` 특성에 리소스의 유형을 명시해야 합니다.

이와 같은 간단한 예제를 구성할 수 있습니다. (JavaScript 및 CSS 예제 소스와, and 라이브 예제도 참고하세요):

```html
<head>
  <meta charset="utf-8" />
  <title>JavaScript 및 CSS 예제 소스</title>

  <link rel="preload" href="style.css" as="style" />
  <link rel="preload" href="main.js" as="script" />

  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>

  <script src="main.js" defer></script>
</body>
```

여기서는 페이지의 렌더링 과정에 CSS와 JavaScript 파일이 필요할 때 즉시 사용할 수 있도록 프리로드했습니다. 이 예제는 브라우저가 `<link rel="stylesheet">` 요소와 `<script>` 요소가 프리로드 요소임을 동일한 HTML 청크에서 발견하기 때문에 단순해 보이지만, 다음의 경우처럼 리소스가 늦게 발견되거나 크기가 클수록 프리로드의 이점은 더욱더 명확해집니다.

* 폰트, 이미지 등 CSS 내부에서 명시된 리소스.
* JSON, import된 스크립트, 웹 워커 등 JavaScript가 요청할 수 있는 리소스.
* 크기가 더 큰 이미지와 비디오 파일.

`preload`는 또다른 장점을 가지고 있습니다. `as`를 이용해 특정한 유형의 콘텐츠를 프리로드하도록 지정하면 브라우저는 다음과 같은 작업을 할 수 있습니다.

* 리소스의 우선순위를 더욱 정확하게 지정할 수 있습니다.
* 캐시에 리소스를 저장하여 추후 요청에 적절하게 재사용할 수 있습니다.
* 리소스에 대해 올바른 콘텐츠 보안 정책을 적용할 수 있습니다.
* 리소스에 대해 올바른 `Accept` 요청 헤더를 설정할 수 있습니다.
### 어떤 유형의 콘텐츠를 프리로드 할 수 있나요?

다양한 유형의 콘텐츠를 프리로드할 수 있습니다. `as` 특성으로 지정 가능한 값은 다음과 같습니다.

* `audio`: 주로 `<audio>` (en-US)에서 쓰이는 오디오 파일.
* `document`: `<frame>` (en-US) 혹은 `<iframe>` (en-US)에 의해 삽입되는 문서.
* `embed`: `<embed>` 요소 내부에 삽입되는 리소스.
* `fetch`: ArrayBuffer 혹은 JSON 파일 등의 fetch 요청이나 XHR 요청에 의해 액세스할 수 있는 리소스.
* `font`: 폰트 파일.
* `image`: 이미지 파일.
* `object`: `<object>` 요소 내부에 삽입되는 리소스.
* `script`: JavaScript 파일.
* `style`: CSS 스타일시트.
* `track`: WebVTT 파일.
* `worker`: JavaScript 웹 워커 혹은 공유 워커.
* `video`: 주로 `<video>`에 사용되는 비디오 파일.

**참고:** `video`를 프리로딩하는 것은 프리로드 스펙에 포함되어 있지만 현재 브라우저에는 구현되지 않았습니다.

**참고:** 브라우저에서 사용될 수 있는 이러한 값들과 웹의 기능에 대한 더 자세한 내용은 프리로드 스펙에 기재되어 있습니다. - link 요소 확장을 참고하세요. 또한, `as` 특성에 사용할 수 있는 값들의 전체 목록은 Fetch 스펙에 의해 관리되고 있음을 참고하세요 - 요청 대상을 참고하세요.

MIME 타입 포함하기
------------

`<link>` 요소는 `type` 특성을 가질 수 있는데, 이 특성은 `<link>` 요소가 가리키고 있는 리소스의 MIME 타입을 포함하고 있습니다. 이는 리소스를 프리로드하는 데 특히 유용합니다. 브라우저는 `type` 특성의 값을 사용하여 해당 리소스를 지원할 때에만 작업을 수행하거나 다운로드하고, 지원하지 않는다면 무시하기 때문입니다.

비디오 예제(전체 소스 코드를 참고하세요)와 아래 나와있는 코드로 만들어진 라이브 예제에서 이에 대한 예제를 볼 수 있습니다. 코드 조각은 바로 아래에 나와 있습니다. 또한, 모든 브라우저에서 비디오 프리로딩을 지원하는 것은 아니기 때문에 이 예제 코드로 모든 브라우저에서 프리로딩을 할 수 있는 것은 아니지만 프리로드의 근간을 이루는 핵심 동작을 전체적으로 볼 수 있습니다.

```html
<head>
  <meta charset="utf-8" />
  <title>비디오 프리로드 예제</title>

  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4" />
</head>
<body>
  <video controls>
    <source src="sintel-short.mp4" type="video/mp4" />
    <source src="sintel-short.webm" type="video/webm" />
    <p>
      현재 브라우저는 HTML5를 지원하지 않습니다. 대신
      <a href="sintel-short.mp4">이 비디오 링크</a>를 사용하세요.
    </p>
  </video>
</body>
```

위 예제의 코드는 지원하는 브라우저에 한해 `video/mp4` 비디오를 프리로드합니다. 그리고 `video/mp4`를 지원하는 브라우저 사용자를 위해 `video/mp4`를 우선으로 사용하게 합니다(`<source>` (en-US)에서 `video/mp4`가 첫 번째 항목이기 때문입니다). 이로 인해 비디오 플레이어가 `video/mp4`를 지원하는 브라우저 사용자에게 더 부드럽고 빠르게 반응할 수 있습니다.

또한, `video/mp4`와 `video/webm`을 모두 지원하는 브라우저 사용자의 경우 위 코드에 `<link rel="preload" href="sintel-short.webm" as="video" type="video/webm">` 요소가 추가된다면 `video/mp4`와 `video/webm` '모두' 프리로드될 것입니다(물론 브라우저에서는 실제로 두 유형의 비디오 중 하나만 보여질 것입니다).

따라서, 동일한 리소스에 대해 여러 개의 타입을 지정해 프리로드 하는 것은 권장되지 않습니다. 대신, 모범 사례는 가장 많은 사용자에게 해당될 것으로 예상되는 타입에 대해서만 프리로드하는 것입니다. 이 때문에 위 예제 코드에서는 `video/webm` 비디오에 대해 프리로드를 명시하지 않았습니다.

하지만, `video/webm`을 프리로딩하지 않는다고 해서 `video/webm` 비디오를 필요로 하는 경우에 이를 사용할 수 없는 것은 아닙니다. `video/mp4`를 지원하지 않지만 `video/webm`은 지원하는 브라우저 사용자들의 경우, 위 예시 코드에서 여전히 `video/webm` 비디오를 사용할 수 있습니다. 다만 다른 사용자들 중 대다수에게 `video/webm`을 불필요하게 프리로드하지 않은 채로 사용할 수 있다는 점입니다.

CORS가 활성화된 fetch
----------------

CORS가 활성화한 채로 리소스를 프리로드할 때(`fetch()`, `XMLHttpRequest`, fonts 등), `crossorigin` 특성을 `<link>` 요소에 지정했는지 세심하게 살펴봐야 합니다. 이 특성은 교차 출처 요청이 아닌 경우에도 해당 리소스의 CORS와 credentials 모드를 일치시키기 위해 지정해야 하는 특성입니다.

위에서 언급된 것과 같이, 폰트 파일을 로딩하는 것이 이와 관련된 흥미로운 사례입니다. 여러 이유로 인해, 폰트 파일은 익명 모드 CORS를 통해 요청 되어야 합니다(폰트 요청 조건를 참고하세요).

이 경우를 아래 예제에서 다뤄보겠습니다. GitHub에 업로드된 전체 코드를 참고하세요(라이브 예제로도 볼 수 있습니다).

```html
<head>
  <meta charset="utf-8" />
  <title>웹 폰트 예제</title>

  <link
 rel="preload"
 href="fonts/cicle\_fina-webfont.woff2"
 as="font"
 type="font/woff2"
 crossorigin />
  <link
 rel="preload"
 href="fonts/zantroke-webfont.woff2"
 as="font"
 type="font/woff2"
 crossorigin />

  <link href="style.css" rel="stylesheet" />
</head>
<body>
  …
</body>
```

위 예제에서는 `type` 특성에 MIME 타입 힌트를 제공했을 뿐만 아니라, 프리로드의 CORS 모드를 최종 폰트 리소스 요청과 확실하게 일치시키기 위해 `crossorigin` 특성도 지정했습니다.

미디어 포함하기
--------

`<link>` 요소의 한 가지 멋진 기능은 `media` 특성을 포함할 수 있다는 것입니다. `<link>`는 미디어 타입 혹은 완전한 미디어 쿼리를 포함할 수 있기 때문에 반응형 프리로드를 할 수 있습니다.

예제를 살펴보겠습니다(GitHub에서 소스 코드와 라이브 예제를 참고하세요).

```html
<head>
  <meta charset="utf-8" />
  <title>반응형 프리로드 예제</title>

  <link
 rel="preload"
 href="bg-image-narrow.png"
 as="image"
 media="(max-width: 600px)" />
  <link
 rel="preload"
 href="bg-image-wide.png"
 as="image"
 media="(min-width: 601px)" />

  <link rel="stylesheet" href="main.css" />
</head>
<body>
  <header>
    <h1>내 사이트</h1>
  </header>

  <script>
 var mediaQueryList = window.matchMedia("(max-width: 600px)");
 var header = document.querySelector("header");

 if (mediaQueryList.matches) {
 header.style.backgroundImage = "url(bg-image-narrow.png)";
 } else {
 header.style.backgroundImage = "url(bg-image-wide.png)";
 }
 </script>
</body>
```

위 예제에서는 사용자가 좁은 폭의 뷰포트를 가지고 있는 경우 작은 이미지를 프리로드하고, 넓은 폭의 뷰포트를 가지고 있는 경우 더 큰 이미지를 프리로드하기 위해 `<link>` 요소에 `media` 특성을 포함했습니다. 이를 위해 `Window.matchMedia` / `MediaQueryList` (en-US)를 사용했습니다(더 상세한 내용은 미디어 쿼리 테스트하기 (en-US)를 참고하세요).

위 방법은 폰트가 페이지가 렌더링될 때 사용 가능하도록 만들어 FOUT(스타일이 적용되지 않은 텍스트가 잠시 표출되는 현상)을 줄입니다.

또한 위 방법은 이미지에 국한될 필요가 없고, 반드시 같은 유형의 파일끼리만 사용할 수 있는 것도 아닙니다. 더 넓게 생각해보세요! 대역폭과 CPU가 특히 더 제한적일 수 있는 좁은 화면으로 접속한 사용자가 있다면 단순한 SVG 도형을 프리로드해서 보여주거나, 충분한 대역폭과 CPU를 가진 사용자에게는 복잡한 JavaScript 청크를 프리로드하여 상호작용이 가능한 3D 모델을 렌더링할 수도 있을 것입니다.

스크립팅과 프리로드
----------

이러한 프리로드의 또 다른 멋진 점은 JavaScript를 통해 프리로드를 할 수 있다는 점입니다. 예를 들어, `HTMLLinkElement` (en-US) 인스턴스를 생성해 이를 DOM에 부착해보겠습니다.

```js
var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
```

이는 브라우저가 `myscript.js` 파일을 프리로드할 것이지만 아직 사용하지는 않았음을 의미합니다. 파일을 사용하려면, 다음과 같이 할 수 있습니다.

```js
var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
```

이 방법은 스크립트를 프리로드하고 싶지만, 실제 이 스크립트를 필요로 할 때까지 실행을 늦추려고 할 때 유용합니다.

다른 리소스 프리로딩 작동 방식
-----------------

다른 프리로딩 관련 기능이 존재하기는 하지만, `<link rel="preload">` 만큼 목적에 잘 부합하는 기능은 없습니다.

* `<link rel="prefetch">`는 여러 브라우저들에서 오랫동안 지원되어 왔지만, 이는 **다음** 페이지 이동이나 페이지 로드에 사용될 리소스를 프리로딩하기 위한 목적이었습니다(예를 들어, 다음 페이지로 이동할 때). 이 역시 훌륭하지만, 현재 페이지에는 유용한 것은 아닙니다! 게다가, 브라우저는 `prefetch` 리소스에게 `preload` 리소스보다 더 낮은 우선순위를 부여할 것입니다. 현재 페이지가 다음 페이지보다 더 중요하기 때문이죠. 더 상세한 내용을 보려면 링크 프리페칭 FAQ (en-US)를 참고하세요.
* `<link rel="prerender">`는 특정한 웹 페이지를 백그라운드에서 렌더링해 사용자가 해당 페이지에 접근할 때의 로딩 속도를 높입니다. 이는 사용자의 대역폭을 낭비할 가능성이 있기 때문에, Chrome은 `prerender`를 NoState prefetch로 대신 간주합니다.
* `<link rel="subresource">`
비표준
은 Chrome에서 예전에 `preload`와 같은 문제를 해결하기 위해 지원됐지만, 한 가지 문제가 있었습니다. 항목에 대한 우선순위를 지정할 방법이 없었습니다(당시는 `as`가 존재하지 않았습니다). 따라서 이를 사용한 리소스는 동일하게 낮은 우선순위로 불러와졌습니다.
* 다양한 스크립트 기반의 리소스 로더들이 나와 있지만, 그 어떤 로더도 브라우저의 fetch 우선순위 큐보다 강력한 파워를 가지지는 못했을 뿐만 아니라, 성능 문제가 발생할 가능성이 높습니다.
명세서
---

| Specification |
| --- |
| HTML Standard # link-type-preload |

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

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

같이 보기
-----

* Preload: What Is It Good For? by Yoav Weiss


<cite> - HTML: Hypertext Markup Language

<cite>
======

**HTML `<cite>` 요소**는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다. 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

`<cite>` 요소의 저작물로는 다음과 같은 예제를 들 수 있습니다.

* 책
* 논문
* 에세이
* 시
* 악보
* 음악
* 대본
* 영화
* TV 쇼
* 게임
* 조각
* 그림
* 연극
* 공연
* 오페라
* 뮤지컬
* 전시회
* 판례
* 컴퓨터 프로그램
* 웹사이트
* 웹페이지
* 블로그 글과 댓글
* 게시판 글과 댓글
* 트윗
* Facebook 글
* 성명서
* 기타 등등

W3C 명세는 `<cite>` 요소로 저작물의 출처를 표기할 때 저작자도 표기할 수 있음을 명시하고 있습니다. 그러나 정반대로, WHATWG 명세는 사람 이름을 어떤 상황에서도 **절대** 포함하지 말아야 한다고 적혀있다는 점을 알아두는 것이 좋습니다.

`<blockquote>`, `<q>` 요소가 가진 인용문의 출처를 나타내려면 `cite` 특성을 사용하세요.

보통 브라우저는 `<cite>` 요소를 그릴 때 기울임꼴로 표현합니다. 기울임꼴을 제거하려면 CSS `font-style` (en-US) 속성을 `<cite>`에 적용하세요.

예제
--

```html
<p>More information can be found in <cite>[ISO-0000]</cite>.</p>
```

### 결과

명세
--

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

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

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

같이 보기
-----

* 긴 인용문을 위한 `<blockquote>` 요소.
* 인라인 인용문을 위한 `<q>` 요소.


<q>: 인라인 인용문 요소 - HTML: Hypertext Markup Language

<q>: 인라인 인용문 요소
===============

**HTML `<q>`요소**는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. `<q>`는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 `<blockquote>` 요소를 사용하세요.

시도해보기
-----

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

**참고:** 오래된 브라우저에서는 앞뒤 따옴표를 적용하려면 추가 스타일을 사용해야 할 수 있습니다.

특성
--

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

`cite`

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

예제
--

```html
<p>
  Mozilla 재단의 웹사이트에 따르면,
  <q cite="https://www.mozilla.org/en-US/about/history/details/"
 >Firefox 1.0 은 2004년 처음 공개되어 큰 성공을 거두었습니다.</q
 >
</p>
```

명세
--

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

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

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

같이 보기
-----

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


<meta>: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language

<meta>: 문서 레벨 메타데이터 요소
======================

**HTML `<meta>` 요소**는 `<base>`, `<link>`, `<script>`, `<style>`, `<title>`과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 |
 메타데이터 콘텐츠.
 `itemprop`이 존재하면
 플로우 콘텐츠
 및
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 빈 요소이므로 여는 태그는 존재해야 하고 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 | `<meta charset>`, `<meta http-equiv>`인
 경우 `<head>` 요소.
 `http-equiv`가 인코딩 선언이
 아닌 경우 `<head>` 내의
 `<noscript>` 요소도 가능합니다.
  |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLMetaElement` (en-US) |

`meta` 요소가 제공하는 메타데이터는 다음 네 유형 중 하나입니다.

* `name` 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.
* `http-equiv` 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.
* `charset` 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.
* `itemprop` 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.
특성
--

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

**참고:** `name` 특성은 `<meta>` 요소에 대해 특정한 의미를 가집니다. 하나의 `<meta>` 요소에서, `itemprop` 특성을 `name`, `http-equiv` 또는 `charset` 특성과 함께 설정할 수 없습니다.

`charset`

페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "`utf-8`"의 대소문자 구분 없는 ASCII 표현이어야 합니다.

`content`

`http-equiv` 또는 `name` 특성의 값을 담습니다.

`http-equiv`

프래그마 지시문을 정의합니다. 특성의 이름(`http-equiv(alent)`)에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.

* `content-security-policy`
 현재 페이지의 콘텐츠 정책 (en-US)을 정의할 수 있습니다. 대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드포인트를 지정해 사이트 간 스크립트 공격 방어에 도움을 줍니다.
* `content-type`
 지정할 경우, `content` 특성의 값은 반드시 "`text/html; charset=utf-8`"이어야 합니다. **참고:** `text/html` MIME 유형으로 제공하는 문서에서만 사용할 수 있으며, XML MIME 유형의 문서에서는 사용할 수 없습니다.
* `default-style`
 기본 CSS 스타일 시트 세트의 이름을 지정합니다.
* `x-ua-compatible`
 지정할 경우, `content` 특성의 값은 반드시 "`IE=edge`"여야 합니다. 사용자 에이전트는 이 프래그마를 무시해야 합니다.
* `refresh` 다음을 지정합니다.
    + `content` 특성에 양의 정수 값을 설정한 경우, 페이지를 다시 불러오기 전까지의 초 단위 대기시간.
    + `content` 특성이 양의 정수 값을 가지고 그 뒤를 문자열 `;url=`과 유효한 URL이 뒤따른다면, 해당 URL로 이동하기 전까지의 초 단위 대기시간.
>
>
> **경고:**
>
>
>
> `refresh` 값을 지정한 페이지의 경우 새로고침 사이 간격이 너무 짧을 우려가 있습니다. 스크린 리더 등의 보조 기술로 탐색하는 사용자는 자동 새로고침 이전에 페이지의 내용을 읽고 이해하지 못할 수 있습니다. 또한 저시력 사용자에게 있어, 갑작스럽고 사전 안내도 없는 콘텐츠 업데이트는 어지러울 수 있습니다.
>
>
>
>     + MDN Understanding WCAG, Guideline 2.1 explanations (en-US)
>     + MDN Understanding WCAG, Guideline 3.1 explanations (en-US)
>     + Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0
>     + Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0
>     + Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0
>

`name`

`name`과 `content` 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. `name`은 이름, `content`는 값을 담당합니다.

표준 메타데이터 이름 문서에서 HTML 명세에 포함된 표준 메타데이터 목록을 살펴보세요.

예제
--

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

<!-- 3초 후 리다이렉트 -->
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org" />
```

명세
--

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

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

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


<button>: 버튼 요소 - HTML: Hypertext Markup Language

<button>: 버튼 요소
===============

**HTML `<button>` 요소**는 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전트의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있습니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구문 콘텐츠,
 대화형 콘텐츠,
 양식 관련 콘텐츠(나열됨,
 레이블 가능,
 제출 가능), 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 대화형 콘텐츠를 제외한
 구문 콘텐츠.
  |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 구문 콘텐츠를 허용하는 모든 요소. |
| 암시적 ARIA 역할 | `button (en-US)` |
| 가능한 ARIA 역할 | `checkbox` (en-US), `link` (en-US),
 `menuitem` (en-US),
 `menuitemcheckbox` (en-US),
 `menuitemradio` (en-US), `radio` (en-US),
 `switch` (en-US), `tab` (en-US) |
| DOM 인터페이스 | `HTMLButtonElement` (en-US) |

특성
--

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

`autofocus`

페이지 로드 후, 이 버튼에 포커스가 위치해야 하는지 나타냅니다. 문서 내에서 **하나의 요소**만 `autofocus` 특성을 가질 수 있습니다.

`autocomplete`
비표준

This attribute on a `<button>` is nonstandard and Firefox-specific. Unlike other browsers, Firefox persists the dynamic disabled state of a `<button>` across page loads. Setting `autocomplete="off"` disables this feature; see Firefox bug 654072.

`disabled`

버튼과 사용자의 상호작용, 즉 누르거나 클릭하는 것을 막습니다.

Firefox, unlike other browsers, persist the dynamic disabled state of a `<button>` across page loads. Use the `autocomplete` attribute to control this feature.

`form`

버튼과 연결할 `<form>` 요소("양식 소유자"). 같은 문서에 존재하는 `<form>` 요소의 `id` 특성 값을 사용해야 합니다. `form` 특성을 지정하지 않았으나 조상 중 `<form>` 요소가 존재하면 해당 `<form>`과 연결됩니다.

`form` 특성을 사용하면 버튼을 `<form>` 요소에 넣지 않고도 연결할 수 있고, 조상 중 `<form>`이 있더라도 소유자를 재정의할 수 있습니다.

`formaction`

`<button>`이 제출 버튼인 경우, 제출한 정보를 처리할 URL. 지정한 경우, 버튼의 양식 소유자가 가진 `action` 특성보다 우선합니다. 양식 소유자가 존재하지 않으면 영향을 주지 않습니다.

`formenctype`

`<button>`이 제출 버튼인 경우, `formenctype` 특성은 양식을 서버로 제출할 때 사용할 양식 데이터 인코딩을 지정합니다. 가능한 값은 다음과 같습니다.

* `application/x-www-form-urlencoded`: 기본값.
* `multipart/form-data`: `type` (en-US) 특성이 `file`인 `<input>` (en-US)이 존재하는 양식에서 사용하세요.
* `text/plain`: 디버깅 전용으로 명세에 추가된 값입니다. 실제 양식 제출 시 사용해선 안됩니다.

지정한 경우, 버튼의 양식 소유자가 가진 `enctype` 특성보다 우선합니다.

`formmethod`

`<button>`이 제출 버튼인 경우, `formmethod` 특성은 양식을 서버로 제출할 때 사용할 HTTP 메서드를 지정합니다. 가능한 값은 다음과 같습니다.

* `post`: 양식의 데이터를 HTTP 요청 본문에 넣습니다. 비밀번호처럼, 양식 데이터 중 공개하지 않아야 하는 항목이 있으면 사용하세요.
* `get`: 양식 `action` URL 뒤에 `?` 를 추가한 후 양식 데이터를 덧붙입니다. 검색 양식처럼, 양식이 사이드 이펙트를 갖지 않을 때 사용하세요.

지정한 경우, 버튼의 양식 소유자가 가진 `method` 특성보다 우선합니다.

`formnovalidate`

`<button>`이 제출 버튼인 경우, `formnovalidate` 특성은 양식을 제출할 때 유효성 검사 (en-US)를 하지 않겠다는 것을 지정합니다. 지정한 경우, 버튼의 양식 소유자가 가진 `novalidate` 특성보다 우선합니다.

`formtarget`

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

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

`name`

버튼의 이름. 제출할 때, 버튼의 `value` 특성과 함께 양식 데이터의 일부를 구성합니다.

`type`

버튼의 행동 방식. 가능한 값은 다음과 같습니다.

* `submit`: 버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
* `reset`: `<input type="reset">`처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
* `button`: 기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.

`value`

버튼의 초깃값. 제출할 때, 버튼의 `value` 특성과 함께 양식 데이터의 일부를 구성합니다.

참고
--

`<button>` 요소는 `<input>` (en-US) 요소보다 스타일을 적용하기 훨씬 수월합니다. `<input>`은 `value` 특성에 텍스트 값밖에 지정할 수 없지만, `<button>`은 내부 HTML 콘텐츠(`<em>`, `**`, 심지어 `<img>`도)에 더해 `::after`와 `::before` (en-US) 의사 요소를 사용하는 복잡한 렌더링도 가능합니다.

양식 제출용 버튼이 아니라면 `type` 특성을 `button`으로 지정하는걸 잊지 마세요. 기본값에서는 버튼을 눌렀을 때 양식 데이터를 제출하고, (존재하지 않는) 응답을 불러오려고 시도하는 과정에서 문서의 현재 상태가 사라질 수 있습니다.

예제
--

```html
<button name="button">눌러보세요</button>
```

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

### 아이콘 버튼

아이콘만 사용해 기능을 표현하는 버튼은 접근 가능한 이름을 갖지 않습니다. 접근 가능한 이름은 스크린 리더 등 접근성 보조 기술이 문서를 분석하고 접근성 트리를 생성할 때 사용할 수 있는 프로그램 훅을 제공합니다. 그 후 보조 기술이 페이지 콘텐츠를 탐색하고 조작할 때 접근성 트리를 사용합니다.

아이콘 버튼에 접근 가능한 이름을 부여하려면, `<button>` 요소의 기능을 간략히 묘사하는 텍스트를 안에 포함하세요.

#### 예제

```html
<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10">
    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z" />
  </svg>
  Add to favorites
</button>
```

텍스트를 숨기고 싶은 경우, 접근 가능한 방식은 CSS 속성을 조합해 시각적으로는 숨기고, 보조 기술은 읽을 수 있는 형태로 남기는 것입니다.

그러나, 버튼의 텍스트를 시각적으로 남겨놓는 것은 아이콘의 뜻이나 버튼의 기능에 익숙하지 않은 사용자도 도울 수 있다는 점을 명심해야 합니다. 특히 기술과 가깝지 않거나, 문화적으로 다른 해석을 할 수 있는 사용자를 고려하세요.

* What is an accessible name? | The Paciello Group
* MDN Understanding WCAG, Guideline 4.1 explanations (en-US)
* Understanding Success Criterion 4.1.2 | W3C Understanding WCAG 2.0
### 크기와 간격

#### 크기

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

* Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
* Target Size and 2.5.5 | Adrian Roselli
* Quick test: Large touch targets - The A11Y Project

#### 간격

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

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

* Hand tremors and the giant-button-problem - Axess Lab
### Firefox

Firefox will add a small dotted border on a focused button. This border is declared through CSS in the browser stylesheet, but you can override it to add your own focused style using `<a href="/ko/docs/Web/CSS/::-moz-focus-inner">button::-moz-focus-inner { }</a>`.

If overridden, it is important to **ensure that the state change when focus is moved to the button is high enough** that people experiencing low vision conditions will be able to perceive it.

Color contrast ratio is determined by comparing the luminosity of the button text and background color values compared to the background the button is placed on. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for large text. (Large text is defined as 18.66px and `bold` or larger, or 24px or larger.)

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0
### 클릭과 포커스

`<button>`을 클릭했을 때 포커스를 얻는 여부는 브라우저와 운영체제에 따라 다릅니다. 아래 표는 `<input>` (en-US)이 `type="button"` 또는 `type="submit"`일 때도 동일합니다.

`<button>`을 클릭했을 때 포커스를 부여하나?| 데스크톱 브라우저 | Windows 8.1 | OS X 10.X |
| --- | --- | --- |
| Firefox | 예 - Firefox 30.0 | (`tabindex`가 존재해도) 아니오 - Firefox 63 |
| Chrome | 예 - Chrome 35 | 예 - Chrome 65 |
| Safari | N/A | (`tabindex`가 존재해도) 아니오 - Safari 12 (bug 22261) |
| Internet Explorer | 예 - Internet Explorer 11 | N/A |
| Presto | 예 - Opera 12 | 예 - Opera 12 |

`<button>`을 탭했을 때 포커스를 부여하나?| 모바일 브라우저 | iOS 7.1.2 | Android 4.4.4 |
| --- | --- | --- |
| Safari Mobile | (`tabindex`가 존재해도) 아니오 | N/A |
| Chrome 35 | (`tabindex`가 존재해도) 아니오 | 예 |

명세
--

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

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

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


<article> - HTML: Hypertext Markup Language

<article>
=========

**HTML `<article>` 요소**는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있습니다.

시도해보기
-----

하나의 문서가 여러 개의 `<article>`을 가질 수 있습니다. 예컨대 사용자가 스크롤하면 계속해서 다음 글을 보여주는 블로그의 경우, 각각의 글이 `<article>` 요소가 되며, 그 안에는 또 여러 개의 `<section>`이 존재할 수 있습니다.

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

특성
--

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

사용 일람
-----

* 각각의 `<article>`을 식별할 수단이 필요합니다. 주로 제목(`<h1>`-`<h6>`) 요소를 `<article>`의 자식으로 포함하는 방법을 사용합니다.
* `<article>` 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타냅니다. 예를 들어 블로그 글의 댓글은, 글을 나타내는 `<article>` 요소 안에 중첩한 `<article>`로 나타낼 수 있습니다.
* `<article>` 요소의 작성자 정보를 `<address>` 요소를 이용하여 제공할 수 있습니다. 그러나 중첩 `<article>`에는 적용되지 않습니다.
* `<article>` 요소의 작성일자와 시간은 `<time>` 요소의 `datetime` 속성을 이용하여 설명할 수 있습니다. 참고로 `<time>` 요소의 `pubdate` 속성은 더 이상 W3C HTML5 표준안에 포함되지 않습니다.
예제
--

```html
<article class="film\_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main\_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user\_reviews">
    <article class="user\_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on <time datetime="2015-05-16 19:00">May 16</time> by Lisa.
        </p>
      </footer>
    </article>
    <article class="user\_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>Posted on <time datetime="2015-05-17 19:00">May 17</time> by Tom.</p>
      </footer>
    </article>
  </section>
  <footer>
    <p>Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.</p>
  </footer>
</article>
```

명세
--

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

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

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


<li> - HTML: Hypertext Markup Language

<li>
====

**HTML `<li>` 요소**는 목록의 항목을 나타냅니다. 반드시 정렬 목록(`<ol>`), 비정렬 목록(`<ul>`, 혹은 메뉴(`<menu>` (en-US)) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타냅니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 없음. |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 |
 다른 `<li>` 요소 바로 뒤따르거나 자신이 부모의 마지막
 자식인 경우 닫는 태그를 생략할 수 있습니다.
  |
| 가능한 부모 요소 | `<ul>`, `<ol>`,
 `<menu>` (en-US) 요소.
  |
| 가능한 ARIA 역할 | `menuitem` (en-US),
 `menuitemcheckbox` (en-US),
 `menuitemradio` (en-US), `option` (en-US),
 `presentation` (en-US), `radio` (en-US),
 `separator` (en-US), `tab` (en-US),
 `treeitem` (en-US) |
| DOM 인터페이스 | `HTMLLIElement` |

특성
--

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

`value`

`<ol>` 요소 내부에서 항목의 현재 서수 값을 나타내는 정수. 리스트가 로마 숫자나 문자로 표시되더라도 이 특성에는 숫자만 넣을수 있습니다. `value`를 지정한 항목을 뒤따르는 다른 항목은 이 값에서부터 번호를 매깁니다. `value` 속성은 비정렬 목록(`<ul>`)과 메뉴(`<menu>` (en-US))에서는 아무 의미가 없습니다.

**참고:** HTML4에서는 `value`의 사용을 중단했지만 HTML5에서 다시 도입했습니다.

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

넘버링 타입을 나타내는 문자.

* `a`: 소문자 글자
* `A`: 대문자 글자
* `i`: 소문자 로마 숫자
* `I`: 대문자 문자 숫자
* `1`: 숫자

부모 `<ol>` 요소에서 지정하는 유형을 덮어씁니다.

**참고:** 이 속성은 사용 중단됐습니다. 대신 CSS `list-style-type` (en-US) 속성을 사용하세요.

예제
--

더 자세한 예제는 `<ol>`과 `<ul>`을 참고하세요.

### 정렬 목록

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

### 사용자 지정 값을 가진 정렬 목록

```html
<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>
```

### 비정렬 목록

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

명세
--

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

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

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

같이 보기
-----

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


<link>: 외부 리소스 연결 요소 - HTML: Hypertext Markup Language

<link>: 외부 리소스 연결 요소
====================

**HTML `<link>`** 요소는 현재 문서와 외부 리소스의 관계를 명시합니다. `<link>`는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘, 모바일 앱 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.

시도해보기
-----

외부 스타일 시트를 연결하려면 `<head>` 안에 다음과 같은 `<link>` 요소를 배치하세요.

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

위의 간단한 예제는 `href` 특성에 스타일 시트의 경로를, `rel` 특성에 `stylesheet`을 사용합니다. `rel` 은 관계(**rel**ationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명합니다. 따라서 `<link>` 요소의 제일 중요한 기능 중 하나라고 볼 수 있습니다.

그중에서도 몇 가지 자주 쓰이는 유형이 있습니다. 사이트의 파비콘을 연결하려면 다음과 같이 사용합니다.

```html
<link rel="icon" href="favicon.ico" />
```

아이콘을 위한 `rel` 값도 여러개가 있으며, 주 용도는 다양한 휴대기기 플랫폼의 특별한 아이콘을 나타내기 위함입니다.

```html
<link
 rel="apple-touch-icon"
 sizes="114x114"
 href="apple-icon-114.png"
 type="image/png" />
```

`sizes` 특성은 아이콘 크기를, `type` 특성은 연결한 리소스의 MIME을 포함합니다. 브라우저는 이런 여러가지 정보를 통해 가장 적합한 아이콘을 선택합니다.

`media` 특성을 사용해 미디어 유형이나 쿼리를 지정할 수도 있습니다. 그러면 해당 미디어 조건을 만족할 때만 리소스를 불러옵니다.

```html
<link href="print.css" rel="stylesheet" media="print" />
<link
 href="mobile.css"
 rel="stylesheet"
 media="screen and (max-width: 600px)" />
```

새로운 성능 및 보안 관련 기능도 `<link>` 요소에 추가됐습니다. 다음 코드로 살펴보겠습니다.

```html
<link
 rel="preload"
 href="myFont.woff2"
 as="font"
 type="font/woff2"
 crossorigin="anonymous" />
```

`rel`의 `preload` 값은 브라우저가 이 리소스를 미리 불러와야 한다는 것을 나타내고(자세한 정보는 `rel="preload"`를 참고하세요), `as` 특성은 가져오는 리소스가 어떤 리소스인지 나타냅니다. `crossorigin` 특성은 리소스를 CORS 요청으로 불러와야 하는지에 대한 값입니다.

기타 사용 일람:

* `<link>` 요소의 링크 유형이 **body-ok** 인 경우, `<head>` 또는 `<body>` 요소에 포함될 수 있습니다. 예를 들어 `stylesheet` 링크 유형은 body-ok 이므로, `<link rel="stylesheet">`는 body 안에 포함될 수 있습니다. 그러나 이는 좋은 방법은 아닙니다. `<link>` 요소는 body 콘텐츠에서 분리해, `<head>` 안에 포함하는 것이 더 좋습니다.
* `<link>`를 사용하여 사이트의 파비콘을 설정하고, 사이트가 보안을 강화하기 위해 콘텐츠 보안 정책(CSP)을 사용하는 경우 해당 정책은 파비콘에도 적용됩니다. 파비콘이 로드되지 않는 문제가 발생한다면 `Content-Security-Policy` (en-US) 헤더의 `img-src` 지시어가 접근을 막고 있는지 확인하십시오.
* HTML 및 XHTML 명세서에는 `<link>` 요소에 대한 이벤트 처리기가 정의되어 있으나, 어떻게 사용되는지는 불분명합니다.
* XHTML 1.0 이하에서, `<link>` 와 같은 빈 요소는 반드시 `<link />` 처럼 슬래시가 따라와야 합니다.
* WebTV는 `rel` 특성에서 `next` 값을 지원합니다. 이는 문서 시리즈의 다음 페이지를 미리 불러오기 위해 사용됩니다.
특성
--

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

* `as`
    + : `<link>` 요소에 `rel="preload"` 또는 `rel="modulepreload"` (en-US) 특성을 지정했을 때만 사용합니다. `as` 특성은 `<link>` 요소가 불러오는 콘텐츠의 유형을 지정합니다. 요청 매칭, 올바른 콘텐츠 보안 정책의 적용, 올바른 `Accept` 요청 헤더 적용에 필요합니다.
     이에 더해, `rel="preload"`는 `as` 특성을 사용해 요청 우선순위를 매깁니다. 다음 표는 특성의 유효한 값과, 해당 값이 적용되는 요소 또는 리소스를 나열합니다.

    | 값 | 적용되는 요소 또는 리소스 |
    | --- | --- |
    | audio | `<audio>` 요소 |
    | document | `<iframe>` 과 `<frame>` 요소 |
    | embed | `<embed>` 요소 |
    | fetch | fetch, XHR

    **참고:** 이 값은 crossorigin 특성을 포함하기 위해 `<link>` 를 필요로 합니다. CORS가 활성화된 fetch를 확인하세요.
     |
    | font | CSS @font-face |
    | image |
     srcset 또는 imageset 특성을 가지고 있는 `<img>` 와 `<picture>` 요소, SVG `<image>` 요소,
     CSS `*-image` 규칙
      |
    | object | `<object>` 요소 |
    | script | `<script>` 요소, Worker `importScripts` |
    | style | `<link rel=stylesheet>` 요소, CSS
     `@import` |
    | track | `<track>` 요소 |
    | video | `<video>` 요소 |
    | worker | Worker, SharedWorker |
* `blocking`
Experimental

    + : 이 특성은 외부 리소스를 가져올 때 특정 작업이 차단되어야 함을 명시적으로 나타냅니다. 차단할 작업은 아래에 나열된 차단 특성을 공백으로 구분한 리스트 형태여야 합니다.
        - `render`: 화면의 콘텐츠 렌더링이 차단됩니다.
* `crossorigin`
    + : 리소스를 가져올 때 CORS를 사용해야 하는지 나타내는 열거형 특성입니다. CORS 활성화 이미지는 `<canvas>` 요소를 "오염"(taint)시키지 않고 재사용할 수 있습니다. 가능한 값은 다음과 같습니다.
    + `anonymous`
        - : 교차 출처 요청(`Origin` HTTP 헤더를 가진 요청)을 수행하지만 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 어떠한 것도 전송하지 않습니다. 서버에서 `Access-Control-Allow-Origin` HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.
    + `use-credentials`
        - : 교차 출처 요청(`Origin` HTTP 헤더를 가진 요청)을 수행하면서 인증 정보, 즉 쿠키, X.509 인증서, HTTP Basic 인증 중 한 가지 이상을 수행합니다. 서버에서 `Access-Control-Allow-Origin` HTTP 헤더를 설정하지 않아서 출처 사이트에 인증 정보를 전달하지 않으면 리소스가 오염되어 사용처가 제한됩니다.`crossorigin` 특성이 존재하지 않으면 리소스를 CORS 요청 없이 가져오므로 리소스의 오염 없이는 사용이 불가능합니다. 유효하지 않은 값은 **anonymous**를 지정한 것으로 간주합니다. CORS 설정 특성 문서에서 더 자세한 정보를 알아보세요.
* `disabled`
비표준

    + : `rel="stylesheet"`에 한정하여, `disabled` 불리언 특성은 스타일시트를 불러와서 문서에 적용할지 나타냅니다. HTML을 불러오는 시점에 `disabled`를 지정한 경우 스타일시트는 페이지 로딩 시점에 불러오지 않습니다. 이후에 `disabled` 특성이 `false`로 바뀌거나 아예 제거될 때는 불러옵니다.
     DOM에서 `disabled` 속성을 지정하면 문서의 `document.styleSheets` 리스트에서 스타일시트를 제거합니다.
* `fetchpriority`
Experimental

    + : preload된 리소스를 가져올 때 사용할 상대적 우선순위의 힌트를 제공합니다. 허용되는 값은 다음과 같습니다.

    `high`

    같은 유형의 다른 리소스에 비해 우선순위가 높은 가져오기를 호출합니다.

    `low`

    같은 유형의 다른 리소스에 비해 우선순위가 낮은 가져오기를 호출합니다.

    `auto`

    기본값: 같은 유형의 다른 리소스와 비교하여 가져오기 우선순위를 자동으로 결정합니다.
* `href`
    + : 연결할 리소스의 URL입니다. 절대와 상대 URL 모두 가능합니다.
* `hreflang`
    + : 연결할 리소스가 사용하는 언어입니다. 오직 제안하는 용도로만 사용합니다. 가능한 값은 RFC 5646(BCP 47)에 따릅니다. `href` 특성이 존재할 때만 사용하세요.
* `imagesizes`
    + : `rel="preload"` 와 `as="image"` 에 한하여, `imagesizes` 특성은 `img` 요소에 사용되는 적절한 리소스를 해당 `srcset` 과 `sizes` 특성으로 preload 하도록 하는 크기 특성입니다.
* `imagesrcset`
    + : `rel="preload"` 와 `as="image"` 에 한하여, `imagesrcset` 특성은 `img` 요소에 사용되는 적절한 리소스를 해당 `srcset` 과 `sizes` 특성으로 preload 하도록 하는 소스 세트 특성입니다.
* `integrity`
    + : 인라인 메타데이터를 포함합니다. 브라우저에게 가져오도록 지시하려는 리소스(파일)의 Base64로 인코딩된 암호학적 해시입니다. 이를 이용해 브라우저는 가져온 리소스가 예기치 못한 조작 없이 전달되었는지 확인할 수 있습니다. 하위 리소스 무결성을 참고하십시오.
* `media`
    + : 연결된 리소스를 적용할 미디어를 명시합니다. 값으로는 반드시 미디어 유형이나 미디어 쿼리를 사용해야 합니다. `media` 특성은 사용자 에이전트가 현재 장치에 맞춰 최적의 스타일시트를 선택하도록 할 수 있으므로 주로 외부 스타일시트를 연결할 때 유용합니다.

    **참고:**

        - HTML 4에서는 이 특성의 값으로 사용할 수 있는 `print`, `screen`, `aural`, `braille` 등과 같은 값을 공백으로 구분한 미디어 설명 문자열 목록, 예를 들어, 미디어 유형 및 그룹(media types and groups)일 수 있습니다.HTML5에서는 이를 확장하여 HTML 4에서 허용되는 값 외에 어떤 유형의 미디어 쿼리든 사용할 수 있습니다.
        - CSS3 Media Queries를 지원하지 않는 브라우저는 이를 타당한 링크로 인식하지 않을 수 있으므로 HTML 4에 정의되어 있는 제한된 media query의 집합을 이용한 폴백(fallback) 링크를 설정하는 것을 잊지 말기 바랍니다.
* `referrerpolicy`
    + : 리소스를 가져올 때 사용할 레퍼러를 나타내는 문자열입니다.
        - `no-referrer` 는 `Referer` 헤더가 전달되지 않을 것을 의미합니다.
        - `no-referrer-when-downgrade` 는 TLS (HTTPS) 없이 출처로 이동할 때 `Referer` 헤더가 전달되지 않을 것을 의미합니다. 이것은 따로 지정한 정책이 없는 경우의 사용자 에이전트 기본 동작입니다.
        - `origin` 은 레퍼러가 페이지의 출처(대략적으로 scheme, host, port)가 됨을 의미합니다.
        - `origin-when-cross-origin` 은 다른 출처로의 이동이 scheme, host, port로 제한되며, 같은 출처로의 이동에는 레퍼러의 경로가 포함됨을 의미합니다.
        - `unsafe-url` 은 레퍼러에 출처와 경로 (fragment, password, username은 제외)가 포함됨을 의미합니다. 이 경우 TLS로 보호된 리소스의 출처와 경로가 안전하지 않은 출처로 유출될 수 있으므로 안전하지 않습니다.
* `rel`
    + : 연결할 리소스와 현재 문서의 관계. 링크 유형의 값을 공백으로 구분한 리스트를 지정해야 합니다.
* `sizes`
Experimental

    + : 리소스에 포함된 시각 매체의 아이콘 크기를 정의합니다.
     `rel` 이 `icon` 값을 가지고 있거나, Apple의 `apple-touch-icon`과 같은 비표준 유형인 경우에만 사용되어야 합니다.
     이 특성은 다음과 같은 값을 가질 수 있습니다.
        - `any`는 `image/svg+xml`와 같은 벡터 유형 그대로 어떤 크기로든 조정 가능함을 의미합니다.
        - 각각 `<width in pixels>x<height in pixels>` 혹은 `<width in pixels>X<height in pixels>` 형식으로 작성한, 공백으로 구분된 크기 목록. 목록에 명시된 크기들은 반드시 리소스에 포함되어 있어야 합니다.

    **참고:** 대부분의 아이콘 형식은 한 개의 단일 아이콘만을 저장할 수 있습니다. 따라서 대부분의 경우, `sizes` 특성은 하나의 항목만 가지고 있습니다.
     MS의 ICO 형식도 그러하며, Apple의 ICNS도 마찬가지입니다. ICO는 더 보편화되어 있으므로, 브라우저 간 지원(특히 오래된 IE 버전)을 고려하는 경우 이 형식을 사용해야 합니다.
* `title`
    + : `title` 특성은 `<link>` 요소에서 특수한 의미를 가집니다.
     `<link rel="stylesheet">`에 사용되었을 경우, `title`은 기본 혹은 대체 스타일시트를 정의합니다.
* `type`
    + : 이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 특성의 값은 **text/html**, **text/css**와 같은 MIME 타입이여야 합니다. 이 특성은 **text/css**와 같이 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통입니다. 다만 웹에서 사용되는 스타일시트 언어는 CSS가 유일하기에 유형 속성을 생략할 수 있을 뿐 아니라, 권장되고 있습니다. `type` 특성은 브라우저가 지원하는 유형의 파일만 내려받게 하기 위해 `rel="preload"` 링크 유형에서도 사용됩니다.
### 비표준 특성

`methods`
비표준

지원이 중단되었습니다

 이 특성의 값은 객체에서 수행될 수 있는 함수에 대한 정보를 제공합니다.
 값은 일반적으로 HTTP 프로토콜이 사용될 때 주어지지만, **title** 특성과 비슷한 이유로 미리 link에 지침 정보를 포함시키는 것이 유용할 수도 있습니다.
 예를 들어, 브라우저는 명시된 메서드의 함수에 따라 링크의 렌더링을 다르게 선택할 수 있습니다. 검색할 수 있는 링크에는 다른 아이콘을 사용한다거나, 외부 링크에는 현재 사이트를 떠난다는 것을 나타내는 아이콘을 사용할 수 있습니다.
 이 특성은 제대로 이해되거나 지원되지 않았습니다. 심지어 정의한 브라우저인 Internet Explorer 4에서도 이 특성을 제대로 지원하지 못합니다.

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

정의된 링크 관계가 있거나 링크된 리소스의 렌더링을 표시할 프레임 또는 창 이름을 정의합니다.

### 폐기된 특성

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

 이 특성은 링크된 리소스의 문자 인코딩을 정의합니다.
 이 값은 RFC 2045에 정의되어 있는 공백이나 쉼표로 구분된 문자 집합의 목록입니다.
 기본값은 `iso-8859-1` 입니다.

**참고:** 이 폐기된 특성과 동일한 효과를 구현하려면, 링크된 리소스에서 `Content-Type` HTTP 헤더를 사용하십시오.

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

 이 특성의 값은 `href` 특성에 정의된 대로 현재 문서와 링크된 문서의 관계를 나타냅니다.
 따라서 이 특성은 `rel` 특성의 값과 비교했을 때 반대되는 관계를 정의합니다.
 `rev` 특성의 연결 유형 값은 `rel`에서 사용 가능한 값들과 유사합니다.

**참고:** `rev`를 사용하는 대신, 반대되는 연결 유형 값을 가지는 `rel` 특성을 사용하십시오.
 예를 들어, `made`의 역방향 링크를 설정하려면 `author`를 명시해야 합니다. 또한 이 특성은 "리비전(revision)"의 축약어가 아니며, 버전 번호와 함께 사용되어서는 안됩니다. 많은 사이트에서 이런 식으로 오용하고 있습니다.

예제
--

### 스타일 시트 포함하기

페이지에 스타일 시트를 포함하려면 다음 구문을 사용하세요.

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

### 대체 스타일시트 제공하기

대체 스타일시트를 제공할 수도 있습니다.

유저는 View>Page Style 메뉴에서 사용할 스타일시트를 고를수 있습니다. 이것은 유저가 페이지를 여러 버전으로 볼수 있는 방법을 제공합니다.

```html
<link href="default.css" rel="stylesheet" title="Default Style" />
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" />
<link href="basic.css" rel="alternate stylesheet" title="Basic" />
```

### 다양한 사용 환경에 맞는 아이콘 제공하기

같은 페이지에 여러 개의 서로 다른 아이콘 link들을 포함할 수 있으며, 브라우저는 `rel`과 `sizes` 특성을 통해 특정 환경에 가장 적합한 아이콘을 선택합니다.

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

### 미디어 쿼리를 이용하여 조건에 맞는 리소스 로드하기

미디어 유형이나 쿼리를 `media` 특성 안에 제공할 수 있습니다. 이 리소스는 미디어 조건이 참일 경우에만 로드됩니다.

```html
<link href="print.css" rel="stylesheet" media="print" />
<link href="mobile.css" rel="stylesheet" media="all" />
<link
 href="desktop.css"
 rel="stylesheet"
 media="screen and (min-width: 600px)" />
<link
 href="highres.css"
 rel="stylesheet"
 media="screen and (min-resolution: 300dpi)" />
```

### 스타일 시트 load 이벤트

당신은 load 이벤트를 통해 스타일시트가 언제 로드되는지 확인할수 있습니다. 비슷한 방법으로, 당신은 error 이벤트를 통해 스타일시트를 처리하는 도중 에러가 발생했는지 확인할 수 있습니다.

```html
<script>
 function sheetLoaded() {
 // Do something interesting; the sheet has been loaded
 }

 function sheetError() {
 alert("An error occurred loading the stylesheet!");
 }
</script>

<link
 rel="stylesheet"
 href="mystylesheet.css"
 onload="sheetLoaded()"
 onerror="sheetError()" />
```

**참고:** `load` 이벤트는 스타일시트를 포함한 불러온 모든 콘텐츠가 로드되고 분석된 뒤, style이 콘텐츠에 적용 시작되기 직전에 발생합니다.

### Preload 예제

`rel="preload"`를 이용해 콘텐츠 프리로딩하기에서 더 많은 `<link rel="preload">` 예제들을 찾아볼 수 있습니다.

### 리소스를 가져올 때까지 렌더링 차단하기

`blocking` 특성 안에 `render` 토큰을 넣을 수 있습니다. 이렇게 하면 리소스를 가져올 때까지 페이지 렌더링이 차단됩니다.

```html
<link blocking="render" href="critical-font.woff2" as="font" />
```

기술 요약
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 |
 메타데이터 콘텐츠.
 `itemprop`이 존재하면
 플로우 콘텐츠
 및
 구문 콘텐츠.
  |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 여는 태그는 필수입니다. 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 |
 메타데이터 콘텐츠를 허용하는 모든 요소.
 `itemprop`이 존재하면
 구문 콘텐츠를 허용하는 모든 요소.
  |
| 포함되는 ARIA 역할 | `href` 특성이 있는 `link` (en-US) |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLLinkElement` (en-US) |

명세
--

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

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

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

같이 보기
-----

* `Link` (en-US) HTTP 헤더
* The `integrity` attribute on 150daysofhtml.com (2021)


<u> - HTML: Hypertext Markup Language

<u>
===

**HTML `<u>` 요소**는 글자로 표현하지 않는 주석을 가진 것으로 렌더링 해야 하는 텍스트를 나타냅니다. 기본값에서는 단순한 밑줄로 표시하지만 CSS를 사용해 바꿀 수 있습니다.

**경고:** `<u>` 요소는 과거 HTML에서 밑줄(Underline) 요소로 불렸으며 지금도 밑줄을 추가할 목적으로 남용하는 경우가 있습니다. 그러나 밑줄을 위해서는 CSS `text-decoration` 속성을 `underline`으로 지정하는 방법을 대신 사용해야 합니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

다른 순수 스타일 요소와 마찬가지로, 원래의 HTML 밑줄 요소(`<u>`)는 HTML 4부터 사용을 중단했으나, HTML 5에서 새로운 의미를 얻으며 돌아왔습니다. HTML 5에서 `<u>` 요소는 텍스트가 일종의 문자가 아닌 주석을 가지고 있음을 나타냅니다.

**참고:** `<u>`와 하이퍼링크 둘 다 기본 스타일이 밑줄이므로, `<u>`를 기본 스타일로 사용하는건 피해야 합니다.

### 사용처

`<u>` 요소의 유효한 사용처는 철자 오류 강조, 중국어의 고유명사 표시 등이 있습니다.

`<u>`를 사용해 밑줄만 추가하거나, 책 제목 등을 강조해서는 안됩니다.

### 고려할만한 다른 요소

대부분의 경우 `<u>` 대신 다른 요소를 사용해야 합니다.

* `<em>` 요소는 강세를 나타냅니다.
* `<b>` 요소는 사용자의 주의를 텍스트로 돌립니다.
* `<mark>` 요소는 관련성을 나타냅니다.
* `<strong>` (en-US) 요소는 강한 중요성을 나타냅니다.
* `<cite>` 요소는 책, 공연, 음악 등 저작물의 이름을 나타냅니다.
* `<i>` 요소는 기술 용어, 외국어, 등장인물의 생각 등을 나타냅니다.

`<u>`가 비 텍스트 표기라면, `<ruby>`는 텍스트 표기를 제공합니다.

별도의 의미 없이 밑줄만 추가하려면 CSS `text-decoration` 속성의 값을 `underline`으로 지정하세요.

예제
--

### 맞춤법 오류 표시

이번 예제는 `<u>`와 약간의 CSS를 사용해, 문단에서 철자 오류가 존재하는 부분을 빨간색 물결 밑줄로 표시합니다.

#### HTML

```html
<p>맞춤법을 틀리면 <u class="spelling">않돼요</u>.</p>
```

`spelling` 클래스를 가진 `<u>` 요소가 "안돼요"의 잘못된 철자를 나타내고 있음을 볼 수 있습니다.

#### CSS

```css
u.spelling {
  text-decoration: red wavy underline;
}
```

CSS는 `spelling` 클래스를 가진 `<u>` 요소에 빨간 물결 밑줄을 적용하고 있습니다. 빨간 물결 밑줄은 맞춤법 오류를 표시할 때 흔히 쓰이는 스타일입니다. 또 다른 스타일은 `red dashed underline`입니다.

#### 결과

최근 워드 프로세서를 사용해본 경우 친숙한 모습일 것입니다.

### `<u>` 피하기

대부분의 경우, 사실 `<u>` 요소를 피하는게 좋습니다. 다음은 다른 요소를 사용해야 하는 몇 가지 경우입니다.

#### 의미를 가지지 않는 밑줄

아무런 의미를 나타내지 않고 밑줄만 추가할 경우 `<span>` 요소를 사용하고, `text-decoration` 속성의 값은 `underline`으로 지정하세요.

##### HTML

```html
<span class="underline">Today's Special</span>
<br />
Chicken Noodle Soup With Carrots
```

##### CSS

```css
.underline {
  text-decoration: underline;
}
```

##### Result

#### 책 제목 표현하기

책 제목은 `<u>` 대신 `<cite>`를 사용해 나타내야 합니다.

##### HTML

```html
<p>The class read <cite>Moby Dick</cite> in the first term.</p>
```

##### 기본 스타일 결과

`<cite>` 요소의 기본 스타일은 기울임꼴을 적용합니다. 원한다면 CSS를 사용해 재정의할 수 있습니다.

```css
cite {
  font-style: normal;
  text-decoration: underline;
}
```

##### 사용자 지정 스타일 결과

명세
--

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

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

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

같이 보기
-----

* 보통 `<span>`, `<i>`, `<em>`, `<b>`, `<cite>` 요소를 사용하는 편이 더 적합합니다.
* 특별한 의미를 가지지 않는 밑줄은 CSS `text-decoration` 속성을 사용해야 합니다.


<object> - HTML: Hypertext Markup Language

<object>
========

**HTML `<object>` 요소**는 이미지나, 중첩된 브라우저 컨텍스트, 플러그인에 의해 다뤄질수 있는 리소스와 같은 외부 리소스를 나타냅니다.

시도해보기
-----

* `[컨텐츠 범주](/ko/docs/HTML/Content_categories)` 플로우 컨텐츠 (en-US); 구문 컨텐츠 (en-US); 포함된 컨텐츠 (en-US), palpable 컨텐츠; 만약 요소가 \*\*usemap \*\* 속성을 가지고 있다면, 대화형 컨텐츠 (en-US); listed (en-US), submittable (en-US) form-associated (en-US) element.
* `허용된 컨텐츠` 0개 이상의 `<param>` (en-US) elements, then Transparent content (en-US).
* `태그 생략` 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다.
* `허용된 부모 요소` 포함된 컨텐츠 (en-US)를 허용하는 모든 요소
* `DOM 인터페이스` `HTMLObjectElement` (en-US)
속성
--

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

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

A space-separated list of URIs for archives of resources for the object.

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

The width of a border around the control, in pixels.

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

The URI of the object's implementation. It can be used together with, or in place of, the **data** attribute.

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

The base path used to resolve relative URIs specified by **classid**, **data**, or **archive**. If not specified, the default is the base URI of the current document.

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

The content type of the data specified by **classid**.

`data`

리소스의 URL. 최소 하나의 **data**와 **type**가 정의되어야 합니다.

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

The presence of this Boolean attribute makes this element a declaration only. The object must be instantiated by a subsequent `<object>` element. In HTML5, repeat the <object> element completely each that that the resource is reused.

`form`

object 요소와 관련된 form 요소. 이 속성의 값은 같은 문서의 `<form>` 요소의 ID 속성의 값이여야 합니다.

`height`

표시될 리소스의 높이를 CSS 픽셀 단위로 지정합니다.

`name`

유효한 브라우징 컨텍스트의 이름(HTML5) 또는, 컨트롤의 이름(HTML 4)

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

A message that the browser can show while loading the object's implementation and data.

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

The position of the element in the tabbing navigation order for the current document.

`type`

**data**에 의해 지정된 리소스의 컨텐츠 타입 (en-US). 최소 한 개의 **data**와 **type**가 정의되어야 합니다.

`typemustmatch`

**type**와 리소스의 실제 컨텐츠 타입 (en-US)이 일치해야되는지를 나타내는 불리언 속성

`usemap`

`<map>` 요소에 대한 해쉬-이름 참조; #와 그 뒤에 map 요소의 `name` 값이 붙음

`width`

표시될 리소스의 가로 길이를 CSS 픽셀단위로 지정합니다.

예제
--

### 포함된 플래시 무비

```html
<!-- Embed a flash movie -->
<object data="move.swf" type="application/x-shockwave-flash"></object>

<!-- Embed a flash movie with parameters -->
<object data="move.swf" type="application/x-shockwave-flash">
  <param name="foo" value="bar" />
</object>
```

명세
--

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

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

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

같이 보기
-----

* `<embed>`
* `<param>` (en-US)


<map> - HTML: Hypertext Markup Language

<map>
=====

**HTML `<map>` 요소**는 `<area>` 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용합니다.

시도해보기
-----

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

특성
--

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

`name`

맵을 참조할 때 사용할 수 있는 이름. 반드시 존재해야 하고, 값이 비면 안되며, 값에 공백 문자가 포함되어도 안됩니다. `name` 특성은 문서 내의 모든 `<map>`에서 유일해야 합니다. `id` 특성이 존재하는 경우 `name`과 값이 동일해야 합니다.

예제
--

```html
<map name="primary">
  <area shape="circle" coords="75,75,75" href="left.html" />
  <area shape="circle" coords="275,75,75" href="right.html" />
</map>
<img usemap="#primary" src="https://placehold.it/350x150" alt="350 x 150 pic" />
```

### 결과

### 예상 결과

키보드의 탭을 눌렀을 때, 위의 예제는 아래 사진처럼 나와야 합니다.

`left.html` 링크:

 ![](/ko/docs/Web/HTML/Element/map/screen_shot_2017-02-02_at_10.48.40_pm.png)

`right:html` 링크:

 ![](/ko/docs/Web/HTML/Element/map/screen_shot_2017-02-02_at_10.49.04_pm.png)

명세
--

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

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

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

같이 보기
-----

* `<a>`
* `<area>`


<dfn>: 정의 요소 - HTML: Hypertext Markup Language

<dfn>: 정의 요소
============

**HTML `<dfn>` 요소**는 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냅니다. `<dfn>`에서 가장 가까운 `<p>`, `<dt>`/`<dd>` 쌍, `<section>` 조상 요소를 용어 정의로 간주합니다.

시도해보기
-----

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

특성
--

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

사용 일람
-----

`<dfn>` 요소를 보는 것 만으로는 그다지 명확하지 않은 부분이 있습니다.

### 정의하고 있는 용어 지정하기

다음 규칙을 따라 현재 용어가 어느건지 판별합니다.

1. `<dfn>` 요소가 `title` 특성을 가지고 있으면 그 값을 현재 정의 중인 용어로 간주합니다. `<dfn>`은 여전히 텍스트 콘텐츠를 가지고 있겠지만, 완전한 용어 대신 준말(`<abbr>`)을 넣을 수도 있고, 다른 대체 형태일 수도 있습니다.
2. `<dfn>`이 다른 텍스트는 없이 하나의 자식만 가지는데, 그 자식이 `title` 특성을 가진`<abbr>`인 경우, 자식 `<abbr>`의 `title` 특성 값을 현재 용어로 간주합니다.
3. 모두 아닌 경우 `<dfn>`의 텍스트 콘텐츠를 현재 용어로 간주합니다. 아래의 첫 번째 예제에서 확인할 수 있습니다.

**참고:** `<dfn>` 요소가 `title` 특성을 가진 경우, 그 값은 정의 중인 용어여야 하며 다른 텍스트는 들어가선 안됩니다.

### `<dfn>` 요소를 가리키는 링크

`<dfn>` 요소에 `id` 특성을 지정하면 `<a>` 요소로 `<dfn>`을 가리킬 수 있습니다. 사용자가 용어 뜻을 잘 모를 경우, 링크를 클릭해 빠르게 정의를 확인할 수 있습니다. 따라서 링크 콘텐츠는 용어의 사용 예시 등을 담고 있어야 합니다.

정의로 링크 예제에서 확인할 수 있습니다.

예제
--

다양한 상황의 예제를 살펴보겠습니다.

### 기본적인 용어 식별

아래 코드는 간단하게 `<dfn>` 요소를 사용해, 정의 문단 내의 용어를 식별합니다.

#### HTML

```html
<p>
  The <strong>HTML Definition element</strong> (<strong
 ><dfn><dfn></dfn></strong
 >) is used to indicate the term being defined within the context of a
  definition phrase or sentence.
</p>
```

`<dfn>` 요소에 `title`이 없으므로 `<dfn>`의 텍스트 콘텐츠가 현재 정의 중인 용어입니다.

#### 결과

### 정의로 링크

용어의 정의로 링크하는 건 `<a>` 요소로 다른 링크를 만드는 방법과 같습니다.

#### HTML

```html
<p>
  The <strong>HTML Definition element</strong> (<strong
 ><dfn id="definition-dfn"><dfn></dfn></strong
 >) is used to indicate the term being defined within the context of a
  definition phrase or sentence.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine
  voluptatem vocant. Confecta res esset. Duo Reges: constructio interrete.
  Scrupulum, inquam, abeunti;
</p>

<p>
  Negare non possum. Dat enim intervalla et relaxat. Quonam modo? Equidem e Cn.
  Quid de Pythagora? In schola desinis.
</p>

<p>
  Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum est igitur,
  quid sit voluptas; Quid enim? Non est igitur voluptas bonum. Urgent tamen et
  nihil remittunt. Quid enim possumus hoc agere divinius?
</p>

<p>
  Because of all of that, we decided to use the
  <code><a href="#definition-dfn"><dfn></a></code> element for this
  project.
</p>
```

이번에는 `id` 특성에 `"definition-dfn"`을 사용한 용어 정의입니다. 코드 뒤쪽에서는 `<a>` 태그와 `href` 특성 값 `"#definition-dfn"`으로, 정의를 가리키는 링크를 생성합니다.

#### 결과

### 준말과 정의 같이 사용하기

어떤 경우, 용어를 정의할 때 머리글자 등 준말을 사용하고 싶을 때가 있습니다. 그럴 땐 `<dfn>`과 `<abbr>` 요소를 조합하면 됩니다.

#### HTML

```html
<p>
  The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> is among the
  most productive scientific instruments ever constructed. It has been in orbit
  for over 20 years, scanning the sky and returning data and photographs of
  unprecedented quality and detail.
</p>

<p>
  Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has arguably done
  more to advance science than any device ever built.
</p>
```

`<dfn>` 요소 안에 배치한 `<abbr>`을 주목하세요. `<abbr>`은 준말("HST")과 함께 `title` 특성으로 전체 용어("Hubble Space Telescope")를 지정합니다. `<dfn>`은 `<abbr>`의 준말을 현재 정의하고 있음을 나타냅니다.

#### 결과

명세
--

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

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

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

같이 보기
-----

* 용어 정의 관련 요소: `<dl>`, `<dt>`, `<dd>`
* `<abbr>`


<base> - HTML: Hypertext Markup Language

<base>
======

**HTML `<base>` 요소**는 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 하나의 `<base>` 요소만 존재할 수 있습니다.

문서의 기준 URL을 스크립트에서 접근해야할 땐 `document.baseURI` (en-US)을 사용할 수 있습니다. 문서에 `<base>` 요소가 존재하지 않을 때 `baseURI`의 기본값은 `location.href` (en-US)입니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 메타데이터 콘텐츠. |
| 가능한 콘텐츠 | 없음. 빈 요소입니다. |
| 태그 생략 | 닫는 태그는 존재해선 안됩니다. |
| 가능한 부모 요소 |
 다른 `<base>` 요소를 포함하지 않는
 `<head>` 요소.
  |
| 암시적 ARIA 역할 | 대응하는 역할 없음 |
| 가능한 ARIA 역할 | 없음 |
| DOM 인터페이스 | `HTMLBaseElement` (en-US) |

특성
--

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

**경고:** 다음 특성 중 하나라도 지정한 경우, 상대 URL을 특성에 사용한 모든 요소보다 `<base>`가 앞에 위치해야 합니다.

* `href`
    + : 문서 내 상대 URL이 사용할 기준 URL. 절대 및 상대 URL을 사용할 수 있습니다.
* `target`
    + : `target` 속성을 명시하지 않은 `<a>`, `<area>`, 또는 `<form>` 요소가 탐색을 유발했을 때, 그 결과를 보여줄 기본 브라우징 맥락. **키워드**나 **저작자 정의 이름**으로 지정합니다.다음 키워드는 특별한 의미를 갖습니다.
    + `_self` (기본값): 결과를 현재 브라우징 맥락에 보여줍니다.
    + `_blank`: 결과를 새로 생성한, 이름 없는 브라우징 맥락에 보여줍니다.
    + `_parent`: 현재 페이지가 프레임 안에 존재하는 경우, 결과를 현재 브라우징 맥락의 부모에 보여줍니다. 부모가 없으면 `_self`와 동일합니다.
    + `_top`: 결과를 최상위 브라우징 맥락에 보여줍니다. 최상위 브라우징 맥락이란 현재 맥락의 조상 중 부모가 없는 맥락입니다. 현재 맥락이 부모를 가지지 않으면 `_self`와 동일합니다.
사용 일람
-----

### 다중 `<base>` 요소

`<base>` 요소가 여러 개 존재하는 경우 첫 `href`와 첫 `target`만 사용하며 나머지는 모두 무시합니다.

### 페이지 내부 앵커

`<a href="#some-id">`처럼, 문서 프래그먼트를 가리키는 링크 주소도 `<base>`를 사용해 처리하므로, 기준 URL 뒤에 프래그먼트를 붙인 주소로 HTTP 요청을 유발합니다. 예를 들어,

1. `<base href="https://example.com">`을 가정
2. `<a href="#anchor">Anker</a>`를 가정
3. 2번의 링크는 `https://example.com/#anchor`를 가리킵니다.
### Open Graph

Open Graph 태그는 `<base>`를 인식하지 않으므로 항상 온전한 형태의 절대 URL을 지정해야 합니다.

```html
<meta property="og:image" content="https://example.com/thumbnail.jpg" />
```

예제
--

```html
<base href="http://www.example.com/page.html" />
<base target="\_blank" />
<base target="\_target" href="http://www.example.com/page.html" />
```

명세
--

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

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

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


<abbr> - HTML: Hypertext Markup Language

<abbr>
======

**HTML `<abbr>` 요소**는 준말 또는 머리글자를 나타냅니다. 선택 속성인 `title`을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. `title` 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.

시도해보기
-----

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

특성
--

이 요소는 전역 특성만 포함합니다. 단, 다른 요소와 달리 `<abbr>` 요소에서의 `title` 특성은 특정한 의미를 가지며, `title`은 준말에 대한 설명 혹은 확장 형태를 사람이 읽을 수 있는 형태를 값으로 가져야 합니다. 브라우저는 `title`의 값을 보통 마우스 커서를 올렸을 때 나타나는 툴팁으로 보여줍니다.

각각의 `<abbr>` 요소는 서로 독립적입니다. 하나의 요소에 `title`을 제공한다고 나머지에 지정하지 않아도 되는 것은 아닙니다.

사용 일람
-----

### 많이 쓰이는 곳

당연히 모든 준말을 `<abbr>`로 표시해야 하는 것은 아닙니다. 그러나 표시할 경우 도움이 될, 다음과 같은 경우가 있습니다.

* 사용한 준말과 머리글자를 문서 콘텐츠 플로우 밖에서 풀어서 설명하고 싶으면 적절한 `title` 특성을 지정한 `<abbr>` 요소를 사용하세요.
* 독자에게 익숙하지 않을 수 있는 준말을 사용할 경우 `<abbr>`과 함께 `title` 특성이나 인라인 텍스트로 단어에 대한 정의를 제공하세요.
* 준말임을 명시적으로 나타내야 할 경우 `<abbr>` 요소가 유용합니다. 이를 응용하면 스타일링이나 스크립트 적용에도 사용할 수 있습니다.
* `<abbr>`을 `<dfn>`과 같이 사용하면 준말이나 머리글자를 그 정의와 연결할 수 있습니다. 아래의 준말 정의하기을 참고하세요.
### 문법 고려사항

수량이 문법에 영향을 미치는 언어(one apple vs. two apple**s**)의 경우, `<abbr>` 요소의 텍스트와 `title` 특성의 내용이 같은 형태를 따르도록 하세요. 아랍어처럼 두 개 이상의 복수형 구분을 두는 언어에서 특히 중요하나, 영어도 해당합니다.

기본 스타일
------

`<abbr>`의 목적은 오로지 HTML 작성자의 편리함을 위함이며, 모든 브라우저는 기본적으로 인라인(`display` (en-US)`: inline`)으로 렌더링 합니다. 그러나 기본 스타일은 브라우저마다 다를 수 있습니다.

* Internet Explorer 등 일부 브라우저는 `<span>` 요소와 동일하게 그립니다.
* Opera, Firefox 등은 요소에 점선 밑줄을 추가합니다.
* 몇몇은 점선을 추가할 뿐만 아니라, 영어 소문자도 작은 대문자로 표현합니다. 이를 제거하려면 CSS `font-variant` (en-US)를 `none`으로 설정하세요.
예제
--

### 준말임을 나타내기

설명 없이, 단순히 특정 단어가 준말임을 나타내기만 하고자 하면 `<abbr>`을 다른 특성 없이 사용하세요.

#### HTML

```html
<p>Using <abbr>HTML</abbr> is fun and easy!</p>
```

#### 결과

### 준말 스타일링

CSS를 사용해 준말에 적용할 사용자 지정 스타일을 적용할 수 있습니다.

#### HTML

```html
<p>Using <abbr>CSS</abbr>, you can style your abbreviations!</p>
```

#### CSS

```css
abbr {
  font-variant: all-small-caps;
}
```

#### 결과

### 펼친 형태 보여주기

`title` 특성을 사용하면 준말과 머리글자를 펼친 원래 형태를 보여줄 수 있습니다.

#### HTML

```html
<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>
```

#### 결과

### 준말 정의하기

`<abbr>`과 `<dfn>`을 사용하면 준말을 정식으로 정의할 수 있습니다.

#### HTML

```html
<p>
  <dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> </dfn> is a
  markup language used to create the semantics and structure of a web page.
</p>

<p>
  A <dfn id="spec">Specification</dfn> (<abbr title="Specification">spec</abbr>)
  is a document that outlines in detail how a technology or API is intended to
  function and how it is accessed.
</p>
```

#### 결과

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

준말과 머리글자가 처음 사용될 때, 그 뜻을 풀어 설명하면 독자가 문서를 이해하기 쉬워집니다. 특히 콘텐츠가 기술이나 산업에 관련된 전문적인 내용인 경우 더욱 그렇습니다.

#### 예제

```html
<p>
  JavaScript Object Notation(<abbr>JSON</abbr>)은 경량의 데이터 교환 형식입니다.
</p>
```

무엇보다 용어나 개념에 익숙하지 않은 사람, 언어를 새로 접한 사람, 그리고 인지력 문제를 겪고 있는 사용자에게 큰 도움이 됩니다.

명세
--

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

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

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


<fieldset>: 필드셋 요소 - HTML: Hypertext Markup Language

<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>: 변수 요소 - HTML: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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: Hypertext Markup Language

<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> - HTML: Hypertext Markup Language

========

**지원이 중단되었습니다:** 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) 의 요소이다. 그리고 해당  요소안에 포함된 전체요소는 의 내용안에 가운데 정렬이 된다. (통상적으로 `<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 `
` (en-US) or `
` element centers the *contents* of those elements while leaving their overall dimensions unchanged.

더 보기
----

* `text-align`
* `display` (en-US)


<legend> - HTML: Hypertext Markup Language

<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.


<option> - HTML: Hypertext Markup Language

<option>
========

**HTML `<option>` 요소**는 `<select>` (en-US), `<optgroup>`, `<datalist>` 요소의 항목을 정의합니다. 그러므로, `<option>`을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있습니다.

시도해보기
-----

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

특성
--

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

`disabled`

지정한 경우 이 옵션을 선택할 수 없습니다. 브라우저에서, 비활성화 옵션은 주로 회색으로 보이며, 클릭과 포커스 등 모든 이벤트를 받지 않습니다. `<option>`에 `disabled` 특성을 추가하지 않더라도, `<optgroup>` 등 조상 요소로 인해 비활성화될 수 있습니다.

`label`

옵션의 뜻을 나타내는 텍스트. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.

`selected`

지정한 경우 초기에 이 옵션을 선택한 상태로 설정합니다. `multiple` (en-US)를 지정하지 않은 `<select>` (en-US) 요소의 자손인 경우, 하나의 `<option>`만 `selected` 특성을 가질 수 있습니다.

`value`

양식 데이터를 구성할 때 사용할 값. 지정하지 않은 경우, 요소의 텍스트 콘텐츠를 대신 사용합니다.

예제
--

`<select>` (en-US) 요소를 참고하세요.

명세
--

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

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

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


<section>: 일반 구획 요소 - HTML: Hypertext Markup Language

<section>: 일반 구획 요소
===================

**HTML `<section>` 요소**는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 `<section>`은 제목을 포함하지만, 항상 그런 것은 아닙니다.

시도해보기
-----

**참고:** 요소의 콘텐츠를 외부와 구분하여 단독으로 묶는 것이 나아보인다면 `<article>` 요소가 더 좋은 선택일 수 있습니다.

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠,
 구획 콘텐츠, 뚜렷한 콘텐츠.
  |
| 가능한 콘텐츠 | 플로우 콘텐츠. |
| 태그 생략 | 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다. |
| 가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소.단, `<section>` 요소는
 `<address>`의 자손이 될 수 없습니다.
  |
| 가능한 ARIA 역할 | `alert` (en-US), `alertdialog` (en-US),
 `application` (en-US), `banner` (en-US),
 `complementary` (en-US),
 `contentinfo` (en-US), `dialog` (en-US),
 `document` (en-US), `feed` (en-US),
 `log` (en-US), `main` (en-US),
 `marquee` (en-US), `navigation` (en-US),
 `search` (en-US), `status` (en-US),
 `tabpanel` (en-US) |
| DOM 인터페이스 | `HTMLElement` |

특성
--

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

사용 일람
-----

* 각각의 `<section>`을 식별할 수단이 필요합니다. 주로 제목(`<h1>`-`<h6>`) 요소를 `<section>`의 자식으로 포함하는 방법을 사용합니다.
* 요소의 콘텐츠를 따로 구분해야 할 필요가 있으면 `<article>` 요소를 고려하세요.
* `<section>` 요소를 일반 컨테이너로 사용하지 마세요. 특히 단순한 스타일링이 목적이라면 `<div>` (en-US) 요소를 사용해야 합니다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 `<section>`이 좋은 선택입니다.
예제
--

### 이전

```html
<div>
  <h2>Heading</h2>
  <img>some image</img>
</div>
```

### 이후

```html
<section>
  <h2>Heading</h2>
  <img>some image</img>
</section>
```

명세
--

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

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

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

같이 보기
-----

* ARIA: Region role (en-US)


<ul> - HTML: Hypertext Markup Language

<ul>
====

**HTML `<ul>` 요소**는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.

시도해보기
-----

|  |  |
| --- | --- |
| 콘텐츠 카테고리 | 플로우 콘텐츠. 또한, 최소 하나의 `<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 인터페이스 | `HTMLUListElement` (en-US) |

특성
--

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

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

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent, and it doesn't work in all browsers.

>
> **Warning:** Do not use this attribute, as it has been deprecated: use CSS instead. To give a similar effect as the `compact` attribute, the CSS property `line-height` (en-US) can be used with a value of `80%`.
>
>
>

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

This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:

`circle`
`disc`
`square`

A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: `<code>`triangle`.

If not present and if no CSS `list-style-type` (en-US) property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.

>
> **Warning:** Do not use this attribute, as it has been deprecated; use the CSS `list-style-type` (en-US) property instead.
>
>
>

사용 일람
-----

보통 비정렬 목록의 항목은 선행하는 불릿 마커 (en-US)와 함께 표시합니다.

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

`<ul>`과 `<ol>`은 모두 목록을 나타냅니다. 차이가 있다면 `<ul>`에서는 순서가 중요하지 않다는 점입니다. 항목의 순서를 바꿨을 때 의미도 바뀐다면 `<ol>`을 사용하세요. 그렇지 않으면 `<ul>`을 사용할 수 있습니다.

예제
--

### 간단한 예제

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

### 중첩 목록

```html
<ul>
  <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
        <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>
      <!-- Closing </li> tag for the li that
 contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>
```

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

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

명세
--

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

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

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

같이 보기
-----

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