HTML5 DATA 속성 사용하기

안녕하세요. HTML에서 DATA 속성을 사용할 수 있다는 사실, 알고 계셨나요?

브라우저에 영향을 주지 않고 요소에 특정한 데이터를 저장하고 싶은 경우 사용하는 속성이라고 하는데요.

오늘은 DATA 속성의 장점과 사용법에 대해 학습해보겠습니다.

 

DATA- 속성이란?

<input type="text" data-value="001" id="username">

HTML 표준인 value 속성과 별개로 만들어진 사용자 지정 데이터 속성입니다. 

• hidden 태그로 데이터를 저장할 필요가 없습니다.
• 하나의 HTML 요소에 여러 데이터 속성을 사용할 수 있습니다. 
• 어느 엘리먼트에서나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다.
• 화면에 안보이게 글이나 추가 정보를 엘리먼트에 담아 놓을 수 있습니다.

 

DATA- 속성 사용법

 

특정 속성값만 추출하기 

console.log(input.dataset.code);
console.log(input.dataset['code']);

데이터 속성 값 바꾸기 

let input = document.querySelector('#username');
input.dataset.code = 'aaa'

HTML 문법

<div>
	id="electriccars"
    data-columns="3"
    data-index-number="1234"
    data-parent="cars">
...
</div>

JAVA SCRIPT 문법

let article = document.getElementById('electriccars');

article.dataset.columns // "3"
article.dataset.indexNumber   // "1234"
article.dataset.parent // "cars

CSS 문법

article::before {
  content: attr(data-parent);
}

article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

 

유의 사항

• 검색 크롤러가 데이터 속성의 값을 찾지 못합니다.
• HTML에 데이터를 넣을 경우, 누구나 해당 데이터에 접근이 가능합니다. 
• 누구나 JS로 해당 데이터를 수정할 수 있습니다. 
• 따라서 민감한 데이터는 data- 속성 사용을 지양하는 것이 좋습니다. 

 

참고 블로그

https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute

(HTML) 데이터 속성 사용하기 (data attribute)

https://developer.mozilla.org/ko/docs/Learn/HTML/Howto/Use_data_attributes

데이터 속성 사용하기 - Web 개발 학습하기 | MDN

https://b.redinfo.co.kr/17

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