[HTML] Custom 데이터 속성

[HTML] Custom 데이터 속성

HTML 속성에는 ID와 Class가 있습니다.

- ID 고유한 속성으로 한 HTML 문서에 하나만 사용 가능

- Class 하나의 HTML문서 안에 중복해서 사용 가능

 

 

<input type="text" id="userid" name="username" value="aaaa" />

기존의 HTML은 id나 class, name과 같이 규정된 속성을 준수해야 했기에

개발자가 지정된 속성외에 Meta-Data를 제공하기는 어렵다.

 

그래서 추가된 기능이 커스텀 데이터 속성이다.

<div id="contents" data-type="blog">
    커스텀 데이터 속성을 사용하는 div
</div>

<script>
    var obj = document.querySelector("#contents");
    alert(obj.getAttribute("data-type"))
</script>

 

HTML 태그에 『data-』 속성을 추가하여 사용.

(tag에 데이터 정보 추가한 것이기에 CSS, JavaScript에서도 활용 가능)

[data-type="blog"]{
    background-color : yellow;
}

이러한 임의로 설정할 수 있기에 기존 설정 변경없이 새롭게 속성을 추가하는 방식 웹 문서를 수정가능.