CSS 셀렉터 완전 정리

 

 

Web Development · CSS

CSS 셀렉터

태그, class, id, 그룹, 자손/자식, 링크 hover 선택자를 정리합니다.

시작 오늘 분석할 코드

이 폴더는 CSS 선택자, 스타일 속성, 리스트 메뉴와 애니메이션을 나누어 연습합니다. 선택자가 어떤 요소를 가리키는지, 속성이 어떤 시각 효과를 만드는지, 상태 선택자와 구조 태그가 어떻게 연결되는지 확인합니다.

body { background-color: linen; } .headline { color:brown; } #hot { background-color: darkorange; } div strong { color:red; } div > strong { color:blue; } a:hover { color: violet; }

tag태그 이름으로 요소를 선택합니다.

class여러 요소에 재사용 가능한 선택자입니다.

id특정 요소 하나를 선택합니다.

group쉼표로 여러 선택자를 묶습니다.

descendant하위 요소 전체를 선택합니다.

:hover마우스 오버 상태를 선택합니다.

---

1 태그 셀렉터

태그 셀렉터는 HTML 태그 이름으로 요소를 선택합니다. 원본은 body, h3, span 태그에 각각 배경색, 글자색, 정렬을 적용합니다.

선택자	대상	효과
body	문서 전체	linen 배경, blueviolet 글자
h3	제목	오른쪽 정렬, blue 글자
span	강조 단어	skyblue 배경, blue 글자
a	링크	색상과 밑줄 제어

---

2 class 셀렉터

class는 여러 요소에 반복해서 붙일 수 있는 이름입니다. .headline은 class만 보고 선택하고, div.help는 div이면서 help class인 요소만 선택합니다.

.help

class가 help인 모든 요소를 선택합니다.

div.help

div 태그 중 class가 help인 요소만 선택합니다.

---

3 id 셀렉터

id 셀렉터는 문서에서 특정 요소 하나를 가리킬 때 사용합니다. 원본의 #hot은 id가 hot인 p의 배경을 darkorange로 바꿉니다.

구분	표기	특징
태그	p	같은 태그 전체
class	.help	여러 요소 재사용
id	#hot	특정 요소 하나
복합	body.main	태그와 class 조건 동시 만족

---

 

반응형

 

4 그룹 셀렉터

h3, strong, em처럼 쉼표로 묶으면 여러 선택자에 같은 스타일을 한 번에 적용할 수 있습니다.

쉼표는 “그리고 각각”이라는 뜻입니다. h3 안의 strong이 아니라 h3, strong, em 세 대상을 모두 선택합니다.

---

5 자손과 자식 셀렉터

div strong은 div 안쪽 어딘가의 strong을 모두 선택하고, div > strong은 div의 직계 자식 strong만 선택합니다.

선택자	범위	예시
div strong	모든 하위 strong	p 안 strong도 포함
div > strong	직계 자식 strong	div 바로 아래 strong
#center strong	center 안 strong	노란 배경
.indent	class indent	들여쓰기

---

6 링크 상태 꾸미기

링크 꾸미기 예제는 기본 a 스타일에서 밑줄을 제거하고, hover 상태에서 violet 색과 밑줄을 적용합니다.

a

→

평소 링크

→

a:hover

→

마우스 오버

---

7 우선순위 감각

CSS는 여러 규칙이 같은 요소에 적용될 수 있습니다. 더 구체적인 선택자나 나중에 나온 규칙이 이기는 경우가 많습니다.

선택자	구체성	예시
strong	낮음	태그 전체
div strong	중간	div 안 strong
div > strong	중간	직계 strong
#center strong	높음	id 조건 포함

---

8 자주 하는 실수

실수	증상	해결
class 앞 점 누락	스타일이 적용되지 않습니다.	.headline처럼 씁니다.
id 앞 # 누락	hot 태그를 찾으려 합니다.	#hot처럼 씁니다.
자손/자식 혼동	원하지 않는 strong까지 바뀝니다.	공백과 > 차이를 확인합니다.
hover 모바일 과신	터치에서 다르게 느껴집니다.	클릭 상태도 고려합니다.
우선순위 오해	왜 색이 안 바뀌는지 모릅니다.	더 구체적인 규칙을 확인합니다.

---

9 복습 체크리스트

체크	통과 기준
tag	태그 이름으로 요소를 선택합니다.
class	여러 요소에 재사용 가능한 선택자입니다.
id	특정 요소 하나를 선택합니다.
group	쉼표로 여러 선택자에 같은 스타일을 줍니다.
descendant	공백 선택자는 하위 전체를 봅니다.
child	> 선택자는 직계 자식만 봅니다.

---

10 추가 테스트

테스트	확인 내용
span 추가	새 span에도 태그 셀렉터가 적용되는지 봅니다.
help class 이동	div와 p에서 색 차이를 확인합니다.
id 변경	#hot 스타일이 사라지는지 봅니다.
strong 위치 변경	직계/자손 선택 차이를 확인합니다.
link hover	마우스 진입/이탈 색 변화를 확인합니다.

---

11 선택자 디버깅 순서

