recursal/MDN huggingface dataset:
draggable
=========

**`draggable`** 전역 특성은 요소의 드래그 가능 여부를 나타내는 열거형 특성으로, 네이티브 브라우저 동작 방식과 HTML Drag and Drop API 모두 통제합니다.

`draggable`은 다음 두 값 중 하나를 가질 수 있습니다.

* `true`: 요소를 드래그 할 수 있습니다.
* `false`: 요소를 드래그 할 수 없습니다.

**경고:** `draggable` 특성은 불리언이 아니고 열거형 특성이므로, `true` 또는 `false`의 지정 또한 필수입니다. 그러므로 `<img draggable>`처럼 사용할 수 없고, 올바른 사용법은 `<img draggable="false">`입니다.

`draggable`을 지정하지 않은 경우의 기본값은 `auto`로, 브라우저 기본 동작을 따릅니다. 즉, 텍스트 선택 영역, 이미지, 링크 외에는 드래그가 불가능합니다. 종합 예제 (en-US)에서 볼 수 있듯, 다른 요소에 드래그 앤 드롭을 적용하려면 `ondragstart` (en-US) 이벤트 처리기가 필요합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-draggable-attribute |

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

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

같이 보기
-----

* 모든 전역 특성.
id
==

**`id`** 전역 특성은 문서 전체에서 유일한 고유식별자(ID)를 정의합니다. 고유식별자의 목적은 프래그먼트 식별자를 사용해 요소를 가리킬 때와 스크립트 및 스타일 적용 시 특정 요소를 식별하기 위함입니다.

시도해보기
-----

**경고:** `id` 특성의 값은 불투명 문자열(opaque string)입니다. 그 말은, 웹 작성자가 `id` 특성을 통해 사람이 읽을 수 있는 정보를 나타내서는 안된다는 것입니다. (코드 가독성 차원에서는 유용할 수 있습니다. `ticket-18569`와 `r45tgfe-freds&$@`을 비교해보세요.)

`id` 특성의 값이 공백(스페이스나 탭 등)을 포함해서는 안됩니다. 공백으로 값을 구분하는 `class` 속성과 달리, 하나의 요소는 하나의 ID만 가질 수 있습니다. 만약 ID에 공백을 넣는다면, 브라우저는 그 공백마저 ID의 일부로 취급합니다.

**참고:** ASCII 문자, 숫자, `'_'`, `'-'` 및 `'.'`를 제외한 문자는 HTML 4에서 허용하지 않았으므로 호환성 문제가 발생할 수 있습니다. 이런 제한은 HTML 5에서는 해제되었으나, 호환성을 위해, ID는 위의 문자로 시작해야 합니다.

명세
--

| Specification |
| --- |
| HTML Standard # global-attributes:the-id-attribute-2 |

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

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

같이 보기
-----

* 모든 전역 특성.
* `id` 특성을 반영하는 `Element.id` 속성.
hidden
======

**`hidden`** 전역 특성은 해당 요소가 아직, 또는 더 이상 관련이 없음을 나타내는 불리언 특성입니다. 브라우저는 `hidden` 속성을 설정한 요소를 렌더링 하지 않습니다.

시도해보기
-----

하나의 표시 방식에서만 숨기려 할 땐 `hidden` 특성이 적합하지 않습니다. 임의의 요소에 `hidden`을 추가하면, 그 요소는 시각적 방식 외에도 스크린 리더 등 다른 모든 표시 방식에서 숨겨집니다.

숨겨지지 않은 요소에서 숨겨진 요소로 연결해서는 안됩니다. 또한, 숨겨진 요소의 자손 요소는 여전히 활성 상태이므로, `<script>` 요소를 실행할 수 있고 양식 요소도 제출할 수 있습니다. 그러나 스크립트와 요소는 다른 맥락에서 숨겨진 요소를 참조할 수 있습니다.

예를 들어, `hidden` 특성을 적용한 구획으로 링크하는 `href` 특성은 유효하지 않습니다. 콘텐츠가 사용할 수 없거나 더는 관련이 없으면 연결할 이유도 없기 때문입니다.

하지만, 숨겨진 설명문을 참조하기 위해 ARIA `aria-describedby` 특성을 사용하는 것은 괜찮습니다. 숨겨진 설명문 자체로는 쓸모가 없음을 나타내지만 특정 문맥, 즉 자신이 설명하는 요소에서 참조하는 경우 쓸모가 생깁니다.

위와 유사하게, `hidden` 특성을 적용한 `<canvas>` 요소는 스크립트로 작성한 그래픽 엔진에 의해 화면 외 버퍼로 쓰일 수 있고, 숨겨진 양식 요소도 `form` 특성을 통해 양식 컨트롤에서 참조할 수 있습니다.

