Types of Selectors

CSS 스타일을 적용할 대상을 지목하는 **CSS 선택자(Selectors)**의 종류에 대해 알아보겠습니다.

선택자를 얼마나 정확하게 사용하느냐에 따라 코드의 효율성과 유지보수성이 결정됩니다.

---

1. Universal Selector (전체 선택자)

페이지에 있는 모든 요소를 한꺼번에 선택합니다.

• 기호: 별표(*)를 사용합니다.
• 용도: 브라우저마다 조금씩 다른 기본 여백(margin, padding)을 초기화하거나, 모든 요소에 동일한 글꼴이나 박스 크기 기준(box-sizing)을 정할 때 주로 사용합니다.

CSS

 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

---

2. Type Selector (타입 선택자 / 요소 선택자)

특정 HTML 태그 이름을 직접 사용하여 해당 태그를 모두 선택합니다.

• 특징: 페이지 내의 모든 해당 태그에 스타일이 일괄 적용됩니다.
• 용도: 웹사이트 전체의 기본 문단 스타일(p)이나 제목 스타일(h1)을 정할 때 유용합니다.

CSS

 

p {
  color: #333;
  line-height: 1.6;
}

---

3. Class Selector (클래스 선택자)

HTML 요소의 class 속성값을 기준으로 선택합니다.

• 기호: 점(.) 뒤에 클래스 이름을 붙여 사용합니다.
• 특징: 한 페이지 내에서 여러 번 반복해서 사용할 수 있어 가장 활용도가 높습니다.
• 용도: 비슷한 스타일을 여러 요소에 공통적으로 입힐 때 사용합니다.

CSS

 

.highlight {
  background-color: yellow;
  font-weight: bold;
}

---

4. ID Selector (아이디 선택자)

HTML 요소의 id 속성값을 기준으로 선택합니다.

• 기호: 샵(#) 뒤에 아이디 이름을 붙여 사용합니다.
• 특징: 한 페이지 내에서 단 하나의 요소에만 고유하게 사용해야 합니다.
• 용도: 페이지 내에서 유일한 영역(예: #header, #footer, #main-nav)을 지정할 때 주로 쓰입니다.

CSS

 

#main-banner {
  width: 100%;
  height: 400px;
}

---

5. Group Selector (그룹 선택자)

여러 선택자에 동일한 스타일을 한꺼번에 적용하고 싶을 때 사용합니다.

• 기호: 쉼표(,)를 사용하여 선택자들을 나열합니다.
• 특징: 코드를 중복해서 쓰지 않아도 되므로 파일 용량이 줄어들고 가독성이 좋아집니다.

CSS

 

/* h1, h2, p 태그 모두 가로 중앙 정렬을 적용 */
h1, h2, p {
  text-align: center;
}

---

📋 선택자 종류 및 우선순위 요약

선택자 종류	기호	예시	우선순위 점수
Universal	*	* { ... }	0점
Type	태그명	div { ... }	1점
Class	.	.container { ... }	10점
Id	#	#header { ... }	100점
Group	,	h1, h2 { ... }	각자 계산

---

학습 정리

• 가급적 **클래스 선택자(.)**를 중심으로 스타일을 짜는 것이 재사용성과 확장성 측면에서 가장 유리합니다.
• 아이디 선택자(#)는 우선순위가 너무 높아서 나중에 스타일을 덮어쓰기 힘들 수 있으니 꼭 필요한 경우에만 신중히 사용하세요.
• 그룹 선택자(,)를 잘 활용하면 CSS 파일의 전체 길이를 획기적으로 줄일 수 있습니다.

---

가장 기초가 되는 5가지 선택자를 정복하셨습니다!

---