CSS 구조

CSS에서 요소를 선택하는 방법은 여러 가지가 있으며, 대표적으로 태그 선택자(Tag Selector), 클래스 선택자(Class Selector), 아이디 선택자(ID Selector) 가 있습니다. 이들의 상관관계와 계층 구조(hierarchy)에 대해 정리해보겠습니다.

---

1. CSS 선택자의 기본 개념

(1) 태그 선택자 (Tag Selector)

• 특정 HTML 태그를 선택하여 스타일을 적용하는 방법입니다.

• 문서 내 해당 태그를 가진 모든 요소에 스타일이 적용됩니다.

p {
  color: blue;
  font-size: 16px;
}

<p>이 문장은 파란색입니다.</p>
<p>이 문장도 파란색입니다.</p>

✅ 특징

• 재사용성이 높음 (같은 태그를 가진 모든 요소에 적용)

• 하지만 범위가 넓어 세밀한 조정이 어려움

---

(2) 클래스 선택자 (Class Selector)

• 특정 클래스명을 가진 요소를 선택하여 스타일을 적용합니다.

• .(점) 기호를 사용하여 선택합니다.

.text-red {
  color: red;
}

<p class="text-red">이 문장은 빨간색입니다.</p>

✅ 특징

• 여러 요소에 동일한 스타일을 적용 가능

• 필요할 때마다 원하는 요소에 적용 가능 (재사용성 높음)

• 태그 선택자보다 우선순위가 높음

---

(3) 아이디 선택자 (ID Selector)

• 특정 아이디를 가진 요소 하나에만 스타일을 적용합니다.

• #(샤프) 기호를 사용하여 선택합니다.

#unique-text {
  font-weight: bold;
}

<p id="unique-text">이 문장은 굵게 표시됩니다.</p>

✅ 특징

• 한 문서에서 고유한(unique) 요소에만 적용 (한 번만 사용)

• 태그 선택자나 클래스 선택자보다 우선순위가 높음

• 재사용성이 낮음 (같은 스타일을 여러 요소에 적용할 수 없음)

---

2. CSS 선택자의 우선순위 (Hierarchy)

CSS에서는 여러 개의 스타일이 하나의 요소에 적용될 때 우선순위(Specificity)에 따라 어떤 스타일이 적용될지 결정됩니다.

우선순위 규칙

1. 태그 선택자 < 클래스 선택자 < 아이디 선택자

2. 스타일이 적용된 위치에 따라 다름

• 인라인 스타일 (style=”color: red;”) > **내부 스타일 (

1. !important가 적용된 스타일이 최우선

우선순위 예시

p {
  color: blue; /* (1) 태그 선택자 */
}

.text-red {
  color: red; /* (2) 클래스 선택자 */
}

#unique-text {
  color: green; /* (3) 아이디 선택자 */
}

p {
  color: purple !important; /* (4) !important 속성 */
}

<p id="unique-text" class="text-red">이 문장은 무슨 색일까요?</p>

✅ 적용되는 색상 순서

1. 태그 선택자 p → 파란색

2. 클래스 선택자 .text-red → 빨간색 (우선순위 상승)

3. 아이디 선택자 #unique-text → 초록색 (더 높은 우선순위)

4. !important가 적용된 태그 선택자 p → 보라색

결과적으로 보라색으로 표시됩니다.

---

3. CSS 선택자의 조합

여러 개의 선택자를 함께 사용할 수도 있습니다.

(1) 태그 + 클래스 선택자

p.text-red {
  color: red;
}

<p class="text-red">이 문장은 빨간색입니다.</p>

👉 p 태그이면서 text-red 클래스를 가진 요소만 선택됨

---

(2) 태그 + 아이디 선택자

p#unique-text {
  color: green;
}

<p id="unique-text">이 문장은 초록색입니다.</p>

👉 p 태그이면서 id=”unique-text”인 요소만 선택됨

---

(3) 자식 선택자 (>)

• 특정 부모 요소의 직속 자식만 선택

div > p {
  color: blue;
}

<div>
  <p>이 문장은 파란색입니다.</p>
  <span><p>이 문장은 영향을 받지 않습니다.</p></span>
</div>

---

(4) 후손 선택자 (공백)

• 특정 부모 요소 안의 모든 자손 요소 선택

div p {
  color: blue;
}

<div>
  <p>이 문장은 파란색입니다.</p>
  <span><p>이 문장도 파란색입니다.</p></span>
</div>

---

(5) 형제 선택자 (+, ~)

• A + B : A 바로 뒤에 있는 B 선택

• A ~ B : A 뒤에 나오는 모든 B 선택

h1 + p {
  color: red;
}

<h1>제목</h1>
<p>이 문장은 빨간색입니다.</p>
<p>이 문장은 영향을 받지 않습니다.</p>

---

4. 정리 (Hierarchy)

선택자 유형	예제	우선순위
태그 선택자	p {}	낮음
클래스 선택자	.text-red {}	중간
아이디 선택자	#unique-text {}	높음
인라인 스타일	<p style="color: red;">	매우 높음
!important	color: blue !important;	최상위

우선순위 비교

1. p { color: blue; } (태그 선택자)

2. .text-red { color: red; } (클래스 선택자, 우선순위 ↑)

3. #unique-text { color: green; } (아이디 선택자, 우선순위 ↑↑)

4. style=”color: orange;” (인라인 스타일, 우선순위 ↑↑↑)

5. color: purple !important; (최우선 적용)

---

결론

1. 태그 선택자 < 클래스 선택자 < 아이디 선택자 순으로 우선순위가 높음

2. 인라인 스타일이 더 높은 우선순위를 가짐

3. !important가 적용되면 모든 스타일을 무시하고 최우선 적용

4. 선택자 조합을 활용하면 더 정밀한 스타일 적용 가능

이제 CSS 선택자의 개념과 계층 구조가 확실해졌죠? 😊