data-* 속성은 Custom Data Attributes로써 사용자가 HTML에 정의한 데이터 속성을 의미한다. 이 데이터 속성을 정의하게 되면 자바스크립트의 DOM 혹은 css 의 attr()을 통해 접근할 수 있어 매우 유용하게 사용이 가능하다. 또한 data-* 속성은 화면에 따로 노출되지 않음으로 어떤 대상에 대한 추가속성을 element에 담아 보관할 수 있는 용도로 사용된다.

Javascript에서 접근하기

javascript에서 DOM 을 통해 data 속성에 접근할 수 있다.

var article = document.getElementById('electriccars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

접근은 물론, 해당 데이터를 변경해 줄 수도 있다.

article.dataset.columns = '5' // 5

CSS에서 접근하기

css에서 attr()를 통해 data속성에 접근할 수 있다.

article::before {
  content: attr(data-parent);
}

이와 같은 방식으로 간단한 툴팁 기능등을 구현할 수 있을 것 같다. 또한, 이 속성으로 css에 들어갈 옵션을 전달해 줄 수도 있을 것 같다.