HTML - 데이터 속성(data attribute)

html 태그에 정보 저장을 위해 사용함

HTML 문법

<div
     data-colums="3"
     data-number="234"
     data-id="id">
  가나다
</div>

어느 태그에나 data-로 시작하는 속성을 추가할 수 있다. 이를 통해 화면에 보이지 않는 정보를 저장해 놓을 수 있다.

js에서 접근

var div = document.querySelctor('div');

div.dataset.columns // "3"
div.dataset.number // "234"
div.dataset.id // "id"

위와 같이 간단하게 접근 가능. 값을 변경하려면 div.dataset.id = "id_change" 와 같이 바꿔주면 된다.

!주의
html 상에서 data-videoId와 같이 camelCase로 작성했더니 크롬에서 데이터가 읽히지 않는 현상이 보였다. (div.dataset.videoId의 값이 나오지 않았다) div.dataset 객체를 받아 확인해보니 videoId가 아니라 videoid로 바뀌어져 있었다.(대문자 I에서 소문자 i)

데이터 속성을 이용할 때는 반드시 소문자를 사용하도록 하자.

css에서 접근

div::before {
  content: attr(data-id);
}

이렇게 하면 html의 '가나다' 앞부분에 data-id의 값, 즉 "id"가 추가된다.

div[data-columns='3'] {
	background-color='red';
}

이런 식으로 선택자로도 사용할 수 있다.

---

js를 통해 변수를 할당할 수 있어 유용하게 쓰일 듯 하다.

그러나 html에서 바로 볼 수 있기 때문에 노출되선 안되는 정보들은 조심하자.