**참고:** `hidden` 특성을 가진 요소의 CSS `display` (en-US) 속성 값을 변경하면 특성으로 인한 동작을 재정의합니다. 예컨대 `display: flex`를 지정한 요소는 `hidden` 특성이 존재하더라도 화면에 보이게 됩니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-hidden-attribute |

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

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

같이 보기
-----

* 모든 전역 속성.
itemid
======

**`itemid`** 전역 특성은 아이템의 고유한 전역 식별자의 형태로 마이크로데이터를 제공합니다. `itemid` 특성은 `itemscope`, `itemtype` 특성 모두 가진 요소에만 지정할 수 있습니다. 또한 `itemscope` 특성에 대응하는 `itemtype`이 전역 식별자 어휘를 참조하거나 정의해야 합니다.

`itemtype`의 전역 식별자에 대한 정확한 의미는 지정한 어휘 내에서의 해당 식별자 정의가 제공합니다. 어휘는 동일한 전역 식별자를 가지는 여러 아이템이 공존할 수 있는지, 공존한다면 동일한 식별자를 가진 아이템을 어떻게 처리할 것인지를 정의합니다.

**참고:** WHATWG 명세는 `itemid`가 반드시 URL이어야 한다고 되어 있습니다. 하지만, 다음 예제에서는 URN 역시 사용 가능하다는 것을 명확히 보여주고 있습니다. 이런 불일치는 마이크로데이터 명세의 불완전성을 반영한다고 볼 수 있습니다.

예제
--

### HTML


```html
<dl
 itemscope
 itemtype="http://vocab.example.net/book"
 itemid="urn:isbn:0-330-34032-8">
  <dt>Title</dt>
  <dd itemprop="title">The Reality Dysfunction</dd>
  <dt>Author</dt>
  <dd itemprop="author">Peter F. Hamilton</dd>
  <dt>Publication date</dt>
  <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time></dd>
</dl>
```

### 구조화된 데이터

|  |  |  |
| --- | --- | --- |
| itemscope | itemtype: itemid | http://vocab.example.net/book: urn:isbn:0-330-34032-8 |
| itemprop | title | The Reality Dysfunction |
| itemprop | author | Peter F. Hamilton |
| itemprop | pubdate | 1996-01-26 |

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # attr-itemid |

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

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

같이 보기
-----

* 모든 전역 특성.
* 마이크로데이터 관련 다른 전역 특성:
    + `itemprop`
    + `itemref`
    + `itemscope`
    + `itemtype`
dir
===

**`dir`** 전역 특성은 요소의 쓰기 방향을 나타내는 열거형 특성입니다.

시도해보기
-----

가능한 값은 다음과 같습니다.

* `ltr`은 왼쪽에서 오른쪽을 뜻하며, 좌횡서 언어인 한국어나 영어에 사용합니다.
* `rtl`은 오른쪽에서 왼쪽을 뜻하며, 우횡서 언어인 아랍어 등을 사용합니다.
* `auto`는 사용자 에이전트가 결정합니다. 사용자 에이전트는 기본적인 알고리즘을 사용해 요소 내부의 문자를 분석한 후, 명확한 방향성을 가진 문자가 존재하는 경우 전체 요소에 해당 방향성을 적용합니다.

**참고:** `dir` 특성은`<bdo>` 요소에 필수로 지정해야 하며, 다른 뜻을 가집니다.

* `<bdi>` (en-US) 요소는 `dir` 특성을 상속하지 않으며, 지정하지 않은 경우 `auto`를 기본값으로 사용합니다.
* `direction` (en-US)과 `unicode-bidi` (en-US)를 지원하며 CSS를 활성화한 경우, 특성 값은 무시하고 CSS 값을 대신 사용합니다.
* 글자의 쓰기 방향은 외형이 아니라 그 의미에 관여하므로, 웹 개발자로서 되도록 CSS 속성 대신 `dir` 특성을 사용하세요. 관련 속성을 지원하지 않거나, CSS를 비활성화한 브라우저에서도 텍스트가 올바른 방향으로 나타납니다.
* 데이터베이스에 저장된 사용자 입력 값처럼 방향성을 알 수 없는 데이터에는 `auto` 값을 사용해야 합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-dir-attribute |

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

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

같이 보기
-----

* 모든 전역 특성.
* 이 특성을 나타내는 `HTMLElement.dir` (en-US).
itemref
=======

**`itemref`** 전역 특성을 사용하면 `itemscope` 특성을 가진 요소 바깥의 속성도 아이템과 연결할 수 있습니다.

`itemref` 특성에는 문서 내 다른 요소의 `id` 목록(`itemid` 아님)을 제공해야 합니다.

