선택자(Selector)

선택자(Selector)

CSS에서 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며 요소를 선택할 때 세밀한 선택이 가능합니다. 다양한 유형을 살펴보고 작동 방식을 살펴보겠습니다.

선택자란 무엇인가?

CSS에서 선택자란 HTML에 CSS 속성값을 적용하기 위해 어떤 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다.

선택자 목록

CSS를 사용하려는 항목이 두 개 이상인 경우 모든 개별 선택자에 적용되도록 개별 선택자를 선택자 목록으로 결합할 수 있습니다.

h1 {
    color: blue;
}
.hh {
    color: blue;
}

h1, .hh {
    color: blue;
}

h1,
.hh {
    color: blue;
}
.hh {
    color: blue;
}

선택자의 유형

기본 선택자

태그, 클레스, 아이디를 선택하여 스타일을 부여 하는 방법

속성 선택자(Attribute selectors)

특정 속성 및 속성의 값을 선택하여 스타일을 부여하는 방법

의사 클레스(Pseudo-classes)

요소의 특정 상태를 선택하여 스타일을 부여하는 방법

유사 요소(Pseudo-elements)

요소의 특정 내용을 선택하여 스타일을 부여하는 방법

결합자(Combinators)

기본 선택자 간의 계층를 통해 선택하여 스타일을 부여하는 방법

더 알아보기