HTML class 속성이란?
HTML의 class 속성은 하나의 요소에 하나 이상의 클래스 이름을 지정하는 데 사용됩니다. 지정된 클래스 이름을 활용하면 CSS에서 해당 요소를 선택해 스타일을 적용할 수 있으며, JavaScript로 특정 요소를 조작할 때도 활용됩니다.
동일한 클래스 이름은 여러 요소에서 재사용할 수 있기 때문에, 여러 요소에 일관된 스타일을 효율적으로 적용하고 싶을 때 매우 유용합니다.
class 속성 사용 예제
다음 예제는 HTML에서 class 속성을 구현하는 기본적인 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2.demo {
color: orange;
background-color: black;
}
</style>
</head>
<body>
<h1>Resources</h1>
<h2 class="demo">Text Tutorials</h2>
<h2 class="demo">Video Tutorials</h2>
<h2 class="demo">Interview Questions and Answers</h2>
<h2 class="demo">Online Quiz</h2>
</body>
</html>실행 결과
예제 설명
위 예제에서는 각 <h2> 요소에 demo라는 클래스 이름을 지정했습니다.
<h2 class="demo">Text Tutorials</h2>
<h2 class="demo">Video Tutorials</h2>이어서 다음과 같은 CSS 스타일을 적용해 <h2> 요소의 글자색과 배경색을 변경했습니다.
h2.demo {
color: orange;
background-color: black;
}h2.demo 선택자는 demo 클래스를 가진 모든 <h2> 요소를 대상으로 동작합니다. 그 결과 네 개의 제목 요소가 모두 주황색(orange) 글자와 검정색(black) 배경으로 표시되는 것을 확인할 수 있습니다.
이처럼 class 속성을 사용하면 중복된 스타일 코드를 줄이고, 하나의 규칙만 수정해도 관련된 모든 요소에 한 번에 반영할 수 있습니다.