`itemref` 특성은 `itemscope` 특성을 지정한 요소에만 추가할 수 있습니다.

**참고:**`itemref` 특성은 마이크로데이터 데이터 모델의 일부가 아니며, 트리 구조를 따르지 않는 데이터에 웹 작성자가 주석을 추가하는 것을 돕는 구문 구조에 불과합니다. 예를 들어, 표의 열이 별개의 아이템인데 데이터 속성은 열을 구성하는 칸에 포함하고 싶은 경우 사용할 수 있습니다.

예제
--

### HTML


```html
<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>
```

### 구조화 데이터

(JSON-LD 형식)


```json
{
  "@id": "amanda",
  "name": "Amanda",
  "band": {
    "@id": "b",
    "name": "Jazz Band",
    "size": 12
  }
}
```

### 결과

명세
--

| Specification |
| --- |
| HTML Standard # attr-itemref |

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

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

같이 보기
-----

* 다른 전역 특성.
* 마이크로데이터 관련 다른 전역 특성
    + `itemid`
    + `itemprop`
    + `itemscope`
    + `itemtype`
accesskey
=========

**`accesskey`** 전역 특성은 현재 요소에 대한 키보드 단축키를 생성할 때 사용할 힌트를 제공합니다. `accesskey` 속성의 값은 반드시 출력 가능한 단일 문자(키보드로 입력할 수 있는 글자)여야 합니다.

시도해보기
-----

**참고:** WHATWG 명세는 `accesskey`의 값에 공백으로 구분한 여러 개의 문자를 사용할 수 있고, 브라우저는 그 중 지원하는 첫 번째 문자를 사용한다고 되어 있습니다. 하지만 대부분의 브라우저는 이렇게 동작하지 않습니다. 단, 다른 명령과 충돌하지 않는 경우, IE/Edge에서는 지원되는 첫 번째 문자를 문제 없이 사용합니다.

단축키를 활성화하는 방법은 브라우저와 플랫폼에 따라 다를 수 있습니다.

|  | Windows | Linux | Mac |
| --- | --- | --- | --- |
| Firefox | `Alt` + `Shift` + `*key*` | 
 Firefox 57 이상에서는 `Control` + `Option` +
 `*key*` 또는 `Control` + `Alt` +
 `*key*`Firefox 14 이상에서는 `Control` + `Alt` +
 `*key*`Firefox 13 이하에서는 `Control` +
 `*key*` |
| Internet Explorer | `Alt` + `*key*``Alt` + `Shift` + `*key*` | 없음 |
| Edge | 없음 | `Control` + `Option` + `*key*``Control` + `Option` + `Shift` +
 `*key*` |
| Google Chrome | `Alt` + `Shift` + `*key*` |
| Safari | 없음 |
| Opera 15+ | `Alt` + `*key*` | `Control` + `Alt` + `*key*` |
| Opera 12 | `Shift` + `Esc`를 통해 접근 가능한 단축키 목록을 열고,
 그 중에서 `key`를 눌러 선택합니다.
  |

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

`accesskey` 특성은 빈약한 브라우저 지원을 포함해, 사용하기 전 고려해야 할 수많은 사항이 있습니다.

* `accesskey` 값은 시스템이나 브라우저 키보드 단축키 또는 보조 기술 기능과 충돌할 수 있습니다. 운영 체제, 보조 기술, 브라우저의 어떤 조합에서 동작하는 키가 다른 조합에서는 동작하지 않을 수 있습니다.
* 특정 `accesskey` 값은 특정 키보드에 존재하지 않을 수 있으며, 국제화가 중요한 경우 많은 키보드 종류로 인해 문제가 될 가능성이 커집니다. 따라서 특정 언어에 맞추는 것은 미래의 문제를 유발할 수 있습니다.
* 숫자에 의존하는 `accesskey` 값은, 해당 숫자와 그 동작에 연관성이 없는 경우 인지력 문제를 겪고 있는 사용자에게 혼란스러울 수 있습니다.
* 사용자에게 `accesskey`가 존재한다고 알리세요. 시스템에 해당 기능을 알리는 기능이 없다면, 사용자가 실수로 `accesskey`를 사용할수도 있습니다.

이러한 문제로 인해, 일반적인 목적을 갖는 웹 사이트와 웹 앱에서는 `accesskey`를 사용하지 않는 것을 권장합니다.

* WebAIM: Keyboard Accessibility - Accesskey
명세
--

| Specification |
| --- |
| HTML Standard # the-accesskey-attribute |

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

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

함께 보기
-----

* `Element.accessKey`
* `HTMLElement.accessKeyLabel`
* 모든 전역 특성.
* `aria-keyshortcuts`
class
=====

