CSS 요소 선택자란?
HTML 문서에서 특정 요소를 스타일링하려면 요소 선택자(element selector)를 사용하면 됩니다. 요소 선택자는 태그 이름을 그대로 선택자로 활용하는 가장 기본적인 CSS 선택 방식으로, 해당 태그로 작성된 모든 요소에 동일한 스타일이 일괄 적용됩니다.
예를 들어 p라고 작성하면 문서 내의 모든 <p> 요소가 선택됩니다. 아래 예제 코드를 직접 실행해 보면서 <p> 요소가 어떻게 선택되는지 확인해 보세요.
예제
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Learning</h2>
<p>Tutorials on web dev, programming, database, networking, etc.</p>
<p>Every tutorials has lessons with illustrations and figures.</p>
</body>
</html>코드 설명
위 예제에서 <style> 태그 안에 작성된 p { ... } 부분이 핵심입니다. 이 규칙에 따라 본문에 있는 두 개의 <p> 단락 모두 다음과 같이 표시됩니다.
- color: blue; — 글자 색을 파란색으로 지정합니다.
- background-color: orange; — 배경색을 주황색으로 지정합니다.
<h1>, <h2> 등 다른 요소에는 스타일이 적용되지 않고, 오직 <p> 태그로 작성된 요소만 선택된다는 점에 주목하세요. 이처럼 요소 선택자는 태그 이름만으로 원하는 요소를 간단하게 선택할 수 있는 방법입니다.