블로그 프로필 이미지

SMALL






과거에 태그의 속성을 사용해 데이터정보를 넣기위해 웹표준이 아닌 비표준 사용자정의 속성을 이용하여 웹을 제작하곤 했엇다. 물론 내가 그렇게 사용하였다. 하지만 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- 속성을 보고 그 정보들을 해석할 수 있기때문에 보안과 관련된 정보들은 담지 않는게 좋다. 

LIST