February 12, 2025

HTML 데이터 속성(data-*)란?

답변 확인

HTML 데이터 속성(data-*)은 사용자 정의 데이터를 HTML 요소에 저장하는 기능을 제공
이를 통해 JavaScript와 CSS에서 요소에 추가적인 정보를 저장하고 활용할 수 있음

1. 데이터 속성`(data-*)` 속성의 기본 개념

data-* 속성은 커스텀 데이터를 HTML 요소에 추가하는 방법으로, 원하는 값을 저장할 수 있음

<div data-key="12345" data-category="electronics">
    상품 정보
</div>

✔️ data-user-id="12345", data-role="admin"
✔️ data- 접두어를 붙이면 커스텀 속성으로 인식됨
✔️ HTML 구조를 변경하지 않고 추가적인 정보를 저장할 때 유용함

2. JavaScript에서 `data-*` 속성 접근하기

dataset 객체를 사용하면 JavaScript에서 data-* 속성을 쉽게 가져올 수 있음

📌 데이터 속성 읽기

<button id="user-btn" data-user-id="101" data-role="editor">클릭</button>

const button = document.getElementById('user-btn');
 
console.log(button.dataset.userId); // "101"
console.log(button.dataset.role); // "editor"

✔️ HTML의 data-user-id="101" 속성은 JavaScript에서 dataset.userId로 접근 ✔️ data- 뒤의 속성은 camelCase로 변환됨 ✔️ data-user-id → dataset.userId, data-role → dataset.role

📌 데이터 속성 변경하기

JavaScript에서 dataset 속성을 수정하면, HTML 속성도 동적으로 업데이트됨

button.dataset.userId = '202';
console.log(button.dataset.userId); // "202"

✔️ button.dataset.userId = "202"; 을 통해 data-user-id 값 변경 ✔️ HTML을 직접 수정하지 않고도 데이터를 조작 가능

3. CSS에서 `data-*` 속성 활용

데이터 속성 값에 따라 특정 스타일을 적용할 수 있음

📌 속성 선택자로 스타일 적용

<button class="status" data-state="active">버튼</button>
<button class="status" data-state="inactive">버튼</button>

.status[data-state='active'] {
    background-color: green;
    color: white;
}
 
.status[data-state='inactive'] {
    background-color: gray;
    color: black;
}

✔️ [data-state="active"] 같은 속성 선택자를 활용하여 조건부 스타일 적용 가능

📌 attr() 함수 사용 (CSS에서 데이터 속성 값 활용)

attr() 함수를 사용하면 CSS에서 data-* 속성 값을 동적으로 표시할 수 있음

button::before {
    content: attr(data-state);
}

✔️ 버튼 위에 data-state 속성 값을 그대로 출력

4. 데이터 속성(data-*) 사용 사례

✅ 1) 버튼 클릭 시 특정 데이터 전달

<button id="cart" data-product-id="123">장바구니 추가</button>

document.getElementById('cart').addEventListener('click', function () {
    console.log(`상품 ID: ${this.dataset.productId}`);
});

➡️ 버튼 클릭 시 상품 ID를 콘솔에 출력.

✅ 2) UI를 동적으로 변경

<button id="toggle-btn" data-state="off">OFF</button>

const toggleBtn = document.getElementById('toggle-btn');
 
toggleBtn.addEventListener('click', () => {
    toggleBtn.dataset.state = toggleBtn.dataset.state === 'off' ? 'on' : 'off';
    toggleBtn.textContent = toggleBtn.dataset.state.toUpperCase();
});

➡️ 버튼 클릭 시 ON/OFF 상태 변경

✅ 3) CSS와 JavaScript를 조합한 UI 조작

data-* 속성을 활용하면 클래스를 추가하지 않고도 상태를 저장하고 변경 가능
JavaScript에서 값을 변경하면, CSS에서 해당 값을 기반으로 스타일을 자동 조정

결론

언제 데이터`data-*` 속성을 사용할까?

✔️ HTML 요소에 추가 정보를 저장할 때
✔️ JavaScript에서 UI 요소와 데이터를 쉽게 연결하고 조작할 때
✔️ CSS에서 특정 조건에 따라 스타일을 적용할 때
✔️ 클래스를 사용하기 어려운 경우 대체 방법으로 활용 📌 data-\*속성은 HTML, CSS, JavaScript 간 데이터를 효율적으로 주고받는 중요한 기능

참고 자료

[MDN] 데이터 속성 사용하기