HTML에서 페이지나 애플리케이션에 대한 사용자 정의 데이터를 비공개로 저장하려면 data-* 속성을 사용하면 됩니다. 이 속성을 활용하면 표준 속성 외에 필요한 추가 정보를 요소에 직접 담아둘 수 있으며, 화면에는 표시되지 않으면서 JavaScript를 통해 자유롭게 읽고 활용할 수 있습니다.
data-* 속성 작성 규칙
- 속성 이름은 반드시
data-로 시작해야 합니다. - 속성 이름에 대문자를 포함해서는 안 되며, 모두 소문자로 작성해야 합니다.
data-뒤에 원하는 이름을 붙여 사용합니다(예:data-rank-type).
예제 코드
다음 예제는 data-* 속성을 실제로 구현한 코드입니다. 목록의 각 순위 항목을 클릭하면 해당 순위의 점수 정보가 알림 창으로 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<script>
function display(rank) {
var myRank = rank.getAttribute("data-rank-type");
alert("Rank " + rank.innerHTML + " has " + myRank + " points.");
}
</script>
</head>
<body>
<h1>Rank and Points</h1>
<p>Click on any rank to generate the details.:</p>
<ul>
<li onclick = "display(this)" id = "fifth" data-rank-type = "500">Fifth</li>
<li onclick = "display(this)" id = "sixth" data-rank-type = "600">Sixth</li>
</ul>
</body>
</html>
위 코드에서는 각 <li> 요소에 data-rank-type이라는 사용자 정의 속성을 지정했습니다. 항목을 클릭하면 JavaScript의 getAttribute() 메서드를 통해 해당 값(500 또는 600)을 읽어와 알림 창에 점수를 출력합니다. 참고로 최신 브라우저에서는 element.dataset.rankType 형태의 dataset API를 사용해 더 간편하게 접근할 수도 있습니다.