This page was translated from English by the community.Learn more and join the MDN Web Docs community.
data-*
data-*전역 특성은사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로HTML과DOM 사이에서 교환할 수 있는 방법입니다.
시도해 보기
<h1>Secret agents</h1><ul> <li data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li> <li data-id="97865"> Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye". </li> <li data-id="45732"> James Bond, 007: The main man; shaken but not stirred. </li></ul>h1 { margin: 0;}ul { margin: 10px 0 0;}li { position: relative; width: 200px; padding-bottom: 10px;}li:after { content: "Data ID: " attr(data-id); position: absolute; top: -22px; left: 10px; background: black; color: white; padding: 2px; border: 1px solid #eee; opacity: 0; transition: 0.5s opacity;}li:hover:after { opacity: 1;}모든 사용자 지정 데이터는 해당 데이터를 지정한 요소의HTMLElement 인터페이스,dataset 속성을 통해 사용할 수 있습니다.data-*의*은XML 이름 생성 규칙을 따르는 모든 이름으로 대체할 수 있습니다.
- 대소문자 여부에 상관없이
xml로 시작하면 안 됩니다. - 세미콜론(
U+003A)을 포함해서는 안 됩니다. - 대문자를 포함해서는 안 됩니다.
HTMLElement.dataset은DOMStringMap이라는 점을 참고하세요. 사용할 땐, 예를 들어data-test-value라는 이름의 특성을 지정했다면, 모든 대시(U+002D)는 다음 문자를 대문자로 만들고 자신은 사라지므로HTMLElement.dataset.testValue로 접근할 수 있습니다.
용도
data-* 속성을 추가함으로써, 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다. 예컨대, 게임의 우주선 스프라이트는 단순한<img> 태그와class 특성, 그리고 여러data-* 특성으로 나타낼 수 있습니다.
html
<img src="shipX3.png" data-ship-id="324" data-weapons="laserI laserII" data-shields="72%" data-x="414354" data-y="85160" data-z="31940" />HTML 데이터 특성 사용법에 관한 보다 자세한 자습서는데이터 특성 사용하기를 확인하세요.
명세
| Specification |
|---|
| HTML # attr-data-* |
브라우저 호환성
같이 보기
- 모든전역 특성.
- 데이터 특성 값에 접근하고 수정할 수 있는
HTMLElement.dataset속성. - 데이터 특성 사용하기