HTML에서는 요소의 class 속성을 기반으로 스타일 규칙을 정의할 수 있습니다. 특정 클래스가 지정된 모든 요소는 해당 규칙에 따라 서식이 적용되는데, 이러한 선택 방식을 클래스 선택자(class selector)라고 합니다.
기본 클래스 선택자
특정 클래스를 가진 요소를 선택하려면 마침표(.) 문자 뒤에 클래스 이름을 작성하면 됩니다. 예를 들어 .black과 같이 표기합니다.
.black {
color: #000000;
}위 코드는 문서 내에서 class 속성이 black으로 설정된 모든 요소의 콘텐츠를 검은색으로 렌더링합니다.
요소와 결합한 클래스 선택자
클래스 선택자를 특정 태그와 조합하면 더욱 정밀하게 스타일을 적용할 수 있습니다. 예를 들어, class 속성이 black인 요소 중에서도 <h3> 태그에만 검은색을 적용하려면 다음과 같이 작성합니다.
h3.black {
color: #000000;
}<p> 태그에 클래스 스타일 적용하기
또 다른 예로 <p> 태그에 스타일을 지정해 보겠습니다. 아래 코드는 class 속성이 device인 모든 <p> 요소에 스타일을 적용합니다.
예제 1: 단일 클래스 적용
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #ffffff;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p class="device">Information about devices.</p>
<p>This is demo text</p>
</body>
</html>위 예제에서는 세 개의 단락 중 가운데 단락만 device 클래스를 가지고 있으므로, 검은 배경에 흰색 텍스트로 표시됩니다. 나머지 두 단락에는 영향을 주지 않습니다.
예제 2: 여러 클래스 동시 적용
하나의 요소에 여러 개의 클래스를 동시에 적용할 수도 있습니다. class 속성 값에 공백으로 구분하여 여러 클래스 이름을 나열하면 되며, 각 클래스의 스타일이 모두 반영됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
p.device {
background: #000000;
color: #ffffff;
}
p.accessories {
text-align: center;
}
</style>
</head>
<body>
<p class="device accessories">DEVICE DETAILS</p>
<p class="device">Information about devices.</p>
</body>
</html>위 예제에서 첫 번째 단락은 device와 accessories 두 클래스를 모두 가지므로, 검은 배경·흰색 텍스트 스타일과 가운데 정렬 스타일이 함께 적용됩니다. 반면 두 번째 단락은 device 클래스만 있으므로 배경과 글자 색상 스타일만 적용됩니다.
정리
- .클래스명: 해당 클래스를 가진 모든 요소 선택
- 태그명.클래스명: 특정 태그이면서 해당 클래스를 가진 요소만 선택
- class="A B": 하나의 요소에 여러 클래스를 공백으로 구분해 동시에 적용 가능
클래스 선택자를 잘 활용하면 재사용 가능한 스타일을 만들어 코드의 유지보수성을 크게 높일 수 있습니다.