[HTML] html 에서 데이터 data 속성 쉽게 사용하기

HTML에서 매우 유용하게 사용되는 data- 속성에 대해 알아보겠습니다. data- 속성은 커스텀 데이터를 HTML 요소에 저장하고, JavaScript로 이를 쉽게 접근할 수 있게 해줍니다. 이 기능을 활용하면 페이지에 추가적인 메타데이터를 담거나, 화면에 보이지 않는 정보를 요소에 연결할 수 있습니다.

1. data- 속성란?

data- 속성은 HTML5에서 도입된 속성으로, HTML 태그에 사용자 정의 데이터를 저장할 수 있습니다. data-로 시작하는 속성은 데이터 속성을 의미하며, 표준 HTML 속성 외의 추가 정보를 각 요소에 담고자 할 때 사용됩니다.

문법:

<element data-key="value"></element>

 

• data-: 속성의 접두사로, 사용자 정의 데이터를 명시.
• key: 저장할 데이터의 이름. 반드시 소문자 알파벳으로 시작해야 하며, 하이픈(-)을 포함할 수 있습니다.
• value: 데이터의 값. 이 값은 문자열로 저장됩니다.

2. data- 속성의 사용 예제

간단한 예제

<button id="myButton" data-user-id="1234" data-user-role="admin">Click Me</button>

 

위의 예제에서 button 태그는 data-user-id와 data-user-role이라는 두 개의 사용자 정의 데이터를 가지고 있습니다. 이 데이터는 JavaScript로 쉽게 접근할 수 있습니다.

3. data- 속성 접근 방법 (JavaScript)

HTML 요소에 저장된 data- 속성은 JavaScript에서 dataset 객체를 통해 접근할 수 있습니다. dataset은 해당 요소에 포함된 모든 data- 속성을 관리합니다.

예제: data- 속성 값 읽기

<button id="myButton" data-user-id="1234" data-user-role="admin">Click Me</button>

<script>
  const button = document.getElementById('myButton');
  
  // data-user-id와 data-user-role 값 가져오기
  const userId = button.dataset.userId;  // "1234"
  const userRole = button.dataset.userRole;  // "admin"
  
  console.log(`User ID: ${userId}`);
  console.log(`User Role: ${userRole}`);
</script>

 

위 코드에서 button.dataset.userId를 통해 data-user-id 속성의 값인 "1234"를 가져올 수 있습니다. dataset 객체는 data- 속성의 이름에서 하이픈을 제거하고, 카멜 케이스(camelCase) 형식으로 변환한 속성명을 통해 값을 가져옵니다.

예제: data- 속성 값 변경하기

<button id="myButton" data-user-id="1234" data-user-role="admin">Click Me</button>

<script>
  const button = document.getElementById('myButton');
  
  // data-user-id 값 변경하기
  button.dataset.userId = "5678";
  
  console.log(`Updated User ID: ${button.dataset.userId}`);  // "5678"
</script>

 

위 코드에서 dataset.userId에 새로운 값을 할당하여 data-user-id 속성을 업데이트할 수 있습니다.

4. data- 속성의 활용 사례

예제 1: 제품 목록에서 사용자 정의 데이터 사용

<ul>
  <li data-product-id="101" data-product-price="50.00">Product 1</li>
  <li data-product-id="102" data-product-price="75.00">Product 2</li>
  <li data-product-id="103" data-product-price="100.00">Product 3</li>
</ul>

<script>
  const products = document.querySelectorAll('li');

  products.forEach(product => {
    const productId = product.dataset.productId;
    const productPrice = product.dataset.productPrice;
    
    console.log(`Product ID: ${productId}, Price: $${productPrice}`);
  });
</script>

 

이 예제에서는 각 제품 항목에 data-product-id와 data-product-price 속성이 추가되어 있습니다. 이를 통해 각 제품의 ID와 가격 정보를 JavaScript로 처리할 수 있습니다.

예제 2: 이벤트에서 동적으로 데이터 처리

<button id="actionButton" data-action="submit" data-target="form1">Submit</button>

<script>
  const button = document.getElementById('actionButton');
  
  button.addEventListener('click', function() {
    const action = button.dataset.action;
    const target = button.dataset.target;
    
    console.log(`Action: ${action}, Target: ${target}`);
    
    if (action === 'submit') {
      // target에 맞는 폼을 제출하는 로직 작성
      console.log(`Submitting form: ${target}`);
    }
  });
</script>

 

여기서는 버튼에 저장된 data-action과 data-target 속성에 따라 버튼 클릭 시 동작을 다르게 처리할 수 있습니다.

5. data- 속성의 장점

1. HTML 구조를 유지: 페이지의 구조적인 요소와는 무관하게 데이터를 HTML 요소에 저장할 수 있어, HTML 구조를 유지하면서도 필요한 정보를 손쉽게 담을 수 있습니다.
2. JavaScript와의 간편한 통합: JavaScript에서 데이터를 쉽게 접근하고 조작할 수 있습니다.
3. 유연성: 여러 데이터 타입을 담을 수 있으며, 동적으로 값을 변경하거나 추가할 수 있습니다.

 

HTML의 data- 속성은 커스텀 데이터를 저장하고 이를 활용하여 동적인 웹 페이지를 만드는 데 매우 유용한 기능입니다. 페이지 구조에 영향을 주지 않고도 데이터를 요소에 저장할 수 있어, 특히 동적 인터랙션이 많은 웹 애플리케이션에서 자주 사용됩니다.