HTML의 data-* 속성을 사용하면 표준 속성 외에 요소에 추가적인 사용자 정의 정보를 저장할 수 있습니다. 이렇게 저장한 데이터는 CSS와 JavaScript에서 자유롭게 활용할 수 있어 실무에서 매우 유용하게 쓰입니다. 아래 예제들을 통해 CSS에서 data-* 속성을 사용하는 다양한 방법을 살펴보겠습니다.
예제 1: JavaScript와 함께 data-* 속성 활용하기
다음 예제에서는 음식 항목에 마우스를 올리면(hover), 해당 요소의 data-food-type 속성 값을 JavaScript로 읽어와 하단의 설명 문구를 동적으로 변경합니다.
<!DOCTYPE html>
<html>
<head>
<style>
dl {
margin: 2%;
}
p {
width: 60%;
background-color: lightgreen;
padding: 2%;
color: white;
text-align: center;
}
dt {
font-weight: bold;
}
dt:hover {
cursor: pointer;
}
dd {
font-style: italic;
}
</style>
</head>
<body>
<dl>
<dt onmouseover="showDescription(this)" data-food-type="beverages">Tea</dt>
<dd>Hot Spicy Tea or Ice Lemon Tea </dd>
<dt onmouseover="showDescription(this)" data-food-type="snacks">Toast</dt>
<dd>Hot Garlic Butter Toast</dd>
</dl>
<p>(hover over food item)</p>
</body>
<script>
function showDescription(food) {
let foodType = food.getAttribute("data-food-type");
document.querySelector('p').textContent = ("We have " + food.innerHTML + " in " + foodType + ".");
}
</script>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: CSS 선택자와 attr() 함수로 data-* 속성 활용하기
이번 예제에서는 CSS 속성 선택자인 [data-number='77']를 사용해 특정 데이터 값을 가진 요소에만 별도의 스타일을 적용합니다. 또한 ::before와 ::after 가상 요소에 attr() 함수를 사용하여 data-user와 data-number 속성의 값을 화면에 직접 표시하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
section {
margin: 8%;
box-shadow: inset 0 0 20px red;
width: 300px;
padding: 2%;
}
section[data-number='77'] {
height: 120px;
border-radius: 15px;
}
section::before {
content: attr(data-user);
font-size: 1.2em;
}
section::after {
content: attr(data-number);
}
</style>
</head>
<body>
<section data-number="77" data-user="Client">
<p>Demo Text</p>
</section>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
정리
data-* 속성은 HTML 요소에 의미 있는 사용자 정의 데이터를 부여할 수 있는 강력한 기능입니다. JavaScript에서는 getAttribute()나 dataset 객체로 값을 읽을 수 있고, CSS에서는 속성 선택자로 조건부 스타일링을 하거나 attr() 함수를 통해 가상 요소의 content로 값을 출력할 수 있습니다. 두 가지 접근 방식을 적절히 조합하면 마크업을 깔끔하게 유지하면서도 동적이고 유연한 웹 페이지를 구현할 수 있습니다.