커스텀 데이터 속성 (Custom Data Attribute)

글로벌 속성(Global attributes)

HTML 태그는 태그의 선언과 속성들로 구성됩니다.

기존의 HTML은 하나의 태그에 정해진 속성을 가집니다. ex) id, class, name, style, title ...

이러한 속성들은 모든 태그에 사용할 수 있습니다.

커스텀속성또한 글로벌속성이다.

커스텀 데이터 속성 특징

이름은 "data-" 로 시작해야된다.

개수의 제한이 없다. 원하는 만큼 추가해서 사용 할 수있다.

하지만 너무 남발하지 않는것이 좋다. 쓸데없이 속성을 추가하다 보면 보기만 복잡하고 가독성이 떨어진다.

특수문자는 피하는게 좋다. ex) >, =...

커스텀속성은 기본값이 ""(빈문자열)이다.

대소문자구분을 안한다. 다 소문자로 바뀐다 쓸데없이 섞어쓰면 헷갈린다.

jQuery를 이용해서 커스텀 속성에 접근하기

예시를 한번 만들어보자

HTML

<div data-boxwidth="50" 
     data-boxheight="50"
     data-bgColor="red"
     data-options='{"name":"Son"}'>
</div>

JS

var dtWidth = $("div").data("boxwidth");
var dtHeight = $("div").data("boxheight");
var dtBgcolor = $("div").data("bgcolor");
var dtName = $("div").data("options").name;
dtName = $("div").removeData("options");

$('div').css("width", dtWidth);
$("div").css("height", dtHeight);
$("div").css("background-color", dtBgcolor);
$("div").text(dtName);

data함수와 removeData함수를 이용하여 데이터를 넣고 뺄수 있다.

원래 Son이라는 글자가 나와야되지만 removeData로 지워줬기 때문에 글자가 초기화 되었다.