data-* 속성이란?

data-* 속성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법입니다.
속성의 시작은 반드시 data-로 시작하며, 하나의 태그에 사용할 수 있는 커스텀 데이터 속성의 개수의 제한은 없습니다. (원하는 만큼 커스텀 데이터 속성 추가가 가능합니다👍)

장점

1. 브라우저는 커스텀 데이터 데이터 속성에 관여하지 않기 때문에, 화면에는 아무런 영향을 주지 않습니다.
   그래서 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있습니다.
2. 자바스크립트와 CSS에서도 커스텀 데이터 속성의 정보를 사용할 수 있습니다.
3. data-*속성을 사용하면 코드가 간결해지며 유지보수가 용이해지고 자바스크립트를 통한 데이터 접근이 간단해집니다🥳

접근하기

다음과 같이 li태그에 data-index data-hidden-message data-font-weight 커스텀 속성을 적용해보겠습니다.

<ul>
  	<li data-index="0" data-section="A">item 1</li>
    <li data-index="1" data-font-color="orange">item 2</li>
    <li data-index="2" data-hidden-message="hello world">item 3</li>
</ul>

CSS

css 속성 선택자를 이용하여 스타일링을 할 수 있습니다.

li[data-index="0"]{
	color: red;
}

li[data-index="1"]{
	color: blue;
}

li[data-index="2"]{
	color: green;
}

Javascript

dataset

DOM 객체의 dataset 속성을 참조하여 속성값을 얻을 수 있습니다.
자바스크립트에서 접근할 때 속성 'data-'는 삭제되고 뒷부분만 속성의 이름으로 사용됩니다.

const list = document.querySelectorAll('li');

console.log(li[0].dataset.section); // A

이 때 속성명은 camelCase로 변환됩니다.

console.log(list[2].dataset.hiddenMessage) // hello world

DOM 데이터셋 속성은 별도의 dataset 맵으로 한꺼번에 저장되므로 dataset 맵 전체를 묶어서 출력할 수도 있습니다

console.log(list[2].dataset) // DOMStringMap {index: '2', hiddenMessage: 'hello world'}

물론 속성값 변경이나 추가도 가능합니다.

👇 속성값 변경 전 html

세번째 li태그의 data-hidden-message 값을 "hello world"에서 "Good bye"로 변경,
세번째 li태그에 data-text="sample"을 추가

list[2].dataset.hiddenMessage = "Good bye";
list[2].dataset.text = 'sample';

👇 속성값 변경 후 html

속성 선택자로 DOM 접근

for (let i = 0; i < list.length; i++) {
    list[i].style.color = document.querySelector('li[data-index="1"]').dataset.fontColor;
  // 두번째 li의 data-font-color의 속성값(orange)로 모든 li 폰트 색상 변경
}

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