html 태그, div 태그에 사용자데이터 기록하기, div 글로벌속성 data-*

html태그나 div 태그를 사용하는 경우, 해당 태그에 접근하기 위해서 id 값이나 name 값을 사용하는 경우가 많습니다. 

<ul>

  <li id="animal01'>독수리</li>

</ul>

하지만, id 값이나 name 값은 중복이 되면 안되기때문에, 그룹으로 분류되는 항목을 관리하는 용도로는 사용하기 어렵습니다. 예를 들어 아래와 같이 동물들의 리스트가 있을때, 포유류와 조류를 구분해야 할 경우가 있다면

즉, 포유류 버튼을 클릭시에는 포유류 리스트에 해당하는 <li>태그내의 값을 처리해야하고

조류 버튼을 클릭시에는 조류 리스트에 해당하는 <li>태그내의 값을 처리해야 하는경우

<ul>

  <li id="animal01'>독수리</li>

  <li id="animal02'>호랑이</li> 

  <li id="animal03'>참새</li> 

  <li id="animal04'>원숭이</li> 

</ul>

기존의 id 만으로는 처리가 어려운 경우가 있습니다. 

이럴때 사용할 수 있도록, HTML 태그는 Global Attributes 를 제공합니다.

형식은 data-* 입니다. 즉, data- 로 시작만 하면되고 그 뒤는 개발자가 임의로 이름을 붙일 수가 있습니다. 

위와 같은 상황이라면, 아래와 같이 사용할 수 있습니다.

<ul>

  <li id="animal01' data-animal-type="bird">독수리</li>

  <li id="animal02' data-animal-type="mammal">호랑이</li> 

  <li id="animal03' data-animal-type="bird">참새</li> 

  <li id="animal04' data-animal-type="mammal">원숭이</li> 

</ul>

아래 그림을 클릭하시면 w3school 에서 제공하는 Global attributes 설명페이지로 링크됩니다. 

참고하세요