html 데이터 속성 data-* 리마인드 하기, 사용하는 이유

 

data-* 속성은 사용자 지정 데이터 특성(custom data attributes)으로 특정 클래스를 생성해서 임의의 데이터를 자바스크립트로 HTML와 DOM사이에 교환할 수 있는 방법이다. 이는 html5에서 지원하는 기능이다. 표준 사용자 지정 데이터 속성이다.

 

data-* 를 사용하면 html에서 속성을 커스텀 해서 사용할 수 있다. 꼭 앞에 data-를 붙여줘야 한다.

 

그냥 클래스 붙혀서 사용할 수 도 있지 않을까?

클래스명을 사용해서 처리를 할 수도 있지만 data- 속성을 사용하는 이유는 다음과 같다.

1. data-* 를 사용하면 코드가 간결해지고 유지보수가 용이해진다. 자바스크립트를 통한 데이터 접근이 간단해진다.

2. 브라우저는 커스텀 데이터 같은 경우 속성에 관여하지 않아서 화면에 영향을 주지 않는다. 따라서 특정 데이터를 저장하고 싶은 경우 자유롭게 사용이 가능하다.

 

주로 어디에 사용되는가?

주로 자바스크립트와 css에서 동적인 기능을 추가하거나 스타일을 지정할 때 사용한다.

 

<ul>
    <li data-index="0" data-section="A">리스트 1</li>
    <li data-index="1" data-secret-msg="Hello Hello">리스트 2</li>
    <li data-index="2">리스트 3</li>
</ul>

 

CSS

li[data-index="0"]{
    color:red;
}

li[data-index="1"]{
    color:orange;
}

li[data-index="2"]{
    color:green;
}

li::before{
    content: attr(data-index);
}

 

Javascript

DOM 객체의 dataset 속성을 이용하여 속성값을 얻어 사용할 수 있다.

자바스크립트에서 사용할때는 data-는 삭제되고 뒤에 있는 속성 이름만 사용한다.

const boo = document.querySelectorAll('li');
console.log(li[0].dataset.section); //A

 

 

속성명이 길 경우 camelCase로 변환해서 작성해야 한다.

console.log(list[1].dataset.secretMsg) //Hello Hello

 

주의점 및 규칙

주의점 ) 접근 가능해야하는 중요한 내용은 담지 않는 것이 좋다. HTML에 데이터를 넣은 것은 누구에게나 보이고 수정할 수 있기 때문이다. JS 데이터 저장소에 저장하는 것 보다 읽기 성능이 떨어진다.

 

규칙 ) 세미콜론, 대문자 포함 X, 대소문자 여부와 상관없이 xml로 시작하면 안된다.