1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
---
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"><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()">
</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>
|
