이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

data-* 전역 속성전용 데이터 속성(custom data attributes)이라는 속성 클래스를 형성하여, 스크립트를 통해 HTMLDOM 사이에 전용 정보를 교환할 수 있도록 합니다. 이러한 모든 전용 데이터는 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes

See also

문서 태그 및 공헌자

이 페이지의 공헌자: dolmoon
최종 변경자: dolmoon,