css에서 data 속성 접근하는 방법

 

✅data 속성

 HTML5에서 data 속성은 HTML 요소에 추가 정보를 저장할 수 있도록 한다.

 data- 로 시작하는 속성은 모두 사용 가능하다.

화면에 안보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있다.

 

🚨화면에 보여야 하고 접근 가능해야 하는 정보 → 데이터 속성에 저장하지 말기

🚨검색 크롤러가 data 속성 값을 찾을 수 없음

 

✔️HTML 문법

<div
	id="page01"
  	data-page="1"
  	data-index-number="12314"
  	data-parent="swiper1">
  ...
</div>

 

✔️CSS에서 접근하기

[data-page="1"]{
	width: 50%;
}

[data-page="1"]::after{
	content: attr(data-parent)
}

 

🚨  이런경우 css가 인식하지 못할 수도 있어요.

❓ html1과 html2의 차이점은 무엇일까요?

html1

 

html2

 data-page="pg_single"   data-page="pg_single " 

pg_single 뒤에 공백이 하나 있고, 없고 차이입니다.

 

❓이때 스타일을 살펴 볼게요.

data-page 자식인 span 태그를 선택했을 때 확인되는 스타일 입니다.

html1 css

html2 css

 data-page="pg_single " 

데이터 속성 값 뒤에 공백이 있는 경우

[data-page="pg_single"] > span에 지정된 스타일을

css에서 인식을 하지 못하는 것을 확인할 수 있습니다.

 

사실 코드 작성 시 오타 또는 공백 처리에 신경을 쓰지 않으면

오류가 꽤나 발생하는 것 같습니다.

 

코드 작성 시 오타 또는 공백 처리에 신경을 쓰자

---

출처

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