HTML 태그는 태그의 선언과 속성들로 구성됩니다.
이때 태그의 속성(attribute)이라는 것은 어떻게 보면 현재 태그에 대한 추가적인 정보를 제공하는 일종의 메타데이터(Metadata)라고 생각할 수 있습니다.
메타데이터는 어떤 정보에 대한 정보를 의미합니다.
기존의 HTML은 하나의 태그에 정해진 속성을 가집니다. ( id나 class, name 등과 같이 이미 정해진 속성들이 있습니다. )
그래서 기존에는 하나의 태그에 정해진 속성외에 다른 속성을 지정한다는것은 HTML의 표준을 위반하는 결과가 됩니다.
HTML5에서는 이러한 문제를 해결할 수 있는 커스텀 데이터 속성(Custom Data Attribute) 이 있습니다.
HTML5 커스텀 데이터 속성 (Custom Data Attribute) 특징
- 속성의 시작은 반드시 data- 로 시작
- 하나의 태그에 사용할 수 있는 커스텀 데이터 속성의 사용 제한은 없다. 즉 원하는 만큼 커스텀 데이터 속성 추가 가능.
- 브라우저들은 커스텀 데이터 속성을 만나면 해석하지 않고 건너(Skip) 뛴다. 따라서 화면에 보이는데 아무런 영향을 주지 않음.
- 자바스크립트와 CSS에서는 기존과 마찬가지로 커스텀 데이터 속성의 정보를 사용할 수 있다.
<!doctype html>
<head>
<meta charset="UTF-8">
<title>HTML5와 커스텀 데이터 속성</title>
<style>
input[data-type="number"] { background-color: yellow; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(e){
//자바스크립트
var keyType0 = document.getElementById("key").getAttribute("data-type");
//jQuery data('dataName') : 해당 커스텀데이터속성의 값을 반환(dataName은 속성 'data-'를 제외한 이름)
var keyType1 = $("#key").data("type");
//jQuery attr('attrName') : 해당 속성의 값을 반환
var keyType2 = $("#key").attr("data-type");
alert("keyType0:"+keyType0+"\n"
+"keyType1:"+keyType1+"\n"
+"keyType2:"+keyType2+"\n");
});
</script>
</head>
<body>
<input type="text" id="key" data-type="number"/>
</body>
</html>
'웹' 카테고리의 다른 글
| 웹폰트 적용 방법 (0) | 2015.07.23 |
|---|---|
| font-family (0) | 2015.07.23 |
| CSS3 동위 선택자 (0) | 2015.07.22 |
| HTML name과 id 태그 차이점 (0) | 2015.07.22 |
| code / samp / kbd / var / pre 태그 차이 (0) | 2015.07.22 |
