개요
HTML5의 data-* 속성은 마크업에 보이지 않는 커스텀 데이터를 담기 위한 전역 속성 UI와 스크립트 사이 값 전달, 기능 감지 플래그, 간단한 지역화 메타데이터 등에 유용 DOM에서는 element.dataset으로 접근해 읽기/쓰기 가능
핵심 개념
속성명 규칙: data- 접두사 + 소문자 케밥케이스 사용 접근 규칙: data-foo-bar → dataset.fooBar 로 매핑 값 타입: 문자열 저장, 필요 시 직접 직렬화/파싱 처리 필요 보안 유의: 민감정보나 토큰 저장 금지, 노출 전제 데이터만 저장 표준 속성과 역할 혼동 금지, 의미적 데이터는 적절한 속성이나 요소 사용 권장
예시
재생 길이를 마크업에 저장하고 스크립트에서 소비하는 패턴
<ol>
<li data-length="2m11s">Beyond The Sea</li>
...
</ol>지역화 메타데이터로 번역 대상 텍스트를 보조하고, 필요 시 번역 제외 영역 표시
<p>The third <span data-mytrans-de="Anspruch">claim</span> covers the case of <span
translate="no">HTML</span> markup.</p>기능 감지 후 루트에 플래그를 심어 CSS나 스크립트 분기에 활용
<script>
if ('PaymentRequest' in window) {
document.documentElement.dataset.hasPaymentRequest = '';
}
</script>사용 팁
dataset으로 읽기 예시: const label = el.dataset.mytransDe CSS 속성 선택자 결합 가능: [data-length] 또는 [data-variant=“dark”] 같이 조건 분기 네이밍 충돌 방지를 위해 팀 단위 접두사 운영 권장, 예: data-app-, data-ui-