예를들어 div의 size정보를 저장한다고 하자.
<div id="item-card" data-size='small'></div>
자바스크립트와 css에서 data-* 값을 손쉽게 접근할 수 있는데,
1) javascript에서 data-size값에 접근하려면
const itemCardSize = document.querySelector('#item-card').dataset.size;
2) css에서 data-size에 대한 스타일을 지정해주려면
article[data-size='small'] {
width: 400px;
}
article[data-size='large'] {
width: 600px;
}
요런식으로 사용하면 된다.