Data Attributes

HTML5는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었습니다.

추가적인 조작을 하지 않고도 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있습니다.

문법

간단하게 사용할 수 있습니다.

어느 엘리먼트에나 data- 로 시작하는 속성 무엇이든 사용할 수 있습니다.

화면에 보이지 않게 추가 정보를 엘리먼트에 담아 놓을 수도 있습니다.

HTML

<div
	id="test"
	data-colums="3"
	data-index="1">
	안녕하세요.
</div>

자바스크립트

자바스크립트에서 접근하는 방법도 간단합니다.

data 속성을 가져오기 위해서는 data-뒤에 붙인 이름을 사용하게 됩니다.

// dataset 객체에서 읽어올 수 있습니다.
const test = document.querySelector("#test");
console.log(test.dataset.columns); // 3
console.log(test.dataset.index); // 1

// 각 값은 변경될 수 있습니다.
test.dataset.index = 2;
console.log(test.dataset.index); 2;

CSS

HTML의 속성이기 때문에 CSS에서도 이에 접근할 수 있습니다.

/* 색상을 바꿀 수 있습니다. */

#test[data-columns="3"] {
	color: red;
}

/* 요소의 값을 보여줄 수 있습니다. */
#test::before {
	content: attr(data-contents);
}

ex) 이런 예시도 있어요 - https://jsbin.com/ujiday/2/edit?html,output

아쉬운점

구 버전 IE 등 일부 구 브라우저에서는 해당 기능을 지원하지 않습니다.

이럴 경우에는 getAttribute()를 통해 데이터 속성에 접근할 수 있습니다.

노출 되고 접근 가능하지 않기 때문에 크롤러가 해당 정보를 수집하지 못합니다.

JS의 그냥 객체에 정보를 저장하는 것 보다 성능이 저조할 수 있습니다.

(메타 데이터를 이용하는 데에는 도움이 될 수 있겠네요!)