CSS 선택자(selector)는 지정된 패턴과 일치하는 요소를 찾아 HTML 요소를 선택하는 데 사용됩니다. 선택자 안에 속성(property)과 값(value)을 선언함으로써 해당 요소에 원하는 스타일을 적용할 수 있습니다.
기본 문법
CSS에서 스타일을 선언하는 기본 문법은 다음과 같습니다.
선택자 {
속성: 값;
}CSS는 단순 선택자뿐만 아니라 속성 선택자, 의사 클래스(pseudo-class), 의사 요소(pseudo-element)를 제공하며, 표준 결합자(combinator)를 통해 여러 선택자를 조합할 수도 있습니다. 아래 표는 자주 사용되는 대표적인 선택자를 정리한 것입니다.
주요 선택자 종류
| 선택자 | 종류 | 설명 |
|---|---|---|
| * | 전체 선택자(Universal) | 문서 내 모든 요소와 일치합니다. |
| e | 타입 선택자(Type) | e 타입에 해당하는 모든 요소와 일치합니다. |
| e1 e2 | 하위 선택자(Descendant) | e1 요소의 하위에 있는 모든 e2 요소와 일치합니다. |
| e1 > e2 | 자식 선택자(Child) | e1 요소의 직계 자식인 e2 요소와 일치합니다. |
| e[bar="demo"] | 속성 선택자(Attribute) | bar 속성값이 정확히 "demo"인 e 요소와 일치합니다. |
| #id | ID 선택자(ID) | id 속성값이 "id"와 같은 요소와 일치합니다. |
예제 1: ::first-line 의사 요소 활용
다음 예제는 ::first-line 의사 요소를 사용하여 문단의 첫 번째 줄에만 별도의 스타일을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
text-decoration: overline black;
}
</style>
</head>
<body>
<h2>데모 제목</h2>
<p>이것은 데모용 텍스트입니다. 첫 번째 줄에만 다른 스타일이 적용됩니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다. 이것은 데모 텍스트입니다.</p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: 여러 선택자 조합하기
다음 예제는 의사 요소, 타입 선택자, ID 선택자를 함께 사용하여 하나의 문서에서 서로 다른 스타일을 동시에 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
background-color: lightgreen;
color: white;
text-decoration: overline red;
}
span {
font-size: 1.4em;
}
#demo {
box-shadow: inset 0 0 20px orange;
}
</style>
</head>
<body>
<h2>학생 정보</h2>
<p><span>학생</span> 정보가 이곳에 표시됩니다. <span id="demo">학생 성적</span>에는 2018년 7월에 실시된 최종 학기 시험 점수가 포함되며, 이와 함께 순위도 함께 표시됩니다.</p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
정리
CSS 선택자는 스타일을 적용할 대상을 정확하게 지정하는 핵심 도구입니다. 전체 선택자, 타입 선택자, 하위·자식 선택자, 속성 선택자, ID 선택자 등 상황에 맞는 선택자를 적절히 조합하면 더욱 유지보수하기 쉬운 스타일시트를 작성할 수 있습니다.