HTML 데이터 속성(data-*) 완벽 가이드 🚀 활용법부터 실전 예제까지!

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

HTML5에서 도입된 데이터 속성(data-*)은 HTML 요소에 사용자 정의 데이터를 저장할 수 있도록 하는 기능입니다. 이를 통해 추가적인 정보를 HTML 내부에 담고, JavaScript에서 이를 쉽게 가져와 활용할 수 있습니다.

✅ 예제: 특정 버튼에 data-id="1234" 값을 추가하면 JavaScript로 해당 값을 쉽게 읽어올 수 있음.

📌 기본 문법

<div data-key="1234" data-user="john_doe">Hello, User!</div>

 

이제 JavaScript를 사용해 데이터를 가져올 수 있습니다.

const div = document.querySelector("div");
console.log(div.dataset.key); // "1234"
console.log(div.dataset.user); // "john_doe"

 

✅ 결과: data-key와 data-user 값을 JavaScript에서 가져와 활용할 수 있음.

---

2. 데이터 속성을 사용하는 이유

✅ 1) JavaScript와 HTML의 데이터 연동

• HTML 요소에 추가적인 정보를 저장하고, JavaScript에서 활용 가능
• 예: 버튼 클릭 시 특정 ID 값을 가져오기

✅ 2) CSS에서 특정 조건을 스타일링할 때 활용

• 특정 상태의 요소에 스타일을 적용할 때 유용
• 예: data-theme="dark" 속성을 사용해 다크 모드 스타일 적용 가능

✅ 3) 불필요한 id, class 남발 방지

• id나 class를 남발하지 않아도 HTML 구조를 깔끔하게 유지 가능

---

3. data-* 속성 활용 예제

📌 1) 버튼 클릭 시 특정 데이터 가져오기

<button data-product-id="5678">상품 구매</button>

const button = document.querySelector("button");
button.addEventListener("click", () => {
  alert(`선택한 상품 ID: ${button.dataset.productId}`);
});

 

✅ 사용자가 버튼을 클릭하면 상품 ID가 표시됨.

---

📌 2) CSS에서 data-* 속성 활용하기

<div class="box" data-state="active">활성 상태</div>

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

 

✅ data-state="active"일 때 배경색을 초록색으로 변경할 수 있음.

---

📌 3) 여러 개의 data-* 속성 활용하기

<div class="user" data-id="1001" data-role="admin">관리자</div>

const userDiv = document.querySelector(".user");
console.log(`사용자 ID: ${userDiv.dataset.id}`);
console.log(`사용자 역할: ${userDiv.dataset.role}`);

 

✅ 사용자 ID와 역할을 쉽게 가져올 수 있음!

---

4. data-* 속성 사용 시 주의할 점

🚨 올바르게 사용하려면?

1. SEO 영향 없음 → 검색 엔진이 data-* 속성을 분석하지 않음.
2. 중요한 데이터 저장 금지 → 보안이 필요한 정보(비밀번호, API 키 등)는 저장하지 말 것.
3. 일관된 네이밍 사용 → data-user-name vs data-userName (일반적으로 kebab-case 사용 권장).

✅ Tip: 중요한 데이터는 서버 또는 localStorage에 저장하는 것이 더 안전함.

---

5. 언제 data-* 속성을 사용할까?

사용해야 할 때 ✅	사용하지 말아야 할 때 ❌
JavaScript에서 요소의 특정 데이터를 가져올 때	민감한 정보를 저장해야 할 때 (비밀번호, 토큰 등)
CSS에서 특정 요소를 스타일링할 때	대량의 데이터를 저장해야 할 때
id, class 없이 추가 데이터를 저장하고 싶을 때	복잡한 데이터 구조가 필요할 때

 

📌 결론: data-* 속성은 간편한 데이터 저장 및 JavaScript 활용에 유용하지만, 보안이 필요한 데이터는 저장하지 않는 것이 중요함. 🚀

---

6. 결론

HTML의 data-* 속성은 간단한 데이터를 저장하고 JavaScript 및 CSS에서 활용할 때 매우 유용한 기능입니다. 하지만 보안이 중요한 정보는 저장하지 않는 것이 좋으며, 복잡한 데이터는 JSON 파일이나 서버 데이터베이스에서 관리하는 것이 더 효율적입니다.

👉 이제 data-* 속성을 활용해 더 스마트한 웹 개발을 해보세요! 🚀

---