[CSS] .클래스 선택자

CSS에서 가장 많이 사용되는 선택자는 class 선택자입니다.
class는 여러 요소에 동일한 스타일을 반복 적용할 때 사용합니다.

 

1. class 선택자란?

class는 HTML 요소에 그룹 이름을 부여하는 속성입니다.
하나의 class는 여러 요소에서 재사용할 수 있습니다.

<h3 class="place">우도</h3>
<h3 class="place">한라산 국립공원</h3>

 

2. CSS에서 class 선택자 사용 방법

CSS에서는 .(점) 기호로 class를 선택합니다.

.place {
  color: #f56513;
}

• .place → class 선택자
• 동일한 class를 가진 모든 요소에 스타일 적용

여러 요소를 한 번에 관리할 수 있습니다.

 

3. id 선택자와 class 선택자의 차이

구분	id	class
사용 횟수	한 번만	여러 번 가능
선택 방식	#id명	.class명
용도	고유 요소	공통 스타일
실무 사용	적음	매우 많음

실무에서는 대부분 class를 사용합니다.

 

4. class를 사용하는 이유

• 스타일 재사용 가능
• 컴포넌트 단위 관리에 적합
• 유지보수와 확장에 유리

<button class="button">확인</button>
<button class="button">취소</button>

 

.button {
  padding: 8px 12px;
  border-radius: 4px;
}

 

5. 여러 class를 동시에 사용하기

하나의 요소에 class를 여러 개 적용할 수도 있습니다.

<button class="button button--primary">확인</button>

기본 스타일 + 변형 스타일을 조합할 때 유용합니다.

 

 

 

정리하면

 

class 선택자는 여러 요소에 공통 스타일을 적용하기 위한 가장 기본적인 방법이며,
실무 웹 퍼블리싱의 핵심 선택자이다.