[HTML] 태그 데이터 속성 dataset 사용하기 (ft. JS/CSS 활용)

데이터 속성 사용하기

HTML 태그에는 표준으로 정의된 속성들이 존재하는데,

데이터 속성의 경우에는 사용자가 지정한 속성을 표준화된 방법으로 제공하기 위해 제안된 것이다.

 

예를 들자면 개발을 하다 보면 표준 속성이 아니라 사용자 마음대로 속성을 정의해서 사용할 수가 있었는데, 아무래도 표준이 없었기 때문에 아무렇게나 사용되던 사용자 정의 속성들을 표준화하여 data-* 형식의 속성으로 정의한 것이다.

 

HTML 문법

문법은 매우 간단하다. 어느 element나 "data-"로 시작하는 속성을 지정해서 사용할 수 있다.

<article
  id="blog"
  data-name="mine-it-record"
  data-columns="3"
  data-index-number="12314"
  data-new-title="dataSet"
></article>

Javascript 에서 접근하기

Javascript에서 접근하는 방법 또한 매우 간단하다. dom을 선택하고 dataset속성을 통해 읽을 수 있다.

let blog = document.getElementById('blog');

blog.dataset
// {name: 'mine-it-record', columns: '3', indexNumber: '12314', newTitle: 'dataSet'}
blog.dataset.indexNumber // '12314'
blog.dataset[columns] // '3'
blog.dataset.newTitle // 'dataSet'

해당 element의 data-로 시작되는 속성들은 DOMStringMap이라는 인터페이스로 관리하며 dataset이라는 속성으로 접근이 가능하다. (쉽게 말하면 객체 형식이라고 생각하면 될 것 같다.)

여기서 주의할 점은 속성에서 대시(-)로 표현된 것들은 camelCase로 변환되는 것에 주의하기만 하면 된다.

 

객체 형식이기 때문에 읽기, 쓰기 역시 가능하여 손쉽게 수정해서 사용할 수 있다.

CSS에서 접근하기

데이터 속성 역시 HTML 속성이기 때문에 CSS에서 당연히 접근 가능하다.

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

---

여기까지 데이터 속성에 대해 알아봤는데, 사용에 주의할 점은 IE 10 이하 버전은 dataset을 지원 안 한다는 점이다.

dataset으로 접근하기보다는 getAttribute()를 사용해서 접근해야 한다.

 

이런 것들만 주의해주면 사용하기 좋은 속성임에는 틀림없다고 생각된다.

---

참고: https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

참고: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

HTMLElement.dataset - Web APIs | MDN