data-* attribute

일반적으로 HTML tag에는

class나 id처럼 공통적으로 사용할 수 있는 속성(attribute)가 있다.

그리고 각 태그마다 반드시 사용해야하는 속성들도 있다.

예를 들어, a 태그는 당연히 href=""속성이 필요할테고

img 태그는 src 속성이 필요하다. (img 태그에는 alt 속성도 빠지지 않고 넣어주는 게 좋다고 생각한다!)

이렇게 각 태그마다 필요한 속성들, 넣어주면 visual representation에 영향을 주는 속성들이 많이 있다.

 

 

그런데, 이렇게 정해진 속성들 말고

내가 HTML 태그에 딱히 visual representation에는 큰 영향을 주지 않지만..

몇몇 정보를 추가적으로 저장해놓고 싶을 때!

 

data-* 속성을 사용하면 편리하다.

 

 

 

 

data 속성에 대한 간단한 설명 👇

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().

출처: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

 

쉽게 말하자면,

추가적인 정보를 HTML tag에 저장하고 싶을 때 사용하는 도구라고 생각하면 된다!

 

 

 

 

 

 

 

HTML Syntax

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

 

'data-' 뒤에 원하는 속성 이름을 넣어주면 된다.

대신 대문자가 들어가면 안되고, 두 단어 이상일 때는 dash(-)로 연결해주면 된다.

 

 

 

 

 

 

 

JavaScript Access

그렇다면 이 data 속성을 JS에서 어떻게 접근해서 사용할 수 있을까?

-> dataset object 이용!

 

const article = document.querySelector('#electric-cars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

 

해당 element를 querySelector를 통해 가져온 후

article.dataset.원하는속성이름으로 접근한다.

'원하는속성이름' 자리에는 'data-' 다음의 속성 이름만 넣어주면 된다.

여기서 주의할 점은 dash(-)로 연결됐던 이름은 camelCase로 바꿔줘야 한다는 것!

 

 

 

각 property는 string으로 읽기/쓰기 모두 가능

article.dataset.columns = 5

로 하면 data-columns 속성의 값이 5로 바뀐다.

 

 

 

 

 

또 다른 방식은 getAttribute 메소드를 사용하는 것.

getAttribute에는 'data-'까지 포함한 속성의 풀네임ㅎㅎ을 넣어줘야 한다.

article.getAttribute('data-columns')

 

 

✔ IE 10이나 그 이하 버전에서는 dataset object 말고 getAttribute() 사용해야 함.

 

 

 

 

 

 

 

CSS Access

-> attribute selector [ ] 사용

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

 

-> content 가져올 때, attr() 함수

article::before {
  content: attr(data-parent);
}

 

 

 

 

 

 

 

 

 

 

 

📑 참고 사이트

developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

Using data attributes - Learn web development | MDN