커스텀 데이터 속성(data-*)

data-*속성은 HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었다.

data-*속성은 표준이 아닌 속성이나 추가적인 DOM 속성을 조작 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해준다.

data-*속성은 사용자가 직접 data- 로 시작하는 속성을 만들 수 있다.

data- 뒤에 원하는 이름을 지정하고 사용하면 된다.

안녕하세요.

data-*속성 하나로 javascript, css에서 모두 접근할 수 있다.

javascript에서 접근하기

.dataset 속성을 통해 data-*속성에 접근이 가능하다.

var greeting = document.getElementById('greeting'); 
article.dataset.id // "greeting"
article.dataset.lang // "ko"

각 속성은 문자열로 반환된다.

css에서 접근하기

data*속성은 HTML 속성이기 때문에 css에서도 접근이 가능하다.

article[data-id='greeting'] {
	color:red;
}