HTML : data-* 태그

HTML data-* 태그

data-* 는 원하는 태그를 커스텀하는 것이다.

복잡한 화면을 정의할 때 class, id, name 으로 충분하지 않을 경우가 있는데, 이 때 사용하면 매우 유용하다.

name 으로만 form 을 보내고, 받아온 정보를 뿌리기에 충분하지 않을 경우가 있는데,

이 때 data-name 이라고 정의하면,

서버에 보내는 태그 따로, 서버에서 받아온 정보를 뿌리는 태그인 'name' 을 따로따로 정의할 수 있다.

 

data- 다음에 사용자의 기호에 따라서 정의해서 사용하면 된다.

<input type=text name="name" class=~~ id=~~ data-name="name" 
<input type=text name="phone" class=~~ id=~~ data-index="member.name"
<input type=text name="email" class=~~ id=~~ data-color="clothes.color"

#data-* 는 하나의 태그에서 여러 개 정의할 수 있다.

 

 

--CSS 에서

div[data-name="email"] {
    //code
}

 

--javascript 에서

let test = document.querySelector('div[data-name="test"]');