data-*

data-* 전역 특성사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTMLDOM 사이에서 교환할 수 있는 방법입니다.

모든 사용자 지정 데이터는 해당 데이터를 지정한 요소의 HTMLElement 인터페이스, dataset 속성을 통해 사용할 수 있습니다. data-**XML 이름 생성 규칙을 따르는 모든 이름으로 대체할 수 있습니다.

  • 대소문자 여부에 상관없이 xml로 시작하면 안 됩니다.
  • 세미콜론(U+003A)을 포함해서는 안 됩니다.
  • 대문자를 포함해서는 안 됩니다.

HTMLElement.datasetDOMStringMap이라는 점을 참고하세요. 사용할 땐, 예를 들어 data-test-value라는 이름의 특성을 지정했다면, 모든 대시(U+002D)는 다음 문자를 대문자로 만들고 자신은 사라지므로 HTMLElement.dataset.testValue로 접근할 수 있습니다.

용도

data-* 속성을 추가함으로써, 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다. 예컨대, 게임의 우주선 스프라이트는 단순한 <img> 태그와 class 특성, 그리고 여러 data-* 특성으로 나타낼 수 있습니다.

<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()">

HTML 데이터 특성 사용법에 관한 보다 자세한 자습서는 데이터 특성 사용하기를 확인하세요.

명세

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.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
data-* attributesChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

같이 보기