CSS에서 가장 중요한 개념 중 하나는 선택자(selector)이다. 선택자는 "어떤 HTML 요소에 스타일을 적용할지"를 지정하는 규칙이다. 이번 글에서는 기본 선택자 → 가상 선택자 → 속성 선택자 → 자손/후손 선택자 순으로 정리하고, 마지막에는 실무에서 자주 쓰이는 패턴을 소개한다.
기본 선택자 (Tag, Class, ID)
태그 선택자
HTML 태그 이름으로 요소를 선택한다.
p { color: blue; }
- 모든 <p> 태그의 텍스트 색상을 파란색으로 적용.
클래스 선택자
. 기호를 사용하며, 여러 요소에 동일 스타일을 적용할 때 사용한다.
.highlight { background-color: yellow; }
- <span class="highlight">텍스트</span> 부분이 노란색 배경.
아이디 선택자
# 기호를 사용하며, 한 문서에서 고유한 요소에 적용된다.
#main-title { font-size: 32px; }
- <h1 id="main-title">제목</h1> 요소만 적용된다.
실무 팁: 아이디 선택자는 너무 강력한 우선순위를 가지므로, 스타일링보다는 JS 조작 용도로 쓰는 경우가 많다. (스타일은 class 권장)
가상 선택자 (Pseudo-classes)
사용자 액션 기반
a:hover { text-decoration: underline; }
input:focus { border: 2px solid blue; }
- :hover → 마우스 올렸을 때
- :focus → 입력창에 커서가 들어갔을 때
상태 기반
input:checked { background-color: yellow; }
button:disabled { opacity: 0.5; }
- :checked → 체크박스/라디오 버튼 선택된 상태
- :disabled / :enabled → 입력 가능 여부
실무 팁: 사용자 경험(UX)을 살리기 위해 hover, focus, disabled는 거의 필수로 사용된다.
속성 선택자 (Attribute selectors)
속성 값에 따라 요소를 선택한다.
/* 정확히 일치 */
input[type="text"] { border: 1px solid gray; }
/* 값이 특정 문자로 시작 */
a[href^="https"] { color: green; }
/* 값이 특정 문자로 끝 */
a[href$=".pdf"] { font-weight: bold; }
/* 값에 특정 문자열 포함 */
[class*="btn-"] { padding: 8px; }
실무 팁:
input[type="checkbox"] 등으로 폼 스타일링에 자주 쓰인다.
class*="btn-" 같이 패턴을 활용해 여러 버튼 스타일을 한 번에 지정할 수 있다.
자손 선택자 vs 후손 선택자
자손 선택자 (>)
바로 아래 단계의 요소만 선택한다.
div > p { color: red; }
- <div><p>…</p></div>는 적용되지만
- <div><section><p>…</p></section></div>는 적용되지 않는다.
후손 선택자 (공백)
하위의 모든 단계 요소를 선택한다.
div p { color: blue; }
- <div> 안에 들어 있는 모든 <p>에 적용한다. (중첩 단계 상관 없음)
실무에서 자주 쓰이는 선택자 패턴
- 버튼 스타일링
button, .btn { padding: 10px 20px; border-radius: 8px; }
- 네비게이션 메뉴
nav ul li a:hover { background-color: #eee; }
- 폼 상태 스타일링
input:focus { outline: 2px solid #4a90e2; }
input:disabled { background: #f0f0f0; }
- 아이콘 버튼 패턴
[class^="icon-"] { width: 24px; height: 24px; }
정리하자면...
- 기본 선택자: 태그, 클래스, 아이디 (실무에서는 class 중심)
- 가상 선택자: hover, focus, checked, disabled 등 UX 핵심
- 속성 선택자: [attr=value], 패턴 매칭(^, $, *)으로 강력한 스타일링 가능
- 자손/후손 선택자: > vs 공백의 차이 명확히 이해해야 유지보수 쉬움
- 실무 패턴: 버튼, 네비게이션, 폼 스타일링에서 선택자 조합 필수
'Front > css' 카테고리의 다른 글
| CSS 레이아웃 속성 정리 (Flexbox 중심) (3) | 2025.08.31 |
|---|---|
| Bootstrap 활용 가이드 (4) | 2025.08.31 |
| CSS 단위 & 박스 모델 정리 (1) | 2025.08.31 |
| DOM Tree & CSS 선택자 원리 (0) | 2025.08.31 |
| CSS 기본 개념 & 적용 방법 (0) | 2025.08.31 |