[Web] HTML5 Data Tag(Attribute) 에 대해 알아보자.

 

안녕하세요.

 

HTML5에서 사용할 수 있는 Data 태그에 대해 알아보겠습니다.

 

HTML5부터 DOM HTML 태그안에 데이터값을 삽입할 수 있게 되었습니다!

 

 

그전까지는 id값 또는 value값에 구분자로 구분해가며(ex. id_name_age) 이를 split해서 데이터를 사용하거나, <div style="display : none;"></div>안에 값넣어서 이 태그를 get해오는 방식을 사용했었는데요..

 

 

완전 신선했습니다!

 

 

바로 예시를 들어보겠습니다.

<div id="temp" data-name="메이쁘"></div>

라는 div 가 있다고 가정합시다. (data의 tag 값은 무조건 소문자여야 합니다. HTML 태그 방식 준수)

 

이를 <script>에서(또는 js파일에서) "메이쁘" 란 값을 어떻게 가져올까요?

 

 

바로,

 

/* javascript */
var temp = document.getElementById('temp');
var tempData = temp.dataset.name; // data 값 가져오기
temp.dataset.name = "메이쁘쁘"; // data 값 수정


/* Jquery */
var temp = $('#temp').data('name');	// data 값 가져오기
var tempData = $('#temp').data('name', '메이쁘쁘'); // data 값 수정

 

입니다.

 

javascript에서는 값을 넣고 가져오는 방식이고,

Jquery에서는

  -  get : $("#id").data("key");

  -  set : $("#id").data("key", "value");

 

 

 

추가로, Data의 key는 CamelCase를 따릅니다. 예를들어,

<div id="temp" data-name-and-age="메이쁘,secret"></div>

// jquery
var temp = $("#temp").data("nameAndAge");	// 메이쁘,secret
$("#temp").data("nameAndAge", "메이쁘,비밀");	// data set

처럼 data-name-and-age 는 NameAndAge로 가져올 수 있습니다.

 

 

 

이상입니다.

 

감사합니다!