CSS
클래스로 스타일 적용 대상 고르기
클래스 선택자는 같은 스타일을 적용할 요소를 묶습니다.
이럴 때 필요해요
모든 버튼 대신 특정 버튼에만 스타일을 적용합니다.
어떻게 동작하나요?
button 선택자는 문서의 모든 button 요소를 대상으로 합니다. 일부 요소만 고르려면 HTML의 class에 이름을 적고 CSS에서 그 이름 앞에 점을 붙입니다.
<button class="primary">의 스타일은 .primary로 선택합니다. 클래스 이름은 같은 스타일이 필요한 여러 요소에 반복해서 사용할 수 있습니다.
요소 하나에는 여러 클래스를 줄 수 있습니다. 먼저 어떤 요소가 선택되는지 확인한 뒤 규칙이 충돌할 때의 우선순위를 배우는 편이 좋습니다. 자세한 충돌 규칙은 캐스케이드 노트로 이어집니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
<style>.primary { background: navy; color: white; }</style>
<button class="primary">예매하기</button>
<button>취소</button>primary 클래스가 있는 첫 버튼에만 지정한 배경색과 글자색이 적용됩니다.
자주 헷갈리는 포인트
- 클래스 선택자의 점은 CSS에서 쓰고 HTML class 값에는 넣지 않습니다.
- id를 여러 요소에 반복해서 스타일 그룹으로 사용하지 않습니다.
내 말로 설명해 보기
같은 강조 스타일을 버튼 두 개에 적용하려면 어떻게 할까요?
생각할 단서 HTML의 class 이름과 CSS 선택자의 점을 비교해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 클래스 선택자는 같은 스타일을 적용할 요소를 묶습니다.
- primary 클래스가 있는 첫 버튼에만 지정한 배경색과 글자색이 적용됩니다.
예시 답변
두 버튼에 primary 클래스를 주고 .primary 규칙 하나를 공유합니다. 어떤 규칙이 이기는지는 이후 캐스케이드에서 다룹니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.