🚀 Data-set Attribute in HTML

HTML is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. 링크 : MDN

HTML에서, 특정 요소와 관련 있는 데이터를 사용할 수 있다.
물론, 그 데이터는 꼭 그 어떤 의미를 가지고 있을 필요는 없다.

✅ 어떨 때, data-* 속성을 사용할까?

- HTML에는 표준 속성이 존재하지 않는 경우

예를 들어, 번역된 텍스트를 가지고 있는 요소가 있다고 가정해보자. 이 때, 표준 속성으로는 적절한 속성이 존재하지 않는다. 이럴 때, data-* 속성을 사용할 수 있다.

1
<p data-translate="main.title">Title</p>

이렇게 사용하면, 자바스크립트에서 해당 요소의 텍스트를 번역할 수 있다.

1
2
const p = document.querySelector('p');
const text = p.dataset.translate;

- 표준 속성이 존재하지만, 표준 속성으로는 충분하지 않은 경우

예를 들어, 번역 시, 언어 별로, 다른 CSS 스타일을 적용하고 싶다고 가정해보자. 이 때, 표준 속성으로는 충분하지 않다. 이럴 때, data-* 속성을 사용할 수 있다.

1
<p data-lang="en">Title</p>

이렇게 사용하면, 자바스크립트에서 해당 요소의 언어를 확인할 수 있다.

1
2
const p = document.querySelector('p');
const lang = p.dataset.lang;

그리고, 이를 통해, CSS에서 다른 스타일을 적용할 수 있다.

1
2
3
p[data-lang="en"] {
    font-style: italic bold;
}

- 표준 속성이 존재하지만, 표준 속성으로는 부적절한 경우

예를 들어, 특정 요소의 텍스트를 표시할 때, 특정 문자열을 강조하고 싶다고 가정해보자. 이 때, 표준 속성으로는 부적절하다. 이럴 때, data-* 속성을 사용할 수 있다.

1
<p data-highlight="important">Title</p>

이렇게 사용하면, 자바스크립트에서 해당 요소의 텍스트를 강조할 수 있다.

1
2
const p = document.querySelector('p');
const highlight = p.dataset.highlight;

그리고, 이를 통해, CSS에서 다른 스타일을 적용할 수 있다.

1
2
3
p[data-highlight="important"] {
    font-style: italic bold;
}

data-* 속성의 이름 규칙

• data- 뒤에는, 소문자, 대문자, 숫자만 사용할 수 있다.
• data- 뒤에는, 대시(-)를 사용할 수 있다.
• data- 뒤에는, 대시(-)를 사용할 수 있지만, 대시(-) 뒤에는, 소문자, 대문자, 숫자만 사용할 수 있다.
• data- 뒤에는, 대시(-)를 사용할 수 있지만, 대시(-) 뒤에는, 대시(-)를 사용할 수 없다. ex) <p data-lang="en">Title</p>, <p data-lang="en-US">Title</p>, <p data-lang="en-US-123">Title</p>, <p data-lang="en-us">Title</p>, <p data-lang="en-us-123">Title</p>

data-* 속성의 값 규칙

• data-* 속성의 값은, 항상 유효한 HTML, 혹은 XML, 혹은 JSON 문자열이어야 한다. ex) <p data-lang="en">Title</p>, <p data-lang='{"lang": "en"}'>Title</p>