Data Attribute

 Data Attribute

 href나 type과 같은 의미가 있는 속성은 아니지만, 해당 요소에 대하여 부가적인 정보를 추가하고 그 부가적인 정보를 통해 그 요소를 지정할 수 있어야 할 때 Data Attribute를 사용한다.

 

기본 사용법

 HTML

<div data-index="1" data-display-name="seung"></div>
<div data-index="2" data-display-name="jun"></div>
<span data-index="1" data-display-name="seung">abcdefu</span>

 추가하고자 하는 데이터 속성은 이처럼 단순히 data- 이후 원하는 데이터 이름을 정해주면 된다.  

 

 CSS

:root {
  --background-color: tomato;
  --margin-bottom: 50px;
}

div {
  width: 200px;
  height: 200px;
  background: var(--background-color);
  margin-bottom: var(--margin-bottom);
}

[data-display-name="seung"] {
  background-color: black;
}

span[data-display-name="seung"] {
  background-color: green;
}

 CSS에서는 위와 같이 []안에 원하는 데이터 속성을 작성하여 해당 요소를 선택할 수 있다.

 

 JavaScript

const seung = document.querySelector("div[data-display-name='seung'"); // 큰 따옴표로 DOM을 선택했다면 값인 seung은 작은 따옴표로 둘러쌓여야 한다.
console.log(seung.dataset); // 출력시 data-가 빠지고 index, displayName(camelCase로 변환됨)이 key값으로 들어간 것을 확인할 수 있다.
console.log(seung.dataset["index"]); // Braket Notation
console.log(seung.dataset.displayName); // Dot Notation

 

 

 dataset으로 해당 요소의 데이터 속성들을 출력해보면 data-가 빠지고 나머지 이름이 key값으로 변하여 객체로 저장된 것을 확인할 수 있다.

 

 이러한 데이터는 민감한 정보를 담고 있을 수 있기 때문에 검사(F12)를 했을 때 안 보이게 할 수도 있어야 한다.

 

 

 

 Data Attribute MDN : https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes