CSS 선택자란 무엇인가?
CSS로 스타일을 적용하려면 먼저 어느 HTML 요소를 꾸밀지 지정해야 하는데, 이 역할을 하는 것이 바로 선택자(selector)입니다. 그중에서도 가장 널리 쓰이는 두 가지가 마침표(.)를 사용하는 클래스 선택자와 해시(#)를 사용하는 아이디 선택자입니다. 두 선택자는 비슷해 보이지만 용도와 동작 방식이 분명히 다릅니다.
'.' 선택자 — 클래스 선택자
. 선택자는 클래스(class) 단위로 스타일을 적용하는 선택자입니다. 마침표 연산자로 스타일 클래스를 정의하면, 이 클래스를 여러 HTML 요소에 반복해서 재사용할 수 있습니다. 예를 들어 .blackBorder라고 정의한 스타일은 class="blackBorder" 속성을 가진 모든 요소에 동일하게 적용됩니다.
'#' 선택자 — 아이디 선택자
# 선택자는 특정 요소 단위로 스타일을 적용하는 선택자입니다. 해시(#) 기호 뒤에 오는 이름과 일치하는 id 속성을 가진 요소에만 스타일이 적용됩니다. HTML 문서에서 id는 고유해야 하므로, 한 페이지 안에서 같은 id를 가진 요소는 하나만 존재해야 합니다.
예제 코드
다음 예제는 여러 개의 div 요소에 . 선택자와 # 선택자를 함께 사용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS 선택자 예제</title>
<style>
.blackBorder {
border: 2px solid black;
}
#redDiv {
border: 2px solid red;
}
</style>
</head>
<body>
<div>테두리 없는 박스</div>
<div class="blackBorder">검은 테두리 박스</div>
<div id="redDiv">빨간 테두리 박스</div>
<div>테두리 없는 박스</div>
<div class="blackBorder">검은 테두리 박스</div>
</body>
</html>실행 결과
- 첫 번째, 네 번째 div — 어떤 선택자도 적용되지 않아 테두리가 없습니다.
- 두 번째, 다섯 번째 div —
class="blackBorder"가 적용되어 검은색 2px 실선 테두리가 표시됩니다. - 세 번째 div —
id="redDiv"가 적용되어 빨간색 2px 실선 테두리가 표시됩니다.
핵심 차이점 비교
| 구분 | '.' 선택자 | '#' 선택자 |
|---|---|---|
| 적용 대상 | class 속성 | id 속성 |
| 재사용 | 여러 요소에 반복 적용 가능 | 문서당 하나의 요소에만 적용 |
| 우선순위 | 낮음 (0,0,1,0) | 높음 (0,1,0,0) |
| 주요 용도 | 공통 스타일 묶기 | 고유 요소 개별 제어 |
정리하면, 여러 요소에 같은 스타일을 반복 적용하려면 '.'(클래스) 선택자를, 페이지에서 유일한 특정 요소 하나만 정확히 지정하려면 '#'(아이디) 선택자를 사용하는 것이 좋습니다. 또한 아이디 선택자가 클래스 선택자보다 우선순위(specificity)가 높기 때문에, 두 스타일이 충돌하는 경우 '#' 선택자의 스타일이 우선 적용된다는 점도 기억해 두면 유용합니다.