의미

화면에 보이진 않지만 내가 원하는 추가 정보들을 담을 수 있다.

사용예제

이렇게 추가한 정보들은 javascript, css 모두에서 접근할 수 있다.
나의 경우에는 navbr 메뉴 클릭시 스크롤 이동, 필터링 사용에 활용하였다.

사용법은 간단하다.

<li class="navbar__menu__item active" data-name="home">HOME</li>
<li class="navbar__menu__item" data-name="skills">SKILLS</li>
<li class="navbar__menu__item" data-name="work">MY WORK</li>
<li class="navbar__menu__item" data-name="contact">CONTACT</li>

그냥 뒤에 data-만 붙여주면 된다!!

javascript에서 받는 법

element.dataset.name

위에서 나는 'name'으로 data 이름을 정해줬으므로 dataset 함수를 이용해 받아주면 된다!!

CSS에서 받는 법

data는 HTML 속성이기 때문에 당연히 CSS에서도 받을 수 있다!

element[data-name="home"]{
	color: blue;
}

요롷게 data 값이 home인 녀석만 css를 따로 줄 수도 있다.

주의할 점.

• 보여져야 하는 부분은 data 속성으로 지정하지 말 것. 검색 크롤러가 해당 속성을 찾지 못하기 때문.
• 호환성 문제 IE 11버전이하에서는 dataset이 동작하지 않는다.
• data-뒤에 내용들은 display될 때 camelCase로 변환되어 나타난다.