HTML - ['data-' 속성]

data-* 속성은 해당 DOM에 데이터를 저장할 수 있는 사용자 정의 데이터 속성이다. 

해당 웹 페이지가 독자적으로 사용하는 값이다. 해당 웹 페이지가 아닌 다른 소프트웨어에서 이러한 값을 사용한다면 목적에 부합하지 않는다.

 

보여야하고 접근가능해야하는 데이터는 이러한 데이터 타입으로 저장해서는 안된다. 접근 보조 기술이 없기 때문에 검색 크롤러도 해당 데이터를 크롤링 할 수 없다. 하지만 이때문에 커스텀요소와 관련된 메타데이터들에 대해서는 훌륭한 해결책이다.

 

HTML 문법

<div
    id='box'
    data-count='3'
    data-name='doodream'
    data-weather='rain'>
</div>

이렇게 데이터를 담아놓을수 있다. count='3', name='doodream', weather='rain' 이라는 데이터가 담겨져 있다.

 

JavaScript 에서 접근하기

let variable = document.getElementById('box');

// 담긴 값에 대해 접근하기
variable.dataset.count;
// 담긴 값을 변경하기
variable.dataset.count = 7;

getAttribute()로 해당 태그의 완전한 이름을 넣어 접근 할수 있으나 위와 같이 접근하는 것이 표준이다.

 

CSS에서 접근하기

div[data-count='4']{
	width: 400px;
}

div[data-count='5']{
	width: 500px;
}

css의 속성 선택자도 데이터의 정보에 따라 스타일을 바꾸는데 사용할 수 있다.

 

---

참고

 

developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

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