[html] data-attributes 사용하기

data-attributes

• data-* 와 같이 생긴 html 속성은 표준, semantic HTML 요소에 추가적인 정보를 저장할 수있게 해준다.

예를들어 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;
}

요런식으로 사용하면 된다.