html custom attribute 추가

html에서는 사용자 정의 attribute를 사용 할 수 있게 data- 라는 속성을 제공 하고 있습니다.

명명 규칙은 data- 로 시작 해야 한다는 점을 빼고는 사용자가 원하는 데이터를 제한 없이 정의 할 수 있습니다.

사용 방법은 아래와 같습니다.

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

javascript에서 해당 정보를 가지고 오려는 경우 아래와 같이 간단한 방식으로 접근 가능 합니다.

var article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

dataset을 이용해서 접근 하고 접근시 data- 이후의 내용을 key로 접근 하게 됩니다.

jQuery로 접근 하는 경우 아래와 같이 접근 가능 합니다.

$("#electriccars").attr("data-columns");
$("#electriccars").attr("data-index-number");
$("#electriccars").attr("data-parent");

해당 내용은 html의 속성으로 존재 하기 때문에 CSS에서도 해당 정보에 접근 할 수 있습니다.

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

현재 프론트 개발의 경우 많은 부분 react 나 vue.js를 사용하기 때문에 상기와 같은 html 속성을 사용할 일이 없을 수 있습니다.

하지만 저 같이 html+jquery+Vanilla JS+bootstrap 을 이용해서 작업하는 분들의 경우 유용하게 사용 할 수 있을거 같습니다.

관심 있는 내용인 경우 아래의 url 정보를 간략하게 정리한 내용이라 url을 참고 하시면 됩니다.

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

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

https://www.w3schools.com/tags/att_data-.asp

HTML data-* Attribute