[HTML] data 속성 사용하기

html에서 data-slide 같은 문법을 본적이 있는데, 유용하게 쓰여서 알아봤다.

공식문서에서 특정 요소와 연관되어 있지만 정해진 의미는 갖지 않는 데이터정도로 정의한다. width, height처럼 정해진 의미는 없다. 다만 구현하는 사람이 의미를 부여해서 javascript나 css에서 유용히 쓸 수 있다.

HTML 문법

<button class="dots" data-slide="1"
        data-columns="3" data-index-number="12314"></button>

JavaScript에서 접근하기

getArrtibute()같은 것으로 html 요소를 특정해내고, dataset속성으로 읽어낸다.

const slides = document.querySelecotr('.dots');

let {slide} = slides.dataset // "1" 
slides.dataset.slide // "1"
slides.dataset.columns // "3"
slides.dataset.indexNumber // "12314"

CSS에서 접근하기

data 속성은 HTML 속성이기 때문에 자바스크립트뿐만 아니라 CSS에서도 접근할 수 있다.

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

button::before{
	content: attr(data-slide);
    }

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

.dots[data-slide=1]{
	width: 400px;
}
.dots[data-columns=3]{
	height: 200px;
}

문제점

• 노출되고 접근되어야 하는 내용은 저장하지 않는 것이 좋음
• 검색 크롤러가 데이터 속성의 값을 찾지 못함
• 구형 인터넷 익스플로러, 파이어폭스에서 작동하지 않을 수 있음.

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes