HTML 데이터 속성(data-)

데이터 속성은 사용자 정의 데이터를 HTML 요소에 저장하기 위해 사용되는 속성
선언 방법은 data-로 시작하는 속성을 HTML 태그에 추가하면 됨
ex - <div data-user-id='12345' data-role='admin'></div>와 같이 사용할 수 있음
여기서 data-user-id와 data-role이 데이터 속성에 해당함

자바스크립트를 통해 데이터 속성에 접근하려면 dataset 객체를 활용.
중요한 점은 HTML의 데이터 속성 이름이 JS의 camelCase 형식으로 매핑된다는 것
ex - data-user-id는 dataset.userId로, data-role은 dataset.role로 접근할 수 있음
앞선 예제에서 해당요소.dataset.userId를 호출하면 '12345'값이 반환됨

CSS에서도 데이터 속성을 활용할 수 있음
attr()함수나 속성 선택자를 통해 데이터 속성의 값을 기반으로 스타일 적용할 수 있음

article::before {
	content: attr(data-parent);
}

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

이러한 데이터 속성은 DOM 요소에 특정 데이터를 바인딩하고, JS 로직에서 해당 데이터를 활용하기 위해 사용
ex - 버튼 클릭 이벤트에서 특정 데이터를 전달하거나, 데이터를 기반으로 UI를 동적으로 변경해야 할 때 유용
이렇게 하면 HTML과 JS 간 데이터 상호작용을 간단히 구현 가능