HTML data-* Attributes

11/27/2025
4 minutes to read

본 문서는 HTML5에서 제공하는 사용자 정의 데이터 속성(data-*)의 개념과 활용 방법을 정리한 기술 문서입니다. data-* 속성은 표준 HTML 속성 외에 추가적인 정보를 요소에 포함시키기 위한 구조적이고 안전한 방법을 제공합니다.

1. 개요

HTML의 data-* 속성은 특정 요소에 개발자가 원하는 임의의 데이터를 저장할 수 있도록 제공되는 사용자 정의 속성(Custom Data Attribute)입니다.
속성 이름은 반드시 data-로 시작하며, 뒤에 작성되는 키는 목적에 따라 자유롭게 설정할 수 있습니다.

예:

<div data-user-id="42" data-role="admin"></div>

2. 사용 목적

2.1 표준 속성 외의 데이터 저장

HTML 표준 속성에 포함되지 않는 데이터를 구조적으로 보관하기 위해 사용됩니다. 다음과 같은 정보 저장에 적합합니다.

사용자 ID
항목 식별자
UI 상태 정보
API 요청에 필요한 값
렌더링 옵션(애니메이션 속도, 테마 등)

2.2 JavaScript와의 데이터 연계

DOM 요소에 특정 데이터를 직접 저장해 두고 JavaScript에서 손쉽게 접근하거나 처리하기 위해 사용됩니다.

예:

<button data-item-id="59">Delete</button>

3. JavaScript에서의 접근

data-* 속성은 JavaScript에서 dataset 객체를 통해 접근할 수 있습니다.

예시 HTML:

<button id="btn" data-item-id="123" data-user-name="june"></button>

예시 JavaScript:

const btn = document.getElementById('btn');

btn.dataset.itemId;     // "123"
btn.dataset.userName;   // "june"

3.1 네이밍 규칙

하이픈(-)으로 연결된 속성 이름은 JavaScript에서 자동으로 camelCase 형태로 변환됩니다.

data-user-name → dataset.userName
data-api-token → dataset.apiToken

4. JavaScript에서 값 변경

JavaScript에서 dataset 값을 변경하면 HTML 속성에도 즉시 반영됩니다.

btn.dataset.itemId = "999";
btn.dataset.userName = "park";

5. CSS에서의 활용

CSS 선택자를 이용하여 data-* 속성을 기반으로 스타일을 적용할 수 있습니다.

div[data-state="active"] {
    background-color: yellow;
}

6. 활용 사례

활용 분야	설명
UI 상태 제어	토글 상태, 페이지 번호, 활성/비활성 여부 등을 관리합니다.
이벤트 처리	이벤트 발생 시 필요한 데이터를 버튼이나 요소에 저장합니다.
Ajax 요청	항목 ID, 요청 URL 등의 파라미터를 요소에 보관합니다.
렌더링 옵션	스크롤 속도, 컴포넌트 동작 모드 등의 값을 지정합니다.
초기 DOM 스캔	라이브러리 또는 프레임워크에서 DOM 기반 초기화 시 활용합니다.