[Html5] html5 의 data- 속성 사용법

나는 노땅 개발자라 웹초창기에는 html 기본 속성만 정적으로 활용 가능했다.

 

역시 세상은 빨리 변하는 법, html 의 커스텀 속성을 지정하는 방법도 지원하게 되었다.

 

 

<input type="text" data-country="Norway" data-code="c03" name="Country">

 

<button data-id="341">좋아요</button>

<!-- 객체 형태로 된 문자열 데이터셋 -->
<div data-person='{"name": "Chris Coyier", "job": "Web Person"}'></div>

<!-- 배열 형태로 된 문자열 데이터셋 -->
<div data-fruit='["apple", "banana", "melon"]'></div>

 

 

 

<div id="post" data-columns="3" data-title="javascript" data-index-number="12345">...</div >

 

 

const $div = document.getElementById('post');
 
// 일반적인 객체 속성 접근
$div.dataset.columns // "3"

// 배열 인덱스로 접근
$div.dataset['title'] // "javascript"

// data-index-number에서 dataset.indexNumber로 변환
$div.dataset.indexNumber // "12345"



const $div = document.getElementById('post');
 
$div.getAttribute('data-columns') // "3"

$div.getAttribute('data-title') // "javascript"

$div.getAttribute('data-index-number') // "12345"

 

 

 

 

 

인파님의 이와 관련된 아주 좋은 포스팅 글이다.

아주 자세히 설명되어 있으니 꼭 익혀두자.

 

백엔드, 프론트엔드 모두 편하게 활용가능하다.

 

특히 데이터셋을 연결하여 지정하는 부분을 꼭 확인해보기 바란다.

 

 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%85%8Bdata-%EC%86%8D%EC%84%B1

🌐 html의 data-속성 사용법 완벽 가이드