**`class`** 전역 특성은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않습니다. 클래스는 CSS나 JavaScript에서 클래스 선택자나 DOM 메서드의 `document.getElementsByClassName()` (en-US)과 같은 메서드를 통해 요소에 접근할 수 있는 방법입니다.

시도해보기
-----

명세서가 클래스의 명칭에 대한 요구사항을 제시하지는 않았지만, 웹 개발자는 해당 요소의 표시 방식보다는 요소의 의미와 목적을 설명하는 명칭을 사용하는 것이 좋습니다. 예를 들어, 클래스 특성을 가진 어떤 요소가 기울임꼴로 나타난다 하더라도, 클래스 이름은 "기울임꼴"을 설명하는 것이 아니라 요소를 설명하는 것입니다. 의미를 가진 이름은 해당 페이지의 표현 방식이 바뀌더라도 논리성을 잃지 않습니다.

명세
--

| Specification |
| --- |
| HTML Standard # global-attributes:classes-2 |

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

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

같이 보기
-----

* 모든 전역 특성.
* `element.className`
* `element.classList`
tabindex
========

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

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

* Learn more
* See full compatibility
* Report feedback
**`tabindex`** 전역 특성은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 `Tab` 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정합니다.

시도해보기
-----

값으로는 정수를 지정할 수 있으며, 수에 따라 결과가 달라집니다.

* **음의 정숫값**(보통 `tabindex="-1"`)은 연속 키보드 탐색으로 접근할 수는 없으나 JavaScript나 시각적(마우스 클릭)으로는 포커스 가능함을 뜻합니다. 보통 JavaScript를 사용한 위젯의 접근성 확보를 위해 사용합니다.

**참고:** 음의 값은 특정 이벤트에만 나타나는 요소에 유용합니다. 사용자는 키보드를 계속 눌러도 접근할 수 없으나, 스크립트에서는 `focus()` (en-US) 메서드를 호출해 포커스를 부여할 수 있기 때문입니다.
* 대화형 콘텐츠는 `tabindex="0"`이 기본값이고, 비 대화형 콘텐츠는 `tabindex="-1"`이 기본값입니다. 연속 키보드 탐색으로 요소에 접근할 수 있으며 문서 소스 코드의 순서에 따른다는 것을 나타냅니다. 양의 정숫값을 가진 요소가 존재할 경우 순서는 그 이후가 됩니다.
* **양의 정숫값**은 요소를 연속 키보드 탐색으로 접근할 수 있으며, 그 순서는 해당 값으로 지정하겠다는 것을 뜻합니다. 즉, `tabindex="4"`인 요소는 `tabindex="5"`와 `tabindex="0"`인 요소 이전에, 그러나 `tabindex="3"`인 요소 이후에 접근할 수 있습니다. 다수의 요소가 하나의 값을 공유할 경우 그 안에서 문서 소스 코드의 순서를 따릅니다. 최댓값은 `32767`입니다.

**경고:** 0보다 큰 `tabindex` 값을 피하세요. 접근성 보조기술 사용자의 페이지 탐색과 조작에 방해될 수 있습니다. 대신, 문서의 요소 순서를 논리적인 순서대로 배치하세요.

`<div>` (en-US)에 `tabindex`를 설정할 경우, 콘텐츠에도 `tabindex`를 지정하지 않는 한 화살표 키로 스크롤 할 수 없습니다. fiddle을 방문해 tabindex가 스크롤에 주는 영향을 확인하세요.

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

키보드 입력을 통해 포커스 가능한 상호작용 항목을 만들기 위해 비 대화형 콘텐츠에 `tabindex`를 추가하는 것을 피하세요. 이를테면 버튼을 나타내기 위해 `<button>` 대신 `<div>` (en-US)를 사용하는 것을 말합니다.

비 대화형 요소를 사용해 만든 대화형 컴포넌트는 접근성 트리에 나타나지 않으므로, 보조 기술이 해당 컴포넌트로 탐색하거나 조작하는 것을 방지합니다. 상호작용 가능한 항목은 대화형 요소(`<a>`, `<button>`, `<details>` (en-US), `<input>` (en-US), `<select>` (en-US), `<textarea>` (en-US) 등)를 사용해 적절한 의미와 함께 나타내야 합니다. 대화형 콘텐츠 요소는 보통 ARIA가 관리하는, 접근성 기술에 알려줄 수 있는 자신의 역할과 상태를 내장하고 있습니다.

* Using the tabindex attribute | The Paciello Group
명세
--

| Specification |
| --- |
| HTML Standard # attr-tabindex |

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

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

같이 보기
-----

* 모든 전역 특성
* 이 속성을 나타내는 `HTMLElement.tabIndex` (en-US)
style
=====

