HTML의 data- 속성에 대하여

가끔씩 HTML 코드를 살펴보면 data- 라는 접두사가 붙은 수상한 속성들을 만날 수 있습니다.

id과 class는 뭔지 알겠는데 data-clk-prefix는 대체 무슨 속성일까요?

HTML 요소의 속성

모든 HTML 요소는 특정한 속성을 가질 수 있습니다.

예를 들어 <image> 태그는 이미지의 너비와 높이를 지정하는 width, height 라는 속성을 가질 수 있고, <input> 태그는 입력값의 타입을 정하는 type 이라는 속성을 가질 수 있습니다.

 

그렇다면 혹시 "author" 처럼 기존에 존재하지 않던 특성을 마음대로 사용할 수도 있을까요?

<article id = "article_002" author = "chanmin">나스닥 거품, 과연 꺼질 것인가</article>

<script>
  const article = document.querySelector("article[author]");
  article.style.color = "red"
</script>

나스닥... 올해도 믿는다!

물론 사용할 수는 있습니다.

다만 author 라는 속성은 사전에 약속된 속성이 아니라 우리가 임의로 명명한 속성이므로 사전에 약속된 속성들과 차이를 둬야 합니다.

그리고, 이렇게 사용자가 임의로 명명한 속성임을 표현하는 접두어가 바로 data- 인 것입니다.

// author 라는 이름 대신 data-author 라는 속성을 사용함으로써
// 이 속성이 커스텀 속성임을 알 수 있게 한다.
<article id = "article_002" data-author = "chanmin">나스닥 거품, 과연 꺼질 것인가</article>

<script>
  const article = document.querySelector("article[data-author]");
  article.style.color = "red"
</script>

이렇게 data- 속성에 할당한 값은 dataset 이라는 특별한 프로퍼티로 접근할 수 있습니다.

<article id = "article_002" data-author = "chanmin">나스닥 거품, 과연 꺼질 것인가</article>

<script>
  const article = document.querySelector("article[data-author]");
  console.log(article.dataset.author); // "chanmin"
</script>

dataset은 해당 HTML 요소에 사용된 data- 속성들의 이름을 프로퍼티로 갖는 객체입니다.

한 가지 특이한 점이라면 dataset 객체의 프로퍼티는 사용된 data- 속성의 이름을 카멜 케이스로 치환한 결과입니다.

<article
  id="article_002"
  data-author="chanmin"
  data-released-date="2021-02-13"
>
  나스닥 거품, 과연 꺼질 것인가
</article>

<script>
  const article = document.querySelector("article");
  console.log(article.dataset);
  // DOMStringMap {author: "chanmin", releasedDate: "2021-02-13"}
</script>

이렇게 released-date 처럼 임의의 이름을 지어도 dataset 객체 안에는 releasedDate 라는 이름으로 개명되어 사용되고 있네요 :)

이제 HTML 코드를 보다가 data- 라는 이상한 속성이 나와도 당황하지 않기로 해요!

TL;DR

- HTML 요소들은 저마다 고유한 속성을 가진다.

- 고유한 속성과 구별할 수 있도록 나만의 속성 이름에는 data- 라는 접두어를 붙인다. 

- 해당 data- 속성의 값은 dataset 이라는 프로퍼티를 통해 사용할 수 있다.