Data attribute

html에서 기본으로 제공하는 속성 이 아닌 속성을 사용할 때
Customizing한 속성을 사용할 때
이용할 수 있는 기능. (HTML5에서 추가됨)

사용법

data-추가할-속성-이름="값"

여기서 우리가 추가한 속성 이름은
js에서 document.querySelector 로 받아올 경우
camelCase로 자동 변환된다 (중간에 - 문자가 없어지고)

<div data-display-name="JB"/>

위 예시에서 속성 이름은 자동으로 displayName 으로 변환된다.

물론 CSS에서도 [] 속성 셀렉터를 이용해서 사용할 수 있다.

주의점

이렇게 추가할 시에 DOM 요소 (브라우저)에 속성을 추가해서 보관하는 것이므로
적나라하게 다 보이니, 민감한 요소는 이런 식으로 보관하는 것은 좋지 않다.
그런 정보들은 자바스크립트 안에서 처리하는 것을 권장.