데이터 속성 사용하기 (data attribute)

 

html5 특성 요소와 연관되어 있지만 확정된 의미를 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다.

data-*속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData()과 같은 다른 조작을 하지 않고도, 

의미론적 표준 HTML요소에 추가 정보를 저장 할 수 있도록 해준다. 

 

data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써

임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법이다.

 

 

HTML 문법

---

문법은 간단하다. 

어느 엘리먼트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다.

화면에 안보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있다.

아래 data 사용법이 있다.

 

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

 

 

data-*의 *은 XML 이름 생성 규칙을 따르는 모든 이름으로 대체할 수 있다.

• 대소문자 여부에 상관없이 xml로 시작하면 안 된다.
• 세미콜론(U+003A)을 포함해서는 안 된다.
• 대문자를 포함해서는 안 된다.

 

 

JavaScript에서 접근하기

---

자바스크립트에서 이 속성 값들을 읽는 방법은 너무 간단하다.

값을 읽기 위한 완전한 html이름과 함께 getAttribute()를 사용하면 된다.

그러나 표준은 더 간단한 방법을 정의한다.

DOMStringMap은 dataset속성을 통해 읽어낼 수 있다.

 

dataset객체를 통해 data속성을 가져오기 위해서는 속성 이름의 data-뒷 부분을 사용한다. 

(-는 camelCase로 변환됨. 아래와 같이 -이후의 알파벳은 대문자가됨.)

 

let article = document.getElementById('electriccars');

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

 

 

각 속성은 문자열이며 읽거나 쓸 수 있다.

위의 경우에서 article.dataset.columns = 5 와 같이 설정하면 해당 속성을 "5"로 변경할 것 이다. 

 

 

 

CSS에서 접근하기

---

데이터 속성은 순 html속성이기 때문에 CSS에서도 접근 할 수 있다는 것에 주목하자.

예를들어, 부모 데이터를 article에서 보여주려면 attr 함수의 생성된 content를 사용하면된다. 

 

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

 

CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있다.

 

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

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

 

 

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있다.

css선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있다.

생성된 content와 CSS transition의 예시를 보려면 이 screencast 를 확인하세요.

 

데이터 값은 문자열이다. 스타일을 적용하려면 숫자 같은 선택자에 따옴표 안에 써주어야 한다.

 

 

 

문제점

---

 

보여야 하고 접근 가능해야 하는 내용은 데이터 속성에 저장하지 말자.

접근 보조 기술이 접근 할 수 없기 때문이다.

또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것이다.

 

고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능이다.

인터넷 익스플로러 11+은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않는다.

ie10이하 를 지원하기 위해서는 대신 getAttribute()를 통해서 데이터 속성을 접근해야 한다. 

또한 JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조하다.

 

 

 

출처: https://wiki.developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0