[HTML] data- 속성

취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다.

✅ data- 속성

data- 속성은 DOM에 데이터(추가 정보)를 저장할 수 있는 사용자 정의 데이터 속성이다.

HTMl5의 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 만들어졌다.

따라서 사용하고자 하는 용도에 적합한 속성이나 요소가 없을 때 사용한다.

data- 다음에 오는 값이 데이터가 되며 해당 웹 페이지가 독자적으로 사용하는 값이다.

 

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

 

✔️ CSS에서 접근

CSS에서 data- 속성 값에 접근하기 위해서는 속성 선택자를 사용한다.

 

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

 

✔️ JavaScript에서 접근

JavaScript에서 data- 속성 값에 접근하기 위해서는 getAttribute()를 사용할 수 있다.

 

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

 

 

하지만 요즘은 data- 속성을 사용하는 것을 권장하지 않는다.

그 이유는 사용자가 브라우저의 inspect 기능을 사용하여 데이터 속성을 쉽게 수정할 수 있다는 것이다.

데이터 모델은 JavaScript 자체에 더 잘 저장되며, 라이브러리나 프레임워크의 데이터 바인딩을 통해 DOM을 업데이트된 상태로 유지하는 것이 더 좋은 방법이다.

 

 

🔍 참조

데이터 속성 사용하기 https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

HTML5 Custom Data Attributes http://html5doctor.com/html5-custom-data-attributes/