CSS가 적용되지 않을 때는 선택자가 요소를 실제로 가리키는지부터 확인합니다. class, id, 태그 이름, 부모 구조를 차례로 보면 대부분의 문제를 찾을 수 있습니다.

순서	확인	이유
1	태그 이름	선택자가 실제 태그명과 맞는지 봅니다.
2	class 이름	HTML class와 CSS 점 선택자가 같은지 확인합니다.
3	id 이름	HTML id와 CSS # 선택자가 같은지 확인합니다.
4	부모 구조	div strong과 div > strong의 차이를 확인합니다.
5	규칙 순서	나중 규칙이 이전 규칙을 덮는지 봅니다.
6	브라우저 개발자도구	적용/취소된 CSS 규칙을 직접 확인합니다.

A

요소 선택개발자도구에서 문제 요소를 선택합니다.

B

적용 규칙 확인Styles 탭에서 어떤 선택자가 이겼는지 봅니다.

C

선택자 단순화복잡한 선택자를 태그나 class부터 다시 확인합니다.

D

구체성 조정필요하면 더 정확한 class 또는 id 조건을 사용합니다.

---

12 선택자 설계 기준

선택자는 너무 넓으면 의도하지 않은 요소까지 바꾸고, 너무 좁으면 재사용이 어렵습니다. 예제처럼 태그, class, id의 성격을 나누어 쓰는 것이 좋습니다.

상황	권장 선택자	이유
문서 전체 기본색	body	페이지 전역에 적용됩니다.
반복되는 경고 문구	.help	여러 요소에 재사용합니다.
하나뿐인 강조 영역	#hot	특정 요소 하나를 가리킵니다.
특정 영역 안 강조	#center strong	영역과 태그 조건을 함께 봅니다.
링크 상호작용	a:hover	상태에 따른 피드백을 줍니다.

---

13 추가 연습

연습	목표
새 class 만들기	.warning과 .info를 만들어 색을 다르게 적용합니다.
id 중복 제거	id는 하나의 요소에만 쓰는 원칙을 확인합니다.
자식 선택자 변경	div > strong을 div strong으로 바꿔 차이를 봅니다.
hover 배경 추가	a:hover에 background-color도 넣어 봅니다.
그룹 선택자 추가	h3, p, span을 묶어 공통 글꼴을 적용합니다.

---

14 실무 적용 메모

입문 예제에서는 다양한 선택자를 한 번에 보여주지만, 실제 CSS에서는 재사용 가능한 class 중심으로 설계하는 편이 유지보수에 좋습니다.

원칙	설명	예시
태그 선택자는 기본값	문서 전체 톤을 잡을 때 사용합니다.	body, h1, p
class는 컴포넌트	반복되는 시각 패턴에 씁니다.	.headline, .help
id는 제한적	하나뿐인 영역이나 JS 연결에 씁니다.	#hot
복합 선택자는 신중히	구조가 바뀌면 깨질 수 있습니다.	div > strong
상태 선택자 병행	hover와 focus를 함께 고려합니다.	a:hover, a:focus

1

기본 태그 스타일body와 제목 태그의 기본 톤을 정합니다.

2

반복 패턴 class화여러 곳에서 쓰는 스타일은 class로 분리합니다.

3

예외만 id 사용하나뿐인 요소에만 id를 씁니다.

4

구조 선택자 최소화HTML 구조가 바뀌어도 견디는 선택자를 우선합니다.

---

15 최종 점검

점검	통과 기준
태그 선택자	새 태그에도 자동 적용됩니다.
class 선택자	같은 class를 여러 요소에 재사용할 수 있습니다.
id 선택자	특정 요소 하나에만 쓰입니다.
자손 선택자	하위 전체 strong에 적용됩니다.
자식 선택자	직계 strong에만 적용됩니다.
hover 선택자	마우스 오버 상태에서만 적용됩니다.
그룹 선택자	쉼표로 묶은 모든 선택자에 같은 규칙이 적용됩니다.
복합 선택자	태그와 class 조건을 동시에 만족하는 요소만 선택됩니다.
링크 선택자	a와 a:hover 상태 차이를 확인할 수 있습니다.
우선순위	더 구체적인 선택자가 같은 속성을 덮을 수 있습니다.
재사용성	반복 스타일은 id보다 class로 분리하는 편이 좋습니다.
구조 의존성	div strong 같은 선택자는 HTML 구조 변경에 영향을 받습니다.
상태 접근성	hover 외에 focus 상태도 함께 고려할 수 있습니다.
디버깅	개발자도구에서 적용된 선택자와 취소된 규칙을 확인합니다.

---

핵심 한 줄 요약

selector선택자는 스타일을 적용할 대상을 정합니다.

specificityid와 복합 선택자는 태그 선택자보다 구체적입니다.

hover링크와 메뉴의 상호작용 피드백을 만듭니다.

Tags

#CSS#selector#hover#style#HTML#layout#animation#DOM#web#티스토리

▼ 티스토리 태그 입력란 복사용

CSS, selector, hover, style, HTML, layout, animation, DOM, web, 티스토리