HTML의 data-* 속성은 모든 HTML 요소에 사용자 지정(커스텀) 데이터를 저장할 수 있는 전역(global) 속성입니다. 화면 표시와는 별개로 애플리케이션 로직에서 활용할 데이터를 마크업에 직접 심어둘 수 있어, JavaScript와 연동한 동적 기능 구현에 널리 활용됩니다.
data-* 속성 문법
기본 문법은 다음과 같습니다.
<element data-attribute-name="attribute_value">
속성 이름을 정할 때는 아래 두 가지 규칙을 반드시 지켜야 합니다.
- 속성 이름에는 영문 소문자만 사용할 수 있습니다.
- "data-" 접두사 뒤에는 최소 한 글자 이상이 포함되어야 합니다.
예제: 클릭하면 데이터가 표시되는 목록
아래 예제는 각 <h2> 제목에 data-tutorial-type이라는 커스텀 속성을 부여하고, 요소를 클릭하면 해당 값을 alert 창으로 보여주는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function display(tutorial) {
var type = tutorial.getAttribute("data-tutorial-type");
alert(tutorial.innerHTML + " = " + type + ".");
}
</script>
</head>
<body>
<h1>Tutorials</h1>
<h2 onclick="display(this)" id="java" data-tutorial-type="programming language">Java</h2>
<h2 onclick="display(this)" id="jquery" data-tutorial-type="scripting language">jQuery</h2>
<h2 onclick="display(this)" id="mysql" data-tutorial-type="database">MySQL</h2>
</body>
</html>
실행 결과
화면에 표시된 세 개의 제목 중 아무 것이나 클릭하면 해당 요소에 저장된 data-* 속성값이 팝업으로 나타납니다. 아래는 jQuery 항목을 클릭했을 때의 결과입니다.
참고: dataset API로 더 간편하게 접근하기
getAttribute() 메서드 외에도, 최신 브라우저에서 지원하는 dataset 프로퍼티를 사용하면 더 간결하게 값을 읽고 쓸 수 있습니다. 예를 들어 data-tutorial-type 속성은 element.dataset.tutorialType 형태로 접근하며, 하이픈(-) 뒤의 첫 글자가 자동으로 대문자로 변환됩니다.