[Dseok의 코딩스터디] html data- 속성 사용하기 | 정의, 사용법 및 실전 예제

📌 data- 속성이란?

data- 속성은 HTML 요소에 사용자 정의 데이터를 저장할 때 사용하는 속성입니다. 이 속성을 활용하면 HTML에 추가적인 정보를 포함하고, JavaScript를 통해 쉽게 접근하여 조작할 수 있습니다.

✅ 기본 문법

<div id="product" data-id="1234" data-category="electronics">제품</div>

• data-id="1234" → 사용자 정의 데이터 id
• data-category="electronics" → 사용자 정의 데이터 category

JavaScript에서 .dataset을 사용하면 이 데이터를 가져오거나 변경할 수 있습니다.

 

📌 data- 속성의 장점

✅ HTML 요소에 추가 데이터를 저장 가능 (별도 변수 없이 관리 가능)
✅ CSS, JavaScript와 쉽게 연동 가능
✅ 서버와의 데이터 연동에도 활용 가능 (AJAX, JSON)

 

📌 data- 속성 활용 예제

1️⃣ JavaScript로 data- 속성 값 가져오기

<div id="product" data-name="Laptop" data-price="1500">노트북</div>
<button id="showData">상품 정보 보기</button>

<script>
  document.getElementById("showData").addEventListener("click", function() {
      const product = document.getElementById("product");
      alert(`상품명: ${product.dataset.name}, 가격: ${product.dataset.price}원`);
  });
</script>

✅ 설명: 버튼 클릭 시 data-name과 data-price 값을 가져와 경고창으로 표시합니다.

 

2️⃣ JavaScript로 data- 속성 값 변경하기

<div id="user" data-role="guest">사용자</div>
<button id="changeRole">관리자로 변경</button>

<script>
  document.getElementById("changeRole").addEventListener("click", function() {
      const user = document.getElementById("user");
      user.dataset.role = "admin";
      alert(`사용자 역할이 ${user.dataset.role}로 변경되었습니다.`);
  });
</script>

✅ 설명: 버튼 클릭 시 data-role 값을 "admin"으로 변경합니다.

 

3️⃣ data- 속성을 활용한 동적 리스트

<ul id="productList">
    <li data-id="101" data-price="500">상품 A</li>
    <li data-id="102" data-price="700">상품 B</li>
    <li data-id="103" data-price="900">상품 C</li>
</ul>
<button id="showPrices">가격 출력</button>

<script>
  document.getElementById("showPrices").addEventListener("click", function() {
      document.querySelectorAll("#productList li").forEach(item => {
          console.log(`상품 ID: ${item.dataset.id}, 가격: ${item.dataset.price}`);
      });
  });
</script>

✅ 설명: 리스트(li) 요소의 data-id와 data-price 값을 가져와 콘솔에 출력합니다.

 

📌 data- 속성을 활용한 다양한 예제

4️⃣ 버튼 클릭 시 동작 변경

<button id="toggleButton" data-state="off">버튼 상태: OFF</button>

<script>
  document.getElementById("toggleButton").addEventListener("click", function() {
      this.dataset.state = this.dataset.state === "off" ? "on" : "off";
      this.textContent = `버튼 상태: ${this.dataset.state.toUpperCase()}`;
  });
</script>

✅ 설명: 버튼 클릭 시 data-state 값을 on/off로 변경하며, 버튼 텍스트도 함께 변경됩니다.

 

📌 data- 속성을 활용한 스타일 변경 (CSS 적용)

<div class="theme-box" data-theme="light">테마 박스</div>
<button id="toggleTheme">테마 변경</button>

<style>
  .theme-box[data-theme="light"] {
      background-color: white;
      color: black;
      padding: 20px;
      border: 1px solid black;
  }
  .theme-box[data-theme="dark"] {
      background-color: black;
      color: white;
      padding: 20px;
      border: 1px solid white;
  }
</style>

<script>
  document.getElementById("toggleTheme").addEventListener("click", function() {
      const box = document.querySelector(".theme-box");
      box.dataset.theme = box.dataset.theme === "light" ? "dark" : "light";
  });
</script>

✅ 설명: data-theme 값을 기반으로 테마를 변경하는 CSS 스타일을 적용합니다.

 

📌 data- 속성 활용 정리

1. HTML 요소에 사용자 정의 데이터를 저장할 수 있음.
2. JavaScript의 .dataset을 통해 값 가져오기 및 변경 가능.
3. CSS와 연동하여 동적 스타일 변경 가능.
4. 리스트, 버튼 상태, 테마 변경 등 다양한 곳에서 활용 가능.

🚀 이제 직접 data- 속성을 활용해 웹사이트의 동적인 기능을 구현해 보세요!