**`style`** 전역 특성은 요소에 적용할 CSS 스타일 선언을 담습니다. 스타일은 별도의 파일에 정의하는 것이 권장된다는 점을 참고하세요. 이 특성과 `<style>` 요소는 주로 테스트 등 빠른 스타일링을 위한 목적으로 사용됩니다.

시도해보기
-----

**참고:** `style` 특성에 의미를 담으면 안됩니다. 페이지의 모든 스타일을 제거하더라도, 그 의미는 옳게 남아있어야 합니다. 보통 `style`을 사용해 불필요한 정보를 숨기기보단 `hidden` 특성을 사용해야 합니다.

명세
--

| Specification |
| --- |
| HTML Standard # the-style-attribute |

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

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

같이 보기
-----

* 모든 전역 특성.
part
====

**`part`** 전역 특성은 요소의 파트 이름을 공백으로 구분한 목록을 지정합니다. CSS에서는 `::part` (en-US) 의사 요소를 사용해, 섀도 트리 내의 특정 요소에 스타일을 적용할 수 있습니다.

섀도 파트 예제에서 사용 예를 살펴보세요.

명세
--

| Specification |
| --- |
| CSS Shadow Parts # part-attr |

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

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

같이 보기
-----

* 모든 전역 특성.
slot
====

**`slot`** 전역 특성은 요소에 섀도우 DOM 섀도우 트리를 할당합니다. `slot` 특성을 지정한 요소는 `name` 특성의 값이 요소의 `slot` 값과 일치하는 `<slot>` 요소에 할당됩니다.

예제는 템플릿과 슬롯 사용하기 (en-US) 안내서에서 확인할 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-slot |
| DOM Standard # ref-for-dom-element-slot① |

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

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

같이 보기
-----

* 모든 전역 특성.
translate
=========

**`translate`** 전역 특성은 페이지를 지역화할 때 요소의 `Text` 노드 자식 및 번역 가능한 특성의 값을 번역해야 되는지, 아니면 그대로 유지해야 하는지 나타내는 열거형 속성입니다. 가능한 값은 다음과 같습니다.

* 빈 문자열 또는 `"yes"`는 페이지 지역화 과정에서 요소를 번역해야 함을 나타냅니다.
* `"no"`는 요소의 내용을 그대로 유지해야 함을 나타냅니다.

비록 모든 브라우저가 `translate` 특성을 인식하는건 아니지만, Google 번역 등의 자동 번역 시스템과 번역가가 사용하는 도구가 값을 존중할 수 있습니다. 그러므로 웹 작성자로서 번역되어선 안될 요소를 표시하는 것이 중요합니다.

예제
--

다음 예제에서의 `translate` 특성은 푸터에 배치한 회사의 브랜드 이름을 번역하지 말 것을 요청합니다.


```html
<footer>
  <small>© 2020 <span translate="no">BrandName</span></small>
</footer>
```

명세
--

| Specification |
| --- |
| HTML Standard # attr-translate |

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

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

같이 보기
-----

* 모든 전역 특성.
* 이 특성을 반영하는 `HTMLElement.translate` (en-US) 속성.
* HTML의 translate 특성 사용하기
contextmenu
===========

**경고:** contextmenu 특성은 폐기되었으며, 모든 브라우저에서 제거될 것입니다.

**`contextmenu`** 전역 특성은 이 요소의 컨텍스트 메뉴로 사용될 `<menu>` (en-US)의 `id`입니다.

컨텍스트 메뉴는 마우스의 우클릭(right-click)과 같은 사용자 상호작용 중에 나타나는 메뉴를 말합니다. HTML5에서는 이 메뉴를 커스터마이징할 수 있습니다. 다음은 계층 메뉴(nested menu)를 포함한 구현 예제입니다.

Example
-------

### HTML


```html
<body contextmenu="share">
  <menu type="context" id="share">
    <menu label="share">
      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
    </menu>
  </menu>
  <ol>
    <li>
      Anywhere in the example you can share the page on Twitter and Facebook
      using the Share menu from your context menu.
    </li>
    <li contextmenu="changeFont" id="fontSizing">
      On this specific list element, you can change the size of the text by
      using the "Increase/Decrease font" actions from your context menu
    </li>
    <menu type="context" id="changeFont">
      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
    </menu>
    <li contextmenu="ChangeImage" id="changeImage">
      On the image below, you can fire the "Change Image" action in your Context
      Menu.<br />
      <img
 src="https://developer.mozilla.org/media/img/promote/promobutton\_mdn5.png"
 contextmenu="ChangeImage"
 id="promoButton" />
      <menu type="context" id="ChangeImage">
        <menuitem label="Change Image" onclick="changeImage()"></menuitem>
      </menu>
    </li>
  </ol>
</body>
```

