[HTML] 데이터 속성을 이용한 데이터 저장

데이터 속성 (Data Attribute)

웹 퍼블리싱, 프론트엔드에서 데이터들은 대부분 자바스크립트 변수에 저장을 한다. 하지만, HTML5에서부터는 HTML과 관련된 데이터를 HTML 파일에서도 저장할 수 있는 공식적인 방법이 생겼다. 이것이 바로 데이터 속성 (data attribute)이다.

 

사용방법

// HTML 태그 내에 data-key = 'value'의 형태로 입력하면 된다.

// 예시
<li data-country = "korea">

 

그리고 자바스크립트에서 이를 불러올 때는, selector.dataset.key 를 통해 값을 불러올 수 있다.

 

// id가 list이고, currency 데이터를 담고 있는 li 선언
<li id='list' data-currency = 'won'> Korea </li>

<script>
  let korea = document.getElementById('list');
  alert(korea.dataset.currency)  // won
</script>