CSS 선택자(Selector)란 무엇이며, 어떻게 사용하나요?

선택자(Selector)는 스타일이 적용되는 HTML 태그를 의미합니다. <h1>, <table>, <p> 등 문서 내의 어떤 태그든 선택자가 될 수 있습니다.

선택자의 개념

CSS에서 선택자는 "어떤 요소에 스타일을 적용할 것인가"를 지정하는 역할을 합니다. 브라우저는 선택자를 기준으로 해당 HTML 요소를 찾아낸 뒤, 중괄호({ }) 안에 선언된 스타일 속성들을 적용합니다.

다음 그림은 선택자가 무엇인지 보여줍니다.

선택자의 기본 문법

선택자는 다음과 같은 형태로 작성됩니다.

선택자 {
    속성: 값;
}

타입 선택자(Type Selector) 예제

가장 기본적인 선택자인 타입 선택자는 태그 이름 자체를 선택자로 사용합니다. 아래 예제는 문서 내 모든 <h1> 요소의 글자 색상을 변경하는 코드입니다.

h1 {
    color: #36CFFF;
}

이 코드가 적용되면 페이지 안의 모든 <h1> 제목이 하늘색 계열인 #36CFFF로 표시됩니다.

주요 선택자 종류

타입 선택자 외에도 CSS에는 다양한 선택자가 있습니다.

• 클래스 선택자(Class Selector): .className 형태로, 특정 클래스를 가진 요소를 선택합니다.
• ID 선택자(ID Selector): #idName 형태로, 고유한 ID를 가진 하나의 요소를 선택합니다.
• 전체 선택자(Universal Selector): *로 표기하며, 문서의 모든 요소를 선택합니다.
• 속성 선택자(Attribute Selector): [type="text"]처럼 특정 속성을 가진 요소를 선택합니다.

선택자를 잘 활용하면 HTML 구조를 수정하지 않고도 원하는 요소만 정확하게 스타일링할 수 있으므로, CSS 학습의 첫걸음으로 반드시 익혀야 하는 개념입니다.