[HTML] data-type

HTML 에서 data-type 만들기 👑

만드려는 타입 앞에 data- 를 붙여 사용한다.

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

CSS 와 JS 에서도 접근 가능하다!

article::before {
  content: attr(data-parent);
}
article[data-columns='3'] {
  content: attr(data-parent);
}

const article = document.querySelector('#electric-cars');
const article = document.querySelector('article[data-columns="3"]');
// The following would also work:
// const article = document.getElementById("electric-cars")

article.dataset.columns // "3"

👉 MDN
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes