[CSS] #03 CSS 기초이해, CSS 선택자 완벽 정리! 기본 선택자부터 가상 클래스까지 한 번에 배우기

 

 

안녕하세요, 토스트데브입니다!
CSS에서 스타일을 적용하기 위해서는 "어떤 요소에 적용할지"를 먼저 정확히 지정해야 합니다.
바로 이때 사용하는 것이 선택자(Selector)입니다.

선택자는 HTML 요소를 정확하게 찾아내고, 그 요소에 스타일을 입히는 역할을 합니다.
이번 글에서는 가장 많이 쓰이는 기본 선택자부터 고급 선택자까지 단계별로 정리해드릴게요!

 

 

1️⃣ 선택자란?

선택자(Selector)는 HTML 문서에서 스타일을 적용할 대상 요소를 지정하는 데 사용됩니다.
즉, CSS에서 선택자 { 속성: 값; } 형태로 스타일 규칙을 작성하면, 선택자에 해당하는 HTML 요소에 스타일이 적용됩니다.

✅ 예시:

p {
  color: blue;
}

👉 모든 <p> 태그에 파란색 글씨를 적용함.

 

 

2️⃣ 기본 선택자

✅ 태그 선택자 (Type Selector)

HTML 태그 이름을 그대로 선택자로 사용

h1 {
  font-size: 32px;
}

 

✅ 클래스 선택자 (.class)

HTML 요소에 부여한 클래스 속성을 기준으로 선택

.title {
  color: red;
}

<p class="title">이 문장은 클래스 선택자에 의해 스타일이 적용됨</p>

 

✅ 아이디 선택자 (#id)

HTML 요소의 고유한 id 값을 기준으로 선택

#main {
  background-color: lightgray;
}

<div id="main">아이디 선택자 적용</div>

 

 

3️⃣ 결합자(Combinator) 선택자

HTML 구조를 기반으로 요소 간 관계를 활용해 선택할 수 있습니다.

선택자	설명	예시
A B	A의 자손(하위 모든 요소 중 B)	div p {}
A > B	A의 직계 자식 B	ul > li {}
A + B	A 바로 뒤의 형제 요소 B	h1 + p {}
A ~ B	A 이후에 나오는 형제 요소 B 전체	h1 ~ p {}

 

 

4️⃣ 속성 선택자

HTML 요소의 속성(attribute)을 기준으로 스타일 지정

input[type="text"] {
  border: 1px solid #ccc;
}

👉 type="text"인 <input> 요소만 선택

기타 예시:

a[target="_blank"] { color: green; }

 

 

5️⃣ 가상 클래스 선택자 (Pseudo-class)

HTML 요소의 특정 상태를 선택

선택자	설명
:hover	마우스를 올렸을 때
:active	클릭 순간
:focus	입력 요소에 포커스 됐을 때
:first-child	형제 중 첫 번째 요소
:last-child	형제 중 마지막 요소
:nth-child(n)	n번째 자식 요소

✅ 예시

a:hover {
  text-decoration: underline;
}

 

 

6️⃣ 가상 요소 선택자 (Pseudo-element)

HTML 요소 내부의 특정 부분에 스타일 적용

선택자	설명
::before	요소 앞에 콘텐츠 삽입
::after	요소 뒤에 콘텐츠 삽입
::first-line	첫 줄만 스타일 적용
::first-letter	첫 글자만 스타일 적용

✅ 예시

p::first-letter {
  font-size: 200%;
  color: red;
}

 

 

7️⃣ 선택자 우선순위 (Specificity)

여러 스타일이 동시에 적용될 수 있을 때, 어떤 스타일이 우선 적용되는지 결정하는 기준입니다.

• !important > 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 태그 선택자

예:

p {
  color: blue;
}
p.text {
  color: red;
}
#main p.text {
  color: green;
}

👉 id="main" 아래의 .text 클래스가 있는 <p> 태그는 초록색이 됩니다.

 

 

8️⃣ 정리하며…

CSS 선택자는 HTML 요소에 스타일을 정확하게 입히기 위한 가장 기본적이고 중요한 도구입니다.
태그, 클래스, 아이디처럼 기초적인 선택자부터, 가상 클래스와 결합자까지 폭넓게 익혀두면 어떤 구조든 스타일을 자유자재로 제어할 수 있어요!

 

#CSS선택자 #CSS기초 #웹디자인 #프론트엔드기초 #CSS클래스 #아이디선택자 #가상클래스 #CSS우선순위 #웹개발입문 #스타일시트