CSS 클래스 선택자 완벽 가이드 – 기본부터 다중 클래스 활용까지

CSS 클래스 선택자란?

CSS에서는 요소의 class 속성을 기준으로 스타일 규칙을 정의할 수 있습니다. 특정 클래스를 가진 모든 요소는 해당 규칙에 따라 자동으로 서식이 적용됩니다.

.black {
    color: #808000;
}

위 규칙은 문서 내에서 class 속성이 black으로 설정된 모든 요소에 지정된 색상 값을 적용합니다. 즉, 클래스 이름만 일치하면 요소의 종류와 관계없이 스타일이 일괄 적용되는 것입니다.

특정 요소로 범위 좁히기

클래스 선택자를 더 구체적으로 만들고 싶다면, 요소 타입과 함께 조합하여 사용할 수 있습니다.

h1.black {
    color: #808000;
}

이 규칙은 class 속성이 black으로 설정된 <h1> 요소에만 스타일을 적용합니다. 같은 클래스 이름을 사용하더라도 다른 요소에는 영향을 주지 않으므로, 스타일 충돌을 줄이고 의도를 명확히 할 때 유용합니다.

하나의 요소에 여러 클래스 적용하기

클래스 선택자의 강력한 기능 중 하나는 하나의 요소에 여러 개의 클래스를 동시에 부여할 수 있다는 점입니다. HTML에서는 class 속성값에 클래스 이름을 공백으로 구분하여 나열하면 됩니다.

<p class="center bold">
    이 단락에는 center와 bold 두 클래스의 스타일이 함께 적용됩니다.
</p>

위 예제에서 해당 <p> 요소는 center 클래스와 bold 클래스에 정의된 스타일 규칙을 모두 상속받아 렌더링됩니다. 이처럼 클래스를 조합하면 공통 스타일과 개별 스타일을 유연하게 재사용할 수 있어 CSS 코드의 유지보수성이 크게 향상됩니다.

참고 팁

두 클래스가 동시에 적용된 요소만 대상으로 하려면 .center.bold처럼 클래스 선택자를 붙여 연결하면 되며, 특정 요소로 한정하려면 p.center.bold 형태로 작성할 수 있습니다.