![[HTML5] HTML태그에 나만의 커스텀 속성 추가하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQ0pB8%2FbtrhXGi9uKX%2FcjjPknioz6i95AXoB1PKj0%2Fimg.png)
HTML 태그는 태그의 선언과 속성들로 구성된다.
이때 태그의 속성(attribute)이라는 것은 현대 태그에 추가적인 정보를 제공하는 일종의 메타데이터(Metadata)이다.
이전의 HTML은 태그에 정해진 속성 외에 다른 속성을 지정하는 것은 HTML의 표준을 위반하는 것이었으나, HTML5에서는 특정 요소와 연관되어 있지만 데이터에 대한 확장 가능성을 염두해 두고 data-* 속성을 이용해서 다른 조작을 하지 않고도 의미론적 표준 HTML요소에 추가 정보를 저장할 수 있게 하였다. 자바스크립트 또한 표준화된 DOM 메서드로 데이터셋 속성에 접근할 수 있다.
"data-" 속성은 HTML 5 에서부터 사용되기 시작한 속성이지만, 대부분의 웹브라우저에서 사용할 수 있다.
HTML5 커스텀 데이터 속성(custom data attributes)의 특징
- 속성의 시작은 반드시 data-로 시작
- 하나의 태그에 사용할 수 있는 커스텀 데이터 속성의 개수의 제한은 없다. 즉, 원하는 만큼 커스텀 데이터 속성 추가 가능하다.
- 브라우저들은 커스텀 데이터 속성을 만나면 해석하지 않고 건너뛴다. 따라서 보여지는 화면에 아무런 영향을 주지 않는다. 그러므로 보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 않는 것이 좋다.
- 자바스크립트와 CSS에서도 커스텀 데이터 속성의 정보를 사용할 수 있다.
HTML5 커스텀 데이터 속성(custom data attributes) 작성 예시
data-이름 형식으로 작성하면 된다.
<section
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</section>
CSS에서 커스텀 데이터 속성에 접근하기
데이터 속성은 순수 HTML속성이기 때문에 앞서 말했듯 CSS에서도 접근이 가능하다.
예를 들어, 부모 데이터를 article에서 보여주려면 attr함수를 이용해 data-parent attribute를 불러와 사용하면 된다.
article::before {
content: attr(data-parent);
}CSS의 attribute 선택자에서도 사용할 수 있다.
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}}
JavaScript에서 커스텀 데이터 속성에 접근하기
값을 읽기 위해서는 getAttribute()를 사용하면 된다.
dataset 객체를 통해 커스텀 데이터 속성을 받아올 수 있다.
var section = document.getElementById('electriccars');
section.dataset.columns // "3"
section.dataset.indexNumber // "12314"
section.dataset.parent // "cars"
jQuery에서 커스텀 태그 속성에 접근하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> //jQuery사용을 위해 CDN을 추가한다.
<script>
$(function() {
$("button").click(function(){
var type=$(this).attr("data-id");
alert(type);
})
});
</script>
</head>
<body>
<button data-id="Hello">"Have a good day!"</button>
</body>
</html>
'HTML, CSS' 카테고리의 다른 글
| [HTML5] main 요소와 섹셔닝 컨텐츠 (Sectioning contents) (0) | 2022.07.03 |
|---|---|
| [HTML/CSS] 박스 모델 - Box model (0) | 2022.07.02 |
| [HTML] HTML/CSS 관련 북마크 (0) | 2022.02.17 |
| [HTML/CSS] 필요 개념 정리 (0) | 2021.12.27 |