### JavaScript


```js
function shareViaTwitter() {
  window.open(
    "https://twitter.com/intent/tweet?text=" +
      "Hurray! I am learning ContextMenu from MDN via Mozilla",
  );
}

function shareViaFacebook() {
  window.open(
    "https://facebook.com/sharer/sharer.php?u=" +
      "https://developer.mozilla.org/en/HTML/Element/Using\_HTML\_context\_menus",
  );
}

function incFont() {
  document.getElementById("fontSizing").style.fontSize = "larger";
}

function decFont() {
  document.getElementById("fontSizing").style.fontSize = "smaller";
}

function changeImage() {
  var index = Math.ceil(Math.random() \* 39 + 1);
  document.images[0].src =
    "https://developer.mozilla.org/media/img/promote/promobutton\_mdn" +
    index +
    ".png";
}
```

### Result

명세서
---

#### No specification found

No specification data found for `html.global_attributes.contextmenu`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

See also
--------

* All global attributes
* `HTMLElement.contextMenu`
contenteditable
===============

**`contenteditable`** 전역 특성은 사용자가 요소를 편집할 수 있는지 나타내는 열거형 특성입니다.

시도해보기
-----

가능한 값은 다음과 같습니다.

* `true` 또는 빈 문자열은 요소가 편집 가능함을 나타냅니다.
* `false`는 요소가 편집 불가능함을 나타냅니다.

값 없이, `<label contenteditable>예제</label>`처럼 사용할 경우 빈 문자열 값으로 간주합니다.

특성이 없거나, 값이 유효하지 않은 경우 부모 요소로부터 상속합니다. 즉, 부모 요소를 편집 가능한 경우 자신도 편집 가능합니다.

가능한 값에 `true`와 `false`가 있긴 하지만, `contenteditable` 특성은 불리언 특성이 아닌 열거형 특성입니다.

텍스트 삽입 시 표시되는 커서의 색은 CSS `caret-color` (en-US) 특성으로 바꿀 수 있습니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-contenteditable |

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

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

같이 보기
-----

* 모든 전역 특성.
* `HTMLElement.contentEditable`, `HTMLElement.isContentEditable` (en-US)
lang
====

**`lang`** 전역 특성은 요소 내의 수정 불가한 텍스트의 언어와, 수정 가능한 텍스트가 사용해야 하는 언어를 정의합니다. 특성의 값은 Tags for Identifying Languages (BCP47)에 정의된 형식의 "언어 태그" 한 개입니다.

**참고:** `lang`의 기본값은 "알 수 없음"이므로 항상 적절한 값을 지정하는 것이 좋습니다.

시도해보기
-----

특성의 값이 빈 문자열(`lang=""`)일 때의 값은 "알 수 없음"(unknown)이며, 지정한 값이 BCP47의 유효한 값이 아닌 경우 "유효하지 않음"(invalid)입니다.

**참고:** ## 언어 태그 구문BCP47의 전체 구문은 매우 상세하여 어떤 언어의 세세한 방언을 나타낼 수도 있지만, 대부분의 사용법은 훨씬 단순합니다.언어 태그는 붙임표로 구분하는 "언어 하위태그"로 구성하며, 각각의 하위태그가 언어의 특정 속성을 나타냅니다. 가장 흔히 쓰이는 세 개의 하위 태그는 다음과 같습니다.- 언어 하위태그 - : 필수. 두 세 글자로 구성된 코드로 기본 언어를 정의하며, 보통 모두 소문자로 표기합니다. 예를 들어 영어의 언어 태그는 `en`이고, 한국어의 언어 태그는 `ko`입니다.

활자 하위태그

선택사항. 언어의 문자 체계를 나타내며 항상 네 글자이고, 첫 글자는 대문자입니다. 예를 들어, 점자로 쓴 프랑스어는 `fr-Brai`이고, 일본어 가타카나는 `ja-Kana`입니다. 라틴 알파벳으로 작성한 영어와 같이 굉장히 흔히 쓰이는 체계의 경우 활자 하위태그를 지정할 필요가 없습니다.

지역 하위태그

선택사항. 기본 언어 안에서 특정 지역의 방언을 정의하며, 국가 코드와 일치하는 전체 대문자의 두 글자이거나, 국가 외 지역과 일치하는 세 글자 숫자로 구성됩니다. `es-ES`는 스페인에서 사용하는 스페인어, `es-013`은 중앙 아메리카에서 사용하는 스페인어이며 "국제 스페인어"는 짧게 `es`가 됩니다.활자와 지역 하위태그가 모두 존재할 경우 활자 태그가 더 앞에 배치됩니다. 예를 들어, `ru-Cyrl-BY`는 키릴 문자로 작성한 벨라루스의 러시아어입니다.언어에 적합한 하위태그를 찾아보시려면 Language Subtag Lookup을 사용해보세요.


