HTML 에서 data- 속성을 이용하여 태그를 데이터로 사용해보자

과거에 태그의 속성을 사용해 데이터정보를 넣기위해 웹표준이 아닌 비표준 사용자정의 속성을 이용하여 웹을 제작하곤 했엇다. 물론 내가 그렇게 사용하였다. 하지만 HTML이 발전되어 지금은 웹표준 속성인 data- 속성을 사용하여 데이터정보를 넣을 수 있게되었다. 언제부터 나왔는지는 모르겟지만, 이속성은 정말 유용하게 사용할 수 있다. 사용 예제는 아래와같다.

<div data-name="dreamload" data-info="데이터 레이아웃" data-value="꿈을 다스리는 자"></div>

위의 사용 예제를 보면 data- 속성으로 name, info, value 가 설정되었다. 이 3개의 값들은 사용자 정의이기 때문에, 데이터의 정보를 알기 쉽게 이름을 정의하여 사용하는게 좋다. 

이렇게 정의된 data- 속성은, 웹 개발 용도에 따라 여러가지로 사용될 수 있다. 또한 자바스크립트 또는 제이쿼리등을 이용하여,좀더 폭넓게 사용할 수 있다. 아래 예제는 사용자의 정보를 data- 속성으로 저장한 예제이다. 

<span data-user_id="user1" data-user_lv="100" data-user_point="10000" data-user_time="3600">user1</span>
<span data-user_id="user2" data-user_lv="50" data-user_point="100" data-user_time="50" >user2</span>
<span data-user_id="user3" data-user_lv="30" data-user_point="5000" data-user_time="1520" >user3</span>
<span data-user_id="user4" data-user_lv="20" data-user_point="10" data-user_time="20" >user4</span>

앞서 말했다시피 이속성값을 사용하는건 본인의 개발 능력에 따라 여러가지로 사용된다. 하지만 주의할점은 보안상 위험한 정보들을 담지 않도록 해야한다. 그이유는 HTML은 클라이언트 언어이기때문에 사용자가 소스보기를 통해 확인을 할 수가있다. 즉 이말은 웹을 이용하는 사용자가 아무런 제한없이 data- 속성을 보고 그 정보들을 해석할 수 있기때문에 보안과 관련된 정보들은 담지 않는게 좋다.