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함수의 생성된 content를 사용하면 된다.
article::before {
content: attr(data-parent);
}CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있다.
article[data-columns='3'] {
width: 400px;
}
article[data-columns='4'] {
width: 600px;
}Java Script에서 커스텀 데이터 속성에 접근하기
값을 읽기 위해서는 getAttribute()를 사용하면 된다.
dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data-뒷 부분만을 사용한다!
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>
Question] data커스텀속성의 크로스브라우징 이슈..
어떤곳에서는 ie10부터 써야한다하고 어떤 곳은 그냥 써도 상관없다고하는데 뭐가 맞는건지 잘 모르겠다.