CSS `:lang` (en-US) 의사 클래스에서는 유효하지 않은 언어의 이름 두 가지가 이 서로 다르다면 별도로 취급합니다. 예컨대, `:lang(es)` `lang="es-ES"`와 `lang="es-419"` 모두 선택하지만, `:lang(xyzzy)`는 `lang="xyzzy-Zorp!"`를 선택하지 못합니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-lang |

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

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

같이 보기
-----

* 모든 전역 특성.
* `Content-Language` HTTP 헤더
title
=====

**`title`** 전역 특성은 요소와 관련된 추가 정보를 제공하는 텍스트를 나타냅니다.

시도해보기
-----

다음과 같은 경우 많이 쓰입니다.

* 보조 기술을 위해 `<iframe>` (en-US) 요소에 이름 붙이기
* 진짜 `<label>`을 표시하지 못할 때에 대비해 `<input>` (en-US) 요소에 프로그래밍을 통한 레이블 추가하기
* `<table>` (en-US) 요소 컨트롤에 레이블 추가하기

`<link>`, `<abbr>`, `<input>` (en-US), `<menuitem>` (en-US) 요소의 `title` 특성은 추가적인 뜻을 가지고 있습니다..

여러 줄의 제목
--------

`title` 특성은 여러 줄을 가질 수 있으며, 모든 `U+000A LINE FEED` (`LF`) 문자가 줄을 바꿉니다. 즉, 다음의 경우 툴팁이 두 줄로 나타나므로 주의를 요해야 합니다.

### HTML


```html
<p>
  <code>title</code> 안에서 줄을 바꿀 땐 조심해야 합니다. 이
  <abbr
 title="This is a
multiline title"
 >예제</abbr
 >처럼요.
</p>
```

### 결과

특성 상속
-----

요소가 `title` 특성을 가지고 있지 않을 땐 부모 요소로부터 상속합니다. 부모 요소 또한 자신의 부모로부터 상속할 수 있습니다.

`title`에 빈 문자열을 지정한 경우 조상의 `title`이 더 이상 관련되지 않았으며 해당 요소에 툴팁을 표시하지 말아야 함을 나타냅니다.

### HTML


```html
<div title="CoolTip">
  <p>여기 어디에 마우스를 올리면 “CoolTip”이 나타납니다.</p>
  <p title="">하지만 여기에서는 나타나지 않죠.</p>
</div>
```

### 결과

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

`title` 특성은 다음과 같은 경우에 문제가 많습니다.

* 터치 전용 장치 사용자
* 키보드로 탐색하는 사용자
* 스크린 리더, 화면 돋보기 등 보조 기술로 탐색하는 사용자
* 섬세한 운동조절이 힘든 사용자
* 인지력 문제를 가진 사용자

일관적이지 못한 브라우저 지원 문제에 더불어, 브라우저가 렌더링 한 페이지를 보조 기술이 분석함으로써 문제가 심해집니다. 툴팁 효과가 필요한 경우, 위에 해당하는 사용자도 접근하기 좋은 다른 기법을 사용하는 것이 좋습니다.

* 3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents
* Using the HTML title attribute – updated | The Paciello Group
* Tooltips & Toggletips - Inclusive Components
* The Trials and Tribulations of the Title Attribute - 24 Accessibility
명세
--

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

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

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

같이 보기
-----

* All global attributes.
* `HTMLElement.title` (en-US) that reflects this attribute.
is
==

**`is`** 전역 특성은 표준 HTML 요소가 사용자 지정 요소처럼 행동하도록 지정합니다. 사용자 지정 요소 사용하기를 방문해 더 자세한 정보를 알아보세요.

이 특성은 주어진 사용자 지정 요소의 이름을 현재 문서에 성공적으로 정의 (en-US)했고, `is` 특성을 적용하려는 요소를 확장하는 경우에만 사용할 수 있습니다.

예제
--

다음 코드는 word-count-web-component 예제에서 발췌한 것입니다. (실제 동작 보기)


```js
// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Constructor contents ommitted for brevity
    ...

  }
}

// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });
```



```html
<p is="word-count"></p>
```

명세
--

| Specification |
| --- |
| HTML Standard # attr-is |

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

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

같이 보기
-----

* 모든 전역 특성.
autocapitalize
==============

**`autocapitalize`** 전역 특성은 사용자가 입력하거나 수정하는 텍스트를 자동으로 대문자로 바꾸는 방식을 제어하는 열거형 특성입니다. 가능한 값은 다음과 같습니다.

