HTML5 data - Attributes

HTML5 data - Attributes

 

참고 사이트에서 HTML 5 data Attributes 에 대한 설명을 보면

HTML5 에서 새롭게 소개된 HTML5 data Attributes 는 사용자 데이터 속성입니다. 

태그내에 data- 로 시작하는 속성은 개인데이터로 규정한다는 내용입니다. 라고 적혀 있습니다.

예를 들어 아래 코드를 보면 data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon" 이라는 data- 속성이 있습니다. 이 data- 속성은 HTML 태그내에서 별다른 역할을 하지 않는 단순한 데이터들 입니다.

data-name="John Resig" 은 name="John Resig"="John Resig" 속성이며

data-city="Boston" 는 city="Boston" 이라는 뜻입니다.

 

1. <li class="user" data-name="John Resig" data-city="Boston"
2.     data-lang="js" data-food="Bacon">
3.   <b>John says:</b> <span>Hello, how are you?</span>
4. </li>

 

HTML5 이전에도 서버측에서 받아온 데이터를 활용하기 위해서 hidden 필드를 활용하던지 아니면 임의의 속성에 설정하여 저장하곤 하였습니다. HTML5에서는 data- 속성을 사용하도록 규정된것 같습니다. 

 

JQuery에서 활용하기

 

데이터를 가져오는 방법은 

$(".user").data("name") => John Resig 

데이터를 설정하는 방법은

$(".user").data("name", "John Resig");

 

기존의 JQuery의 css 나 attr 메소드와 사용방법은 유사하니 그리 어렵진 않습니다.

 

참고

http://ejohn.org/blog/html-5-data-attributes/