CSS 선택자란 무엇인가? 핵심 선택자 완벽 정리

CSS(Cascading Style Sheets)에서 선택자(selector)는 스타일을 적용하고자 하는 HTML 요소를 지정하는 패턴입니다. 웹 페이지에서 특정 요소나 요소 그룹을 찾아 디자인을 적용하려면 선택자의 개념을 먼저 이해하는 것이 필수입니다.

CSS의 주요 선택자 종류

아래 표는 CSS에서 가장 기본적으로 사용되는 핵심 선택자들을 정리한 것입니다.

1. 클래스 선택자(.class)

클래스 선택자는 마침표(.) 뒤에 클래스 이름을 붙여 사용하며, 같은 클래스를 공유하는 여러 요소에 한 번에 스타일을 적용할 수 있습니다. 재사용성이 뛰어나 실무에서 가장 널리 활용됩니다.

.demo {
  color: blue;
}

2. ID 선택자(#id)

ID 선택자는 해시(#) 뒤에 ID 값을 붙여 사용합니다. ID는 문서 안에서 고유해야 하므로 단 하나의 요소만 선택되며, 특정 요소를 정확하게 지정할 때 유용합니다.

#myid {
  background-color: yellow;
}

3. 전체 선택자(*)

전체 선택자는 별표(*)로 표기하며 문서의 모든 요소에 스타일을 일괄 적용합니다. 주로 기본 여백 초기화(reset) 작업에 활용됩니다.

* {
  margin: 0;
  padding: 0;
}

이 세 가지 선택자만 제대로 익혀도 CSS 스타일링의 절반은 마스터한 것과 같습니다. 각 선택자의 특징과 용도를 상황에 맞게 조합하여 사용하면 더욱 효율적인 스타일 코드를 작성할 수 있습니다.