[html/css] 비표준속성 dataset에 대해 알아보자 (Attribute? Property?)

Attribute 과 Property 의 차이

실제로 둘은 html 요소에 대한 클래스와 아이디와 같은 속성을 가르키지만,
속성(Attribute)은 HTML 안에서 쓰이는 엘리먼트의 추가적인 정보를 의미하고(즉, html 문서 내에 있기에 정적임),
프로퍼티(Property)는 DOM 객체 내부의  속성을 의미한다(DOM객체는 js로 다루기때문에 동적임).

일반적으로 프로퍼티 접근이 getAttribute() 와 setAttribute() 메서드보다 약간 더 빠르다. 따라서 사용자 정의 속성과 같이 별도의 프로퍼티가 없는 경우에만 메서드를 이용하고 그외에는 프로퍼티로 접근하는 방법이 이상적이라 볼 수 있다고 한다.

 

 

비표준 속성의 충돌을 방지하기 위한 data-* 속성

속성은 개발자가 용도로 맞게 새롭게 설정해서 사용할 수도 있다.
하지만 이런 경우 나중에 html 표준으로 그 속성명이 등록되어버릴경우 문제가 생기게된다.

따라서 html에는 `data-`를 붙여 개발자설정속성(=비표준속성)으로 안전하게 사용이 가능하게 만들었다.

data-로 시작하는 속성 전체는 개발자가 용도에 맞게 사용하도록 별도로 예약이 되고, `dataset`이라는 프로퍼티에 저장되어 DOM을 이용해 접근이 가능하게된다.

다양한 이유로 클래스가 아닌 비표준 속성을 사용할 수 있다. 
특별하게 데이터를 표시하기 위해 사용한다.

getAttribute() 와 setAttribute() 메서드를 이용해서 다룰 수 있다.

 

CSS에서 이런 비표준속성을 이용해 스타일링을 하려면
`[data-nonstandard]` 이런 식으로 대괄호로 감싸서 비표준속성을 선택할 수 있다.

 

 

참고
https://inpa.tistory.com/entry/%F0%9F%8C%90-attribute-property-%EC%B0%A8%EC%9D%B4