CSS 클래스 선택자 완벽 가이드 – 기본 문법부터 실전 예제까지

CSS 클래스 선택자는 HTML 요소에 지정된 class 속성값과 일치하는 이름을 가진 모든 요소를 한 번에 찾아내어 스타일을 적용하는 선택자입니다.

클래스 선택자 기본 문법

.class-name {
    property-name: value;
}

위 선택자와 동일한 클래스 이름을 속성값으로 가지는 HTML 요소는 다음과 같습니다:

<div class="class-name"></div>

.class-name 선택자는 class-name이라는 클래스 속성을 가진 <div> 요소에 연결됩니다. 즉, CSS 스타일시트에서 .class-name에 작성한 모든 스타일 속성이 해당 div 요소에 그대로 적용됩니다.

클래스 이름 앞에 붙는 점(.)은 오직 CSS에서만 사용되는 특수 문법입니다. HTML 요소에 class 속성으로 클래스 이름을 추가할 때는 점(.)을 붙이지 않는다는 점에 주의하세요.

실전 예제: 버튼 스타일링하기

이제 배운 내용을 실제 예제에 적용해 보겠습니다. 아래는 브라우저의 User Agent 스타일시트로부터 기본 스타일을 상속받은 HTML <button> 요소입니다:

<button>Button</button>

기본 모습은 다소 밋밋하죠? 이번에는 .my-button이라는 CSS 클래스를 새로 만들어 기본 버튼 스타일을 덮어써 보겠습니다:

.my-button {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    background-color: #F7575C;
    color: white;
}

그리고 버튼 요소에 class 속성으로 해당 클래스를 추가합니다:

<button class="my-button">Button</button>

결과적으로 훨씬 세련되고 매력적인 버튼이 완성됩니다. 이것으로 CSS 클래스 선택자를 활용할 때 꼭 알아야 할 핵심 내용을 모두 익히셨습니다.

알아두면 좋은 팁

• CSS 클래스는 ID 선택자와 달리 여러 HTML 요소에서 반복해서 재사용할 수 있습니다. ID 선택자는 하나의 페이지에서 단 한 번만 사용할 수 있다는 제약이 있습니다.
• 하나의 요소에 여러 개의 서로 다른 클래스를 동시에 추가할 수도 있습니다 (<div class="first-class second-class third-class">). 이렇게 하면 Tailwind CSS 프레임워크에서 볼 수 있듯이, 작은 유틸리티 클래스들을 조합하여 요소의 디자인을 매우 유연하게 구성할 수 있습니다.