[HTML5] data-*

HTML5에서는 Custom Data Attributes 라는 것으로 데이터 표현이 가능하게 되었다. 위의 코드를 다음과 같이 HTML5에서 data-*라는 속성을 이용해서 표현이 가능하다.

HTML5의 Custom Data Attributes 를 이용해서 마치 XML을 표현하듯 HTML 문서에 특정 엘리먼트의 설명을 구체적으로 할 수 있게 되었다. HTML의 의미있는 표현도 가능하고 이 의미로 만들어진 element에 identifier나 style class가 아닌 데이터의 표현과 관리가 가능해진 것이다.

 

Custom Data Attributes은 css query 나 Selectors를 이용해서 접근할 수 있다.

 

 

<ul id="myData">

    <li class="column" data-seq="1" datatype="">자동차</li>

    <li class="column" data-seq="2" datatype="">자전거</li>

    <li class="column" data-seq="3" datatype="">비행기</li>

</ul>

 

css Query

 

<style type="text/css">

    [data-seq="1"]{

        color:red;

    }

</style>

 

위 코드를 실행하면 자동차가 붉은색으로 표시된다.

 

 

Selectors

 

<script>

    var col = document.querySelectorAll('[data-seq="1"]');

    console.log(col[0].innerText);

</script>

 

브라우저 콘솔창에 자동차를 출력한다.

 

 

 

---

모던 웹 디자인을 위한 HTML5+CSS3 입문

저자

윤인성 지음

출판사

한빛미디어 | 2012-09-05 출간

카테고리

컴퓨터/IT

책소개

이 책이 제시하는 핵심 내용 웹 디자인을 처음 배우는 독자를 위...

---