2. 🧩 CSS 선택자(Selector) 정복 — 태그부터 가상 클래스까지 완벽 가이드

---

HTML은 웹의 구조,
CSS는 그 구조를 꾸미는 언어,
그리고 “선택자(selector)”는 그 둘을 잇는 다리다.

이번 글에서는 가장 기초적인 태그 선택자부터,
실무에서 자주 쓰이는 고급 선택자와 가상 클래스까지
CSS 선택자 시스템의 모든 것을 단계별로 정리한다.

---

💡 1. CSS 선택자가 중요한 이유

“CSS의 80%는 ‘무엇을 선택하느냐’로 결정된다.”

CSS 선택자는 스타일을 적용할 대상(HTML 요소) 을 지정한다.
즉, 선택자를 잘 이해하면 HTML 구조가 커져도 효율적으로 스타일링할 수 있다.

---

🧱 2. 기본 선택자 3종 — CSS의 출발점

선택자 문법 예시 설명

태그 선택자	tag	p { color: blue; }	특정 HTML 태그 전체에 적용
클래스 선택자	.classname	.title { font-weight: bold; }	여러 요소에 동일 스타일 적용
아이디 선택자	#idname	#header { background: black; }	문서 내 하나의 고유한 요소에 적용

---

📌 실습 예시

<h1 class="main-title">CSS 선택자 정복</h1> 
<p id="desc">선택자는 스타일 적용의 핵심입니다.</p> 
<p class="note">이건 보조 설명입니다.</p> 

h1 { color: royalblue; } 
#desc { color: gray; } 
.note { color: orange; } 

💡 클래스는 재사용 가능, 아이디는 한 문서에 한 번만 쓰는 게 원칙이다.

---

🧩 3. 그룹 선택자와 다중 선택자

여러 요소에 동일한 스타일을 적용하고 싶을 때는 , 로 구분한다.

h1, h2, h3 { 
  font-family: 'Pretendard', sans-serif; 
  color: #333; 
} 

✅ 가독성과 유지보수가 개선된다.
HTML 구조가 복잡해질수록 “그룹 선택자”를 적극 활용하자.

---

📜 4. 후손(Descendant) & 자식(Child) 선택자

HTML 계층 구조를 기반으로 특정 영역만 선택할 수 있다.

종류 문법 예시 의미

후손 선택자	A B	div p	A 내부의 모든 B
자식 선택자	A > B	div > p	A 바로 아래에 있는 B만

예시 👇

<div class="box"> 
  <p>이건 자식 p</p> 
  <div> 
    <p>이건 후손 p</p> 
  </div> 
</div> 

.box p { color: blue; }      /* 후손 전부 선택 */ 
.box > p { color: red; }     /* 바로 아래 자식만 선택 */ 

💡 CSS 계층 구조를 활용하면 HTML 구조가 바뀌어도 제어가 깔끔해진다.

---

🧮 5. 형제(Sibling) 선택자

같은 부모 아래에 있는 형제 요소를 선택할 수 있다.

문법 설명 예시

A + B	A 바로 뒤의 형제 B	h2 + p
A ~ B	A 뒤의 모든 형제 B	h2 ~ p

<h2>제목</h2> 
<p>바로 뒤 문단</p> 
<p>그 뒤의 문단</p> 

h2 + p { color: red; } /* 첫 번째 p만 빨간색 */ 
h2 ~ p { color: gray; } /* 모든 p에 회색 */ 

---

🧩 6. 속성(Attribute) 선택자

HTML 속성(attribute)을 조건으로 특정 요소를 선택한다.

문법 의미 예시

[attr]	속성이 존재하는 요소	[disabled]
[attr="값"]	정확히 일치	input[type="text"]
[attr^="값"]	값이 ‘값’으로 시작	a[href^="https"]
[attr$="값"]	값이 ‘값’으로 끝	img[src$=".png"]
[attr*="값"]	값이 ‘값’을 포함	a[href*="naver"]

예시 👇

input[type="password"] { border: 2px solid crimson; } 
a[href^="https"] { color: green; } 
img[src$=".png"] { border-radius: 8px; } 

💬 속성 선택자는 폼, 링크, 이미지 등에서 실무 활용도가 높다.

---

🧠 7. 가상 클래스 선택자(Pseudo-Class)

“요소의 상태에 따라 스타일을 다르게 적용한다.”

선택자 의미 예시

:hover	마우스를 올렸을 때	button:hover
:active	클릭 중일 때	button:active
:focus	입력창 포커스 시	input:focus
:nth-child(n)	n번째 자식	li:nth-child(2)
:first-child	첫 번째 자식	p:first-child
:last-child	마지막 자식	p:last-child

button:hover { background: skyblue; } 
input:focus { outline: 2px solid dodgerblue; } 
li:nth-child(odd) { background: #f9f9f9; } 

💡 :hover, :focus 조합은 UI/UX에서 필수다.
예를 들어, 버튼이 반응하면 사용자 신뢰도가 올라간다.

---

🎨 8. 가상 요소 선택자(Pseudo-Element)

“요소의 특정 부분만 꾸미거나, 존재하지 않는 콘텐츠를 추가한다.”

선택자 설명 예시

::before	요소의 앞에 가상 콘텐츠 추가	h1::before { content: "🔥 "; }
::after	요소의 뒤에 가상 콘텐츠 추가	h1::after { content: " ✨"; }
::first-letter	첫 글자	p::first-letter { font-size: 2em; }
::first-line	첫 줄	p::first-line { color: gray; }

예시 👇

h2::before { 
  content: "📘 "; 
} 
p::first-letter { 
  font-size: 24px; 
  font-weight: bold; 
} 

💬 이 기능만 잘 써도 HTML을 수정하지 않고 아이콘, 강조효과, 장식 텍스트를 구현할 수 있다.

---

⚙️ 9. 선택자 우선순위 (Specificity)

CSS는 선택자의 구체성에 따라 어떤 스타일을 우선 적용할지 결정한다.

선택자 점수 예시

인라인 스타일	1000	<p style="color:red">
아이디 선택자	100	#header
클래스 / 속성 / 가상클래스	10	.title, [type=text], :hover
태그 / 가상요소	1	p, ::after
전체 선택자(*)	0	* { ... }

예시 👇

p { color: gray; }        /* 점수 1 */ 
.text { color: blue; }    /* 점수 10 */ 
#main p { color: red; }   /* 점수 101 → 최종 적용 */ 

💡 점수가 높을수록 우선순위가 강하다.
단, 유지보수를 위해 !important 남용은 피해야 한다.

---

🧮 10. 전체 선택자(*)와 결합 선택자 요약

선택자 의미 예시

*	모든 요소 선택	* { margin: 0; padding: 0; }
A.B	A 태그 중 클래스 B	p.note
A#B	A 태그 중 아이디 B	div#main
A:hover	A 요소의 hover 상태	a:hover

💬 CSS 초기화(Reset) 코드에서 *은 자주 사용된다.
모든 태그의 여백을 0으로 초기화할 때 특히 유용하다.

---

🏁 11. 마무리 — “CSS 선택자를 이해하면, 디자인이 논리적으로 보인다”

CSS 선택자는 단순히 ‘꾸미는 대상’을 지정하는 게 아니라,
HTML 구조를 해석하는 사고 방식이다.

💬 “HTML의 의미를 이해할수록, 선택자는 더 단순해진다.”

다음 편에서는
✅ 3. 박스 모델(Box Model)과 레이아웃의 기본 — margin, padding, border
를 통해 웹 레이아웃의 뼈대인 박스 구조를 완벽히 익혀보자.

---