[WEB] 데이터 속성

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
• https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

---

데이터 속성

구글 메인 사이트에서 캡처한 div 엘리먼트

 특정 사이트를 돌아다니다 보면, 익숙한 태그에 data-* 형식의 속성이 붙어 있는 경우가 존재한다. 이러한 속성들은 태그에 추가하고 싶은 정보가 있으나 대응되는 속성이 표준에 존재하지 않는 경우, 표준 HTML 범위 안에서 해당 정보를 추가할 때 사용한다.

 HTML은 사용자가 표준에 없는 속성을 태그에 나열해도 오류를 발생시키지 않는다. 당장 위 스크린샷만 보더라도 div 태그에 정의되지 않은 속성 jscontroller 및 jsaction이 버젓이 사용되고 있다. 굳이 data-* 형식이 아니더라도 속성을 추가할 수 있다면, 데이터 속성을 사용하는 것이 어떤 장점을 가지는지 궁금할 수 있다.

 data-* 속성의 가장 큰 특징은 표준에 정의되어 있다는 점이다. 표준 수준에서 해당 속성에 대한 자바스크립트 및 CSS에서의 접근법을 제공하므로 표준이 해당 동작을 바꾸지 않는 한 모든 웹 브라우저에서 통용된다.

data-* 속성을 지원하는 웹 브라우저 목록은 https://caniuse.com/dataset 을 참고하자. 인터넷 익스플로러 지원이 중단된 현재 시점에서 사실상 모든 웹 브라우저는 data-* 속성을 지원한다.

---

데이터 속성 사용법

HTML

  <pre class="mermaid" data-tree_name="main">
        graph TD
        1(Client)
        1 --> 2
        2(Load Balancer)
        2 --> 3
        2 --> 4
        3[Server1]
        4[Server2]
    </pre>

    <pre class="mermaid" data-tree_name="sub">
      graph TD
      1(Client)
      1 --> 2
      2(Load Balancer)
      2 --> 3
      2 --> 4
      3[Server1]
      4[Server2]
  </pre>

이름을 data-* 형태로 작성해서 속성을 정의한다. 이때 작명 규칙이 존재한다.

• xml로 시작 X (대소문자 구분 안함)
• 콜론 문자 ( : ) 포함 X
• 대문자 포함 X

---

Javascript

 속성을 읽거나 쓰는 방법은 크게 2가지 존재한다.

1. Element.-Attribute: 태그에 정의된 속성 이름 그대로 접근한다.
   1. Element.getAttribute(속성이름): 속성 읽기
   2. Element.setAttribute(속성이름, 값): 속성 쓰기
2. Element.dataset.~: data- 을 제외한 부분이 속성에 대응되는 프로퍼티의 이름이 된다. 이때 중간에 대시(-)가 포함된 경우 카멜 케이스(중간에 대문자)로 표기한다. 읽기 쓰기 모두 가능하다.

HTML 코드

  <div id="test" data-test-attr1="test1" data-test_attr2="test2"></div>

javascript 코드

const mydiv = document.querySelector<HTMLElement>('#test')!;
//대시는 camel case로 변환
console.log(mydiv.dataset.testAttr1);
console.log(mydiv.getAttribute('data-test-attr1'));
//나머지는 그대로
console.log(mydiv.dataset.test_attr2);
console.log(mydiv.getAttribute('data-test_attr2'));
//데이터를 쓰는 2가지 방법
mydiv.dataset.testAttr1 = "changed!";
mydiv.setAttribute('data-test_attr2', "also changed!");

콘솔에 출력된 결과

태그 상에서 속성 값이 변경된 모습

 get/setAttribute은 모든 속성에 대해 적용할 수 있는 함수이다. data-* 속성을 사용하는 경우 해당 함수들을 사용하지 않고도 dataset.~ 프로퍼티 수준에서 값을 다룰 수 있다는 장점이 생긴다.

---

CSS

 CSS에서의 접근 방법은 data-* 속성을 포함한 모든 속성에 대해 적용될 수 있다. 자바스크립트와는 달리 따로 data-* 속성만을 위한 접근 방식이 존재하지는 않는다. 따라서 일반적인 속성 접근 방식을 사용하면 된다.

 CSS에서 속성은 특성 선택자 및 attr 함수를 통해 다룰 수 있다.

• CSS 특성 선택자: https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors
• CSS attr 함수: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

HTML

 <pre class="mermaid" data-tree_name="main">
        graph TD
        1(Client)
        1 --> 2
        2(Load Balancer)
        2 --> 3
        2 --> 4
        3[Server1]
        4[Server2]
    </pre>

    <pre class="mermaid" data-tree_name="sub">
      graph TD
      1(Client)
      1 --> 2
      2(Load Balancer)
      2 --> 3
      2 --> 4
      3[Server1]
      4[Server2]
  </pre>

CSS

/*css 파일 내에 정의하고, html 파일에서 link 태그를 이용하여 적용*/
pre.mermaid:after {
  content: attr(data-tree_name);
}

pre.mermaid[data-tree_name='main'] {
  outline: 3px auto gray;
}

pre.mermaid[data-tree_name='sub'] {
  outline: 3px auto red;
}

출력된 결과