* `off` 또는 `none`: 대문자로 변환하지 않음 (모든 문자의 기본값 소문자)
* `on` 또는 `sentences`: 각 문장의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자
* `words`: 각 단어의 첫 번째 문자는 기본값 대문자, 다른 모든 문자는 기본값 소문자.
* `characters`: 모든 문자의 기본값 대문자

`autocapitalize` 특성은 물리적인 키보드에서 입력하는 경우 아무런 영향도 주지 않으며, 대신 음성 입력이나 모바일 장치의 가상 키보드 등, 문장 첫 글자를 자동으로 대문자로 변환해서 사용자를 돕곤 하는 방식에 영향을 줍니다. `autocapitalize` 특성을 사용하면 이런 동작을 HTML 작성자가 재정의할 수 있습니다.

`autocapitalize` 특성을 `type` (en-US) 특성의 값이 `url`, `email`, `password`인 `<input>` (en-US) 요소에 적용해도 자동 대문자 변환은 되지 않습니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-autocapitalize |

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

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

**`inputmode`** 전역 특성은 사용자가 요소나 요소의 콘텐츠를 편집할 때 입력할 수 있는 데이터 유형의 힌트를 제공하는 열거형 특성입니다. 가능한 값은 다음과 같습니다.

`none`

가상 키보드를 사용하지 않습니다. 페이지가 자체 키보드나 입력 컨트롤을 구현할 때 사용합니다.

`text` (기본값)

사용자의 현재 로케일에 맞는 표준 키보드를 제공합니다.

`decimal`

사용자의 로케일에 맞는 소숫점(보통

`,`

또는

`.`

)을 제공하는 숫자형 키보드를 제공합니다. 장치에 따라 음의 부호(

`-`

)는 제공할 수도, 제공하지 않을 수도 있습니다.

`numeric`

숫자형 키보드를 제공합니다. 소숫점은 없으며, 음의 부호는 제공할 수도, 제공하지 않을 수도 있습니다.

`tel`

전화번호 키보드를 제공합니다. 숫자 0~9, 별표(

`\*`

), 해시(샵,

`#`

) 키를 포함합니다. 일반적인 경우, 반드시 전화번호를 필요로 하는 입력 칸에는 `<input type="tel"> (en-US)`을 사용해야 합니다.

`search`

검색 입력 칸에 최적화한 가상 키보드를 제공합니다. 예를 들면, 엔터/제출 키가 "검색" 아이콘이나 레이블을 가질 수 있습니다. 일반적인 경우, 반드시 검색 질의를 필요로 하는 입력 칸에는 `<input type="search"> (en-US)`를 사용해야 합니다.

`email`

이메일 입력에 최적화한 가상 키보드를 제공합니다. 보통

`@`

키 등을 제공합니다. 일반적인 경우, 반드시 이메일을 필요로 하는 입력 칸에는 `<input type="email"> (en-US)`을 사용해야 합니다.

`url`

URL 입력에 최적화한 가상 키보드를 제공합니다. 보통

`/`

키를 누르기 편한 곳에 배치하며, 세션 히스토리 접근 기능 등을 추가하기도 합니다. 일반적인 경우, 반드시 URL을 필요로 하는 입력 칸에는 `inputmode` 대신 `<input type="url"> (en-US)`을 사용해야 합니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-inputmode |

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

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

같이 보기
-----

* 모든 전역 특성.
spellcheck
==========

**`spellcheck`** 전역 특성은 요소의 맞춤법 검사 여부를 지정하는 열거형 특성입니다.

시도해보기
-----

가능한 값은 다음과 같습니다.

* `true`는 가능한 경우 요소의 맞춤법을 검사해야 함을 나타냅니다.
* `false`는 요소의 맞춤법을 검사하지 않아야 함을 나타냅니다.

**참고:** `spellcheck` 특성은 불리언이 아니고 열거형 특성이므로 `true` 또는 `false`를 반드시 지정해야 합니다. 즉, `<textarea spellcheck></textarea>`처럼은 사용할 수 없으며, `<textarea spellcheck="true"></textarea>`와 같이 사용해야 합니다.

특성을 지정하지 않았을 때의 기본값은 브라우저 및 요소에 따라 다릅니다. 또한, `spellcheck` 특성은 상속 대상이므로, 부모 요소의 값에도 영향을 받습니다.

`spellcheck`는 권장사항에 불과하며, 브라우저가 맞춤법을 검사해야 할 의무는 없습니다. 보통 `spllcheck` 특성을 `true`로 지정하더라도, 요소를 편집할 수 없다면 맞춤법 검사를 하지 않습니다.

명세
--

| Specification |
| --- |
| HTML Standard # attr-spellcheck |

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

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

같이 보기
-----

* 모든 전역 특성.