HTML 문서에서 class="mydemo"처럼 특정 클래스를 가진 모든 요소를 선택하려면 CSS의 .class 선택자를 사용하면 됩니다. 마침표(.) 뒤에 원하는 클래스 이름을 붙이기만 하면, 해당 클래스가 적용된 모든 요소에 동일한 스타일을 한 번에 지정할 수 있습니다.
기본 문법
.클래스명 {
속성: 값;
}예를 들어 .mydemo { ... }라고 작성하면, 문서 내에서 class="mydemo"를 가진 모든 요소가 선택됩니다.
예제 코드
아래 예제에서는 .demo 클래스 선택자를 사용해 해당 클래스를 가진 요소에 주황색 점선 테두리를 적용했습니다. 같은 h1 태그라도 클래스가 있는 첫 번째 제목에만 스타일이 적용되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
border: 2px dashed orange;
}
</style>
</head>
<body>
<h1 class="demo">Heading 1</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>실행 결과
- 첫 번째 <h1> 요소:
class="demo"가 있으므로 주황색 점선 테두리가 적용됩니다. - 두 번째 <h1> 요소와 <h2> 요소: 클래스가 없으므로 테두리가 적용되지 않습니다.
이처럼 클래스 선택자는 태그 종류에 상관없이 여러 요소에 공통 스타일을 적용할 때 가장 널리 사용되는 방법입니다. 하나의 클래스를 여러 요소에 재사용할 수 있어 코드의 유지보수성도 크게 향상됩니다.