HTML 사용자 정의 속성: data-속성

HTML의 태그들의 속성명은 전부 지정되어 있다.

하지만 개발을 하다 보면, 표준 속성이 아닌 사용자 마음대로 속성을 정의하여 사용하고 싶을 수 있는데,
이때 사용하는 것이 data-* 형식의 사용자 정의 속성이다.

사용자 정의 속성을 이용하면 javaScript에서 원하는 값으로 접근하기 편리하다.

HTML 문법

어느 태그나 “data-”로 시작하는 속성을 지정해서 사용한다.
data- 뒤에 붙는 이름은 대문자를 포함할 수 없다.

<div id="user" data-name="kim" data-age="20"></div>

JavaScript에서 접근하기

1. getAttribute( )

데이터 속성도 태그 속성이기 때문에 getAttribute() 메서드로 값을 가져와서 활용할 수 있다.

const user = document.getElementById('user');

console.log(user.getAttribute('data-name')); // kim
console.log(user.getAttribute('data-age')); // 20

2. dataset

데이터 속성은 객체 형식으로 저장된다.
해당 태그의 데이터 속성들을 한번에 불러오고 싶다면 dataset 메서드를 사용하면 된다.

const user = document.getElementById('user');

console.log(user.dataset);
// {name: 'kim', age: '20'}
console.log(user.dataset.name);
// kim

이때, 속성들의 이름은 camelCase로 변환된다.
ex) data-user-index ⇒ user.dataset.userIndex으로 접근해야 한다.

dataset은 ie11 이상에서만 지원하기 때문에 크로스브라우징 시 주의해야 한다.

CSS에서 접근하기

데이터 속성도 HTML 속성이기 때문에 CSS에서 접근이 가능하다.

<div class="user" data-name="kim">Kim</div>
<div class="user" data-name="park">Park</div>

div.user[data-name="kim"]{
	color: red;
}
div.user[data-name="park"]{
	color: blue;
}

사용 시 주의사항

데이터 속성은 자유로운 HTML 속성이라 제약은 없지만,
이미 설정되어있거나 더 적절한 속성이 있는 경우, 데이터 속성으로 대체하는 것을 권장하지 않는다.

// Good 👍
<input type="number" value="0" >

// Bad 👎
<input type="number" data-init="0" >