HTML data 속성

data-* 속성은 HTML에서 정의된 표준 속성 이외의 HTML 표준 '사용자 지정 데이터 속성'입니다.
이 속성은 data- 접두사와 그 뒤에 원하는 이름을 지정하여 속성의 이름을 만들고, 사용자 지정 데이터를 속성의 값으로 지정합니다.

 

주로 자바스크립트와 CSS에서 이 속성을 활용하여 동적인 기능을 추가하거나 스타일을 지정하는데 사용됩니다.

 

data 속성은 페이지 또는 응용프로그램에 대한 사용자 지정 '데이터', '상태,' '주석' 등을 저장하기 위한 것으로,
더 이상 적절한 표준 속성이나 요소가 없을 때 사용하는 HTML의 표준화된 속성입니다.
이 속성은 글로벌 속성 중 하나로, 모든 요소에 적용이 가능합니다.

 

기본 예제

<!--  제품에 대한 정보를 저장하기 위해
      data-* 속성이 사용됩니다.
      각 속성은
      제품의 이름(data-name),
      가격(data-price),
      재고(data-stock),
      색상(data-color)을 나타냅니다.
-->
<div 
    id="product-12345"
    data-name="운동화"
    data-price="10000"
    data-stock="5"
    data-color="red">
    운동화
</div>

<!-- 버튼에는
     해당 제품의 ID를 나타내는
     data-product-id 속성이 있습니다.
-->
<button
    type="button"
    id="product-details"
    data-product-id="product-12345">
    제품 상세정보 보기
</button>

 

const viewDetails = document.getElementById("product-details");

viewDetails.addEventListener("click", function() {
    const productId = this.dataset.productId;
    const product = document.getElementById(productId);

    /* 제품 요소에서 데이터 속성을 사용하여
       제품 이름, 가격, 재고, 색상을 가져옵니다. */
    const productName = product.dataset.name;
    const price = product.dataset.price;
    const stock = product.dataset.stock;
    const color = product.dataset.color;
    
    /* 가져온 제품 정보를 문자열로 조합하여
       알림창으로 표시합니다. */
    const msg = "제품 이름: " + productName +
                "\n가격: " + price + "원" +
                "\n재고: " + stock + "개" + 
                "\n색상: " + color;          
    alert(msg);
});

 

사용 목적

data-* 속성은 표준이 아닌 의미론적으로 부합하지 않는 HTML 요소나 속성을 추가하거나 불필요하게 사용하지 않고, 표준화된 방법으로 사용자 지정 데이터를 HTML 요소의 속성에 추가할 수 있도록 고안되었습니다. 이 속성을 활용하면 개발자는 표준화된 방법으로 자신의 데이터를 쉽게 HTML 요소에 첨부할 수 있습니다.

 

CSS에서 활용하기

데이터 속성은 HTML 속성이기 때문에 CSS의 선택자로 접근할 수 있습니다.

<div 
    id="product-12345"
    data-name="운동화"
    data-price="10000"
    data-stock="5"
    data-color="red">
    운동화
</div>

 

[data-name] { /*  CSS의 선택자로 접근 */
    padding: 1em;
    background-color: yellowgreen;
}
[data-color="red"] { /*  CSS의 선택자로 접근 */
    color: red;
}

 

참고사이트

https://codingeverybody.kr/html-data-%ec%86%8d%ec%84%b1/

HTML data-* 속성 – 표준 사용자 지정 데이터 속성 - 코딩에브리바디

 

https://codingeverybody.jp/html-data-attributes/

HTML data-*属性：標準カスタムデータ属性 - codingEverybody

 

https://coding.courses/html-data-attributes/

HTML data-* Attributes – Standard Custom Data Attributes - codingCourses