recursal/MDN huggingface dataset:
HTML attribute: crossorigin
===========================

`<audio>` (en-US), `<img>`, `<link>`, `<script>`, `<video>`에 있는 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 CORS 가능하게 합니다. 특정 element에서는 CORS 세팅 속성이 될 수도 있습니다.

Media element의 `crossorigin` 속성은 CORS 세팅입니다.

세팅 속성은 열거형이며 아래의 값을 가질 수 있습니다:

| Keyword | Description |
| --- | --- |
| `anonymous` | element의 CORS 요청의 credentials flag가 'same-origin'으로 지정됩니다. |
| `use-credentials` | element의 CORS 요청의 crendentials flag가 'include'로 지정됩니다. |
| `""` | `crossorigin` 또는 `crossorigin=""`처럼 빈 값을 할당하는건 `anonymous`와 동일합니다. |

기본적으로 (attribute를 명시하지 않으면) CORS 요청은 할 수 없습니다. "anonymous" 키워드는 쿠키를 통한 **user credentials** 교환이 필요 없음을 의미합니다. Same origin이 아닌 경우 client-side SSL certificates/HTTP 인증은 Terminology section of the CORS specification에서 기술하고 있습니다.

빈 문자열이나 잘못된 값일 경우 `anonymous` 와 동일하게 동작합니다.

### 예시: script element의 crossorigin

아래의 `<script>` element를 통해 브라우저로 하여금 `https://example.com/example-framework.js` 스크립트를 user-credential 없이 요청하도록 명시할 수 있습니다.


```html
<script
 src="https://example.com/example-framework.js"
 crossorigin="anonymous"></script>
```

### 예시: credential 포함한 Webmanifest

Manifest 요청 시 credential이 필요하다면 same-origin의 리소스라 하여도 `use-credentials` 값을 사용해야 합니다.


```html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
```

명세서
---

| Specification |
| --- |
| HTML Standard # cors-settings-attributes |

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

### html.elements.img.crossorigin

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

### html.elements.link.crossorigin

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

### html.elements.script.crossorigin

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

### html.elements.video.crossorigin

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

더 보기
----

* Cross-Origin Resource Sharing (CORS)
* HTML attribute: `rel`
<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 `<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 `<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.
<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 `<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` 속성.
<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 `<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 `<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>`
<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 `<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.