HTML로 웹페이지의 구조를 만들었다면, 이제는 그 구조에 **스타일(디자인)**을 입힐 차례입니다.
바로 이때 사용하는 것이 **CSS 선택자(selector)**입니다.
선택자란?
CSS에서 ‘어떤 HTML 요소에 스타일을 적용할 것인지 지정하는 방법’입니다.
이 글에서는 초보자도 이해할 수 있도록 CSS 선택자의 종류를 예제와 함께 명확하게 설명하고, 자주 쓰이는 실전 패턴까지 소개합니다.
1. 전체 선택자 (*)
* { margin: 0; padding: 0; }
- 모든 요소에 스타일을 적용합니다.
- 웹페이지의 기본 여백 제거에 자주 사용됩니다.
2. 태그(요소) 선택자
p { color: gray; font-size: 16px; }
- HTML의 특정 태그 전체에 스타일 적용
- 예: <p>, <h1>, <a>, <div> 등
3. 클래스 선택자 (.)
.intro { background-color: #f0f0f0; padding: 20px; }
HTML:
<div class="intro">소개 문단입니다.</div>
- . + 클래스명으로 선택
- 하나의 클래스명을 여러 요소에 재사용 가능
4. 아이디 선택자 (#)
#header { background-color: #333; color: white; }
HTML:
<div id="header">헤더 영역</div>
- # + 아이디명으로 선택
- 하나의 HTML 문서 내에서 단 한 번만 사용
5. 그룹 선택자 (,)
h1, h2, h3 { font-family: 'Noto Sans KR', sans-serif; }
- 여러 선택자에 동일한 스타일을 한 번에 적용
- 쉼표(,)로 구분
6. 자손 선택자 (스페이스)
div p { color: blue; }
HTML:
<div> <p>이 문장은 파란색입니다.</p> </div>
- 특정 요소 안의 하위 요소 전체에 스타일 적용
- 부모 자식 관계를 나타냄
7. 자식 선택자 (>)
ul > li { list-style: none; }
- 직계 자식 요소만 선택
- ul 안의 li 중에서 바로 아래 단계만 적용
8. 인접 형제 선택자 (+)
h2 + p { color: red; }
HTML:
<h2>제목</h2> <p>이 문장은 빨간색입니다.</p>
- 바로 다음에 오는 형제 요소 하나만 선택
9. 일반 형제 선택자 (~)
h2 ~ p { color: green; }
- 같은 부모를 가진 이후의 모든 형제 요소에 스타일 적용
10. 속성 선택자
input[type="text"] { border: 1px solid #ccc; }
HTML:
<input type="text"> <input type="password">
- type="text"인 input만 선택
- 다양한 조건 설정 가능 (=, ^=, *=, $= 등)
💡 실전 예제: 선택자 조합 사용하기
.card .title { font-size: 20px; font-weight: bold; }
HTML:
<div class="card"> <div class="title">카드 제목</div> </div>
- .card라는 클래스 내부의 .title 클래스 요소만 지정하여 스타일 적용
✔️ 선택자 우선순위 기본 정리
선택자 유형우선순위 점수
| 전체 선택자 * | 0 |
| 태그 선택자 p, div | 1 |
| 클래스 .box | 10 |
| 아이디 #main | 100 |
| 인라인 스타일 style="" | 1000 (가장 높음) |
같은 요소에 여러 스타일이 적용될 경우, 우선순위가 높은 선택자의 스타일이 적용됩니다.
마무리: CSS 선택자는 스타일링의 핵심 도구
웹페이지를 ‘어떻게 꾸밀 것인가’를 결정하는 것은 단순히 CSS 속성만이 아닙니다.
정확한 선택자를 사용해 어떤 요소에 적용할지를 지정하는 것이 진짜 핵심입니다.
처음에는 .와 #의 차이만 익혀도 충분하지만,
웹사이트가 점점 복잡해질수록 다양한 선택자를 조합할 줄 아는 능력이 중요해집니다.
지금 소개한 선택자들을 기반으로, 간단한 HTML 페이지에 직접 스타일을 입혀보며 선택자의 쓰임과 우선순위를 실습해보세요.
작은 연습이 쌓이면, 나만의 디자인을 자유롭게 구현할 수 있는 실력이 됩니다.