[HTML] 데이터 속성 (data- Attribute)

  데이터 속성을 활용하면 자유롭게 HTML element에 추가적인 정보를 저장할 수 있다.

 

HTML에서 사용하기

  HTML element에 데이터 정보를 추가해주고 싶다면 data-로 시작하는 속성을 추가해주면 된다. data-로 시작하기만 하면 그 어떤 것도 상관없다. 

정말 아무 정보나 집어넣어도 된다.

  자 이제 넣은 정보를 활용할 때이다. 물론 화면상으로는 보이지 않으면서 HTML 문서상으로만 무슨 정보를 추가하기 위해 데이터 속성을 활용할 수도 있지만 일반적으로 데이터 속성은 CSS 혹은 Javascript에서 활용하기 위해 등록된다.

 

 

CSS

  정말 마음대로 넣어주기는 했지만 데이터 속성도 엄연한 HTML 속성이다. 따라서 CSS에서도 접근할 수 있다.

(1) 속성 선택자에서 활용하기

 

(2) Property Value에서 활용하기

attr( )을 활용하면 해당 element의 속성값을 사용할 수 있다. 그러나 content를 제외한 선언(statement)에서 attr( )을 활용하는 것은 실험적 단계라고 명시되어 있으니 주의하자. (https://developer.mozilla.org/en-US/docs/Web/CSS/attr() 참조)

 

 

Javascript

자바스크립트에서 데이터 속성값을 읽는 것은 훨씬 간단하다. element.dataset.data-뒷부분이라고만 적으면 해당 속성값을 가져올 수 있다. 참고로 데이터 속성을 지정할 때 -들은 자바스크립트의 네이밍 컨벤션인 캐멀 케이스를 기준으로 변경되니 주의해야 한다.