[CSS] 선택자: 공백 하나로 의미가 달라지는 마법

---

CSS 선택자: 공백 하나로 의미가 달라지는 마법

웹 개발을 하다 보면 CSS 선택자 때문에 골머리를 앓는 경우가 종종 있다. 특히 선택자 사이에 공백 하나가 있느냐 없느냐에 따라 전혀 다른 의미를 갖게 되어 예상치 못한 스타일 문제가 발생하기도 한다. 오늘은 이 미묘하지만 강력한 CSS 선택자의 공백 유무에 따른 차이점에 대해 알아보는 시간을 가질 것이다.

---

1. 공백이 없는 선택자: 같은 요소의 여러 클래스를 선택하다

먼저, 공백이 없는 선택자 .class1.class2 형태를 살펴볼 것이다.

이 선택자는 .class1 클래스와 .class2 클래스를 동시에 가지고 있는 하나의 HTML 요소를 선택하는 방식이다. 즉, 두 클래스가 같은 요소에 함께 적용되어 있어야만 해당 CSS 스타일이 적용된다는 의미이다.

• 선택자 형식: .클래스1.클래스2
• 의미: .클래스1과 .클래스2를 모두 가지고 있는 바로 그 요소이다.

예시 HTML:

<button class="hamburger-button is-black">
  메뉴 아이콘
</button>

적용되는 CSS:

.hamburger-button.is-black {
  color: #000; /* 이 버튼의 글자색이 검은색이 될 것이다. */
}

만약 .hamburger-button과 is-black 클래스가 다른 요소에 각각 있다면 이 선택자는 아무것도 선택하지 못할 것이다.

---

2. 공백이 있는 선택자: 하위 요소를 선택하다

다음으로, 공백이 있는 선택자 .class1 .class2 형태를 알아볼 것이다.

이 선택자는 **하위 선택자(Descendant Selector)**라고 부른다. .class1 클래스를 가진 요소 안에 있는 (하위의) .class2 클래스를 가진 요소를 선택할 때 사용한다. '안에 있다'는 것은 바로 아래 자식 요소뿐만 아니라 손자, 증손자 등 모든 하위 요소를 포함하는 개념이다.

• 선택자 형식: .클래스1 .클래스2
• 의미: .클래스1을 가지고 있는 요소의 하위 요소 중에서 .클래스2를 가지고 있는 요소이다.

예시 HTML:

<button class="hamburger-button">
  <span class="material-icons is-black">close</span>
</button>

적용되는 CSS:

.hamburger-button .is-black {
  color: #000; /* .hamburger-button 안에 있는 <span> 요소의 글자색이 검은색이 될 것이다. */
}

이 경우, is-black 클래스는 <button> 태그가 아닌 <span> 태그에 적용되어 있으므로, 공백을 통해 상위 .hamburger-button과 하위 is-black을 연결해야만 스타일이 제대로 적용된다.

---

3. 핵심 요약 및 주의사항

• 공백 없음 (.a.b): **"둘 다 가지고 있는 바로 그 요소"**이다.
• 공백 있음 (.a .b): **"a를 가진 요소의 하위 요소 중 b를 가진 요소"**이다.

이 미묘한 차이를 이해하는 것이 CSS 디버깅과 효율적인 스타일링에 매우 중요하다. HTML 구조와 CSS 선택자의 관계를 명확히 파악하여 원치 않는 스타일 오류를 줄이고, 더욱 견고한 웹 페이지를 만들어 나가시길 바란다!

---