CSS 선택자(Selector)를 사용하면 HTML 문서 안에서 원하는 요소만 골라 자유롭게 스타일을 적용할 수 있습니다. HTML DOM에서 요소를 선택하는 방법은 매우 다양하며, 상황에 맞는 선택자를 활용하면 더욱 효율적이고 체계적인 스타일링이 가능합니다.
기본 문법
CSS 선택자의 기본 문법은 다음과 같습니다.
선택자 {
/* 선언부 */
}선택자 뒤에 중괄호({ })를 열고, 그 안에 적용하고 싶은 스타일 속성과 값을 선언하면 됩니다. 아래 예제들을 통해 실제로 CSS 선택자를 활용해 요소를 스타일링하는 방법을 살펴보겠습니다.
예제 1: ID 선택자 활용하기
ID 선택자(#)는 특정 하나의 요소에만 고유하게 스타일을 적용할 때 사용합니다. 아래 예제에서는 id가 "one"인 이미지에만 반전(invert) 필터 효과를 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
#one {
filter: invert(85%);
}
</style>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
<img src="https://www.tutorialspoint.com/plsql/images/plsql-mini-logo.jpg">
</body>
</html>출력 결과
위 코드를 실행하면 id 속성이 "one"으로 지정된 첫 번째 이미지에만 색상 반전 필터가 적용되고, 두 번째 이미지는 원본 그대로 유지되는 것을 확인할 수 있습니다.
예제 2: 그룹 선택자 활용하기
쉼표(,)로 여러 선택자를 나열하면 여러 요소에 한 번에 동일한 스타일을 적용할 수 있습니다. 아래 예제에서는 div와 p 요소에 공통 스타일을 먼저 적용한 후, p 요소에만 추가 스타일을 덧입히는 방식을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div, p {
margin: 4px;
float: left;
height: 200px;
width: 300px;
box-shadow: inset 0 2px 4px olive;
background-image: url("https://www.tutorialspoint.com/sas/images/sas-mini-logo.jpg");
}
p {
background-image: url("https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg");
background-position: 50% 50%;
color: black;
}
</style>
</head>
<body>
<h2>Learning Tutorials</h2>
<div></div>
<p>Tutorials</p>
</body>
</html>출력 결과
실행 결과 div와 p 두 요소 모두 크기, 여백, 그림자 등의 공통 스타일이 적용되며, p 요소에는 별도로 지정한 배경 이미지와 텍스트 정렬 스타일이 추가로 반영됩니다.
