이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.
data-* 전역 속성은 전용 데이터 속성(custom data attributes)이라는 속성 클래스를 형성하여, 스크립트를 통해 HTML과 DOM 사이에 전용 정보를 교환할 수 있도록 합니다. 이러한 모든 전용 데이터는 HTMLElement 인터페이스를 통해 사용할 수 있는데, 해당 요소에 이 속성이 설정되어 있어야 합니다. HTMLElement.dataset 속성을 통해 이 데이터에 접근할 수 있습니다.
*는 XML 이름 생성 규칙(the production rule of xml names)을 따르는 아무 이름으로 대체될 수 있으며 그 이름은 다음 제한을 따라야 합니다:
- 그 이름은
xml로 시작할 수 없습니다. - 그 이름은 세미콜론(
U+003A)을 포함해서는 안됩니다. - 그 이름은
A부터Z까지의 대문자를 포함해서는 안됩니다.
HTMLElement.dataset 속성은 DOMStringMap으로 전용 데이터 속성 이름이 data-test-value일 경우 HTMLElement.dataset.testValue ( 또는 HTMLElement.dataset["testValue"] )로 접근할 수 있습니다(대쉬 (U+002D)는 바로 다음 문자가 대문자로 바뀌는 것으로 대체되며 이름 자체는 카멜케이스(camelcase) 형태로 변환됩니다).
용도
data-* 속성을 추가함으로써, 일반적인 HTML 요소 조차도 복잡하고 강력한 프로그램 객체(program-objects)로 바꿀 수 있습니다. 예를 들어, 어떤 게임에서 "sprite"라는 우주선은 class 속성과 여러 data-* 속성을 가지고 있는 단순한 <img> 요소로 나타낼 수 있습니다:
<img class="spaceship cruiserX3" src="shipX3.png" data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" data-x="414354" data-y="85160" data-z="31940" onclick="spaceships[this.dataset.shipId].blasted()"> </img>
HTML 데이터 속성 사용에 대한 자세한 자습서는 데이터 속성 사용하기(Using data attributes)를 참고하십시오.
Specifications
| Specification | Status | Comment |
|---|---|---|
| HTML Living Standard The definition of 'data-*' in that specification. |
Living Standard | No change from latest snapshot, HTML 5.1 |
| HTML 5.1 The definition of 'data-*' in that specification. |
Recommendation | Snapshot of HTML Living Standard, no change from HTML5 |
| HTML5 The definition of 'data-*' in that specification. |
Recommendation | Snapshot of HTML Living Standard, initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
| Basic support | Chrome Full support Yes | Edge Full support Yes | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
See also
- 모든 전용 속성.
HTMLElement.dataset속성을 통해 이 값에 접근하거나 수정할 수 있습니다.- 데이터 속성 사용하기(Using data attributes)