커스텀 데이터 속성(date-*)
커스텀 데이터 속성(date-*)
HTML에서 기본적으로 제공되는 속성이 아닌, 개발자가 임의의 속성을 추가하고자 할 때 사용 합니다.
특징
-
커스텀 데이터 속성은 html tag 상에서 별다른 작용을 하지 않습니다.
-
속성의 시작은 반드시 data-로 시작
-
자바스크립트와 CSS에서도 커스텀 데이터 속성의 정보를 사용 할 수 있습니다.
-
브라우저는 커스텀 데이터 속성을 만나면 해석하지 않고 건너 뜁니다. 따라서 보여지는 화면에 아무런 영향을 주지 않습니다.
HTML 사용
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
</article>
-
data-이름
으로 사용 할 수 있습니다. -
어떤 엘리먼트든 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있습니다.
CSS 사용
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}
- CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.
JavaScript 사용
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
</article>
<script>
var article = document.getElementById("electriccars");
article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"
</script>
-
자바스크립트에서 dataset 객체를 통해 data 속성을 가져올 수 있습니다.
-
data-
뒷 부분을 사용 합니다. -
엘리먼트.setAttribute("속성명", "속성값");
을 사용하여 추가 가능합니다. -
해당 속성은 문자열이며 읽거나 쓸 수 있습니다.
article.dataset.columns = 5
- 해당 속성의 값을 변경도 가능 합니다.
주의점
-
민감한 데이터는 넣지 않는 것이 좋습니다.
-> HTML에 데이터를 넣는 것은 누구에게나 보이고, 자바스크립트로 접근 가능하기 때문에 누구나 수정할 수 있습니다. -
관찰 해야하는, 접근 가능해야하는 중요한 내용은 데이터 속성에 저장하지 않는 것이 좋습니다.
-> 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못하는 문제도 가지고 있습니다. -
브라우저별 호환성 문제
참고
- https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes
- https://velog.io/@yunsungyang-omc/
Author And Source
이 문제에 관하여(커스텀 데이터 속성(date-*)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hoho_0815/커스텀-데이터-속성date-저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)