'html 커스텀 속성'에 해당되는 글 1건

  1. 2022.04.06 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

HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, Node.setUserData

developer.mozilla.org

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

 

HTML data-* Attribute

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

반응형

'HTML' 카테고리의 다른 글

사이트, 페이지 설명 meta태그 추가  (0) 2021.06.29
html5 file drag and drop  (0) 2021.05.14
페이스북 로그인 연동(javascript api)  (0) 2016.03.01
object 태그를 이용한 pdf보여주기  (0) 2015.09.21
fckeditor2.6 IE9문제  (0) 2015.03.09
Posted by 질주하는구
,