HTML5 커스텀 데이터 속성(data-*) 만들기와 활용법

HTML5 커스텀 데이터 속성(data-*)이란?

HTML5에서 새롭게 도입된 주요 기능 중 하나가 바로 커스텀 데이터 속성(custom data attributes)입니다. 이 속성을 사용하면 표준 속성 외에 개발자가 직접 정의한 데이터를 HTML 요소에 저장할 수 있어, JavaScript나 CSS와 연동해 다양한 기능을 구현할 때 매우 유용합니다.

data-* 속성 작성 규칙

커스텀 데이터 속성은 반드시 data-로 시작해야 하며, 그 뒤에 붙는 이름은 프로젝트의 필요에 따라 자유롭게 정할 수 있습니다. 단, 이름에는 대문자와 공백을 사용할 수 없으므로 하이픈(-)으로 단어를 구분하는 것이 일반적입니다.

<div class="example" data-sports="cricket" data-level="complex">
    ...
</div>

위 코드는 data-sports와 data-level이라는 두 개의 커스텀 속성을 가진, 문법적으로 완전히 유효한 HTML5 마크업입니다. 이렇게 지정한 속성의 값은 표준 속성과 동일한 방식으로 JavaScript API나 CSS를 통해 자유롭게 읽고 활용할 수 있습니다.

JavaScript에서 값 가져오기

가장 간편한 방법은 dataset 프로퍼티를 사용하는 것입니다. data- 뒤의 이름이 camelCase 형태로 변환되어 접근됩니다.

const el = document.querySelector(".example");
console.log(el.dataset.sports); // "cricket"
console.log(el.dataset.level);  // "complex"

CSS에서 활용하기

속성 선택자(attribute selector)를 사용하면 특정 데이터 값을 가진 요소만 골라서 스타일링할 수 있습니다.

[data-level="complex"] {
    border: 2px solid tomato;
}

또한 attr() 함수를 이용하면 데이터 속성의 값을 화면에 출력하는 것도 가능합니다.

마무리

커스텀 데이터 속성은 DOM에 메타데이터를 부여하여 스크립트 로직을 깔끔하게 분리할 수 있게 해주는 강력한 도구입니다. 클래스 이름으로 상태를 표현하던 기존 방식보다 의미 전달이 명확하므로, 실무에서 적극적으로 활용해 보시기 바랍니다.