---
title: data-*
slug: Web/HTML/Global_attributes/data-*
tags:
  - Global attributes
  - HTML
  - Reference
translation_of: Web/HTML/Global_attributes/data-*
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

<p><code><strong>data-*</strong></code> <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>은 <strong>사용자 지정 데이터 특성</strong>(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 <a href="/ko/docs/Web/HTML" title="en/HTML">HTML</a>과 <a href="/ko/docs/Web/API/Document_Object_Model" title="en/DOM">DOM</a> 사이에서 교환할 수 있는 방법입니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div>

<p>모든 사용자 지정 데이터는 해당 데이터를 지정한 요소의 {{domxref("HTMLElement")}} 인터페이스, {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 사용할 수 있습니다. <code>data-*</code>의 <code>*</code>은 <a href="https://www.w3.org/TR/REC-xml/#NT-Name">XML 이름 생성 규칙</a>을 따르는 모든 이름으로 대체할 수 있습니다.</p>

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

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

<h3 id="용도">용도</h3>

<p><code>data-*</code><strong> </strong>속성을 추가함으로써, 평범한 HTML 요소조차 복잡하고 강력한 프로그램 객체가 될 수 있습니다. 예컨대, 게임의 우주선 스프라이트는 단순한 {{htmlelement("img")}} 태그와 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class"><code>class</code></a> 특성, 그리고 여러 <code>data-*</code> 특성으로 나타낼 수 있습니다.</p>

<pre class="brush: html">&lt;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()"&gt;
</pre>

<p>HTML 데이터 특성 사용법에 관한 보다 자세한 자습서는 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">데이터 특성 사용하기</a>를 확인하세요.</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-data", "data-*")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "dom.html#element-attrdef-global-data", "data-*")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>

<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("html.global_attributes.data_attributes")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>모든 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>.</li>
 <li>데이터 특성 값에 접근하고 수정할 수 있는 {{domxref("HTMLElement.dataset")}} 속성.</li>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">데이터 특성 사용하기</a></li>
</ul>