데이터 속성 사용하기

💡 CSS에서 데이터 속성 사용하기

안녕하세요 TriplexLab 입니다.
오늘은 css에서 데이터 속성 사용는 방법에 관해서 살펴보도록 하겠습니다.

HTML 문법

HTML 태그에 data-로 시작하는 속성을 사용해서 어떠한 데이터든 몰래 담아놓을수 있습니다.

<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

CSS 에서 접근하기

data- 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있습니다!
다음과 같이 접근해서 데이터 값을 가져올수도 있습니다. (유용하게 사용할수 있을것 같네요ㅎㅎ)

article::before {
  content: attr(data-columns); // 3
}
article::before {
  content: attr(data-index-number); // 12314
}
article::before {
  content: attr(data-parent); // cars
}

 

또는 다음과 같이 접근해서 스타일을 적용할수도 있습니다.

article[data-columns='3'] {
  width: 400px;
}
article[data-index-number='12314'] {
  width: 400px;
}
article[data-parent='cars'] {
  width: 400px;
}