diff options
Diffstat (limited to 'files/ko/learn/html/howto/데이터_속성_사용하기/index.html')
| -rw-r--r-- | files/ko/learn/html/howto/데이터_속성_사용하기/index.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/files/ko/learn/html/howto/데이터_속성_사용하기/index.html b/files/ko/learn/html/howto/데이터_속성_사용하기/index.html new file mode 100644 index 0000000000..d4abd5da57 --- /dev/null +++ b/files/ko/learn/html/howto/데이터_속성_사용하기/index.html @@ -0,0 +1,82 @@ +--- +title: 데이터 속성 사용하기 +slug: Learn/HTML/Howto/데이터_속성_사용하기 +tags: + - HTML + - HTML5 + - 가이드 + - 예제 + - 웹 + - 전용 데이터 속성 +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +<div>{{LearnSidebar}}</div> + +<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-*</code> 속성</a>은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.</p> + +<h2 id="HTML_문법">HTML 문법</h2> + +<p>문법은 간단합니다. 어느 엘리멘트에나 <code>data-</code>로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 <code>data</code> 사용법이 있습니다:</p> + +<pre class="brush: html"><article + id="electriccars" + data-columns="3" + data-index-number="12314" + data-parent="cars"> +... +</article></pre> + +<h2 id="JavaScript_에서_접근하기">JavaScript 에서 접근하기</h2> + +<p><a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.: {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다.</p> + +<p><code>dataset</code> 객체를 통해 <code>data</code> 속성을 가져오기 위해서는 속성 이름의 <code>data-</code> 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) </p> + +<pre class="brush: js">var article = document.getElementById('electriccars'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "cars"</pre> + +<p>각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 <code>article.dataset.columns = 5</code>와 같이 설정하면 해당 속성을 <code>"5"</code>로 변경할 것입니다.</p> + +<h2 id="CSS_에서_접근하기">CSS 에서 접근하기</h2> + +<p>데이터 속성은 순 HTML 속성이기 때문에 <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">생성된 content</a> 를 사용하면 됩니다.:</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>CSS의 <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">속성 선택자</a>도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:</p> + +<pre class="brush: css">article[data-columns='3'] { + width: 400px; +} +article[data-columns='4'] { + width: 600px; +}</pre> + +<p><a href="http://jsbin.com/ujiday/2/edit">이 JSBin 예시</a>에서 이들이 함께 작동하는 것을 볼 수 있습니다. </p> + +<p>데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">이 screencast</a> 를 확인하세요. (<a href="http://jsbin.com/atawaz/3/edit">JSBin 예시</a>).</p> + +<p><span style="line-height: 16.7999992370605px;">데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.</span></p> + +<h2 id="문제점">문제점</h2> + +<p>보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.</p> + +<p>고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 <a href="http://caniuse.com/#feat=dataset"><code>dataset</code>을 지원하지 않습니다</a>. IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 <a href="http://jsperf.com/data-dataset">데이터 속성 읽기의 성능</a>은 저조합니다.</p> + +<p>하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.</p> + +<p>Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.</p> + +<h2 id="더_알아보기">더 알아보기</h2> + +<ul> + <li>This article is adapted from <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li> + <li>Custom attributes are also supported in SVG 2; see {{domxref("SVGElement.dataset")}} and {{SVGAttr("data-*")}} for more information.</li> + <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li> +</ul> |