CSS에는 여러 가지 선택자가 있으며, 이를 통해 HTML 요소를 스타일링할 수 있다. 여기에서는 다양한 CSS 선택자와 그 예시를 소개한다.
기본 선택자
1. 전체 선택자 (*) : 문서 내의 모든 요소를 선택한다.
* {
margin: 0;
padding: 0;
}2. 태그 선택자
특정 태그를 가진 모든 요소를 선택한다.
p {
font-size: 16px;
}
3.클래스 선택자 (.)
특정 클래스를 가진 모든 요소를 선택한다.
.highlight {
background-color: yellow;
}
4.아이디 선택자 (#)
특정 아이디를 가진 요소를 선택한다.
#header {
background-color: blue;
color: white;
}
후손 선택자
- 특정 요소의 후손 요소를 선택한다. 후손 선택자는 부모와 후손 요소 사이에 공백을 사용하여 지정한다.
div p {
color: red;
}
인접 형제 선택자 (+)
- 특정 요소의 다음에 오는 형제 요소를 선택한다.
h1 + p {
margin-top: 10px;
}일반 형제 선택자 (~)
- 특정 요소 뒤에 오는 모든 형제 요소를 선택한다.
h1 ~ p {
color: green;
}그룹 선택자 (,)
- 여러 요소를 동시에 선택한다. 쉼표로 구분하여 선택할 수 있다.
h1, h2, h3 {
font-family: Arial, sans-serif;
}예시
다음은 위에서 설명한 선택자들을 사용하는 예시이다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 선택자 예제</title>
<style>
/* 전체 선택자 */
* {
margin: 0;
padding: 0;
}
/* 태그 선택자 */
p {
font-size: 16px;
}
/* 클래스 선택자 */
.highlight {
background-color: yellow;
}
/* 아이디 선택자 */
#header {
background-color: blue;
color: white;
padding: 10px;
}
/* 후손 선택자 */
div p {
color: red;
}
/* 인접 형제 선택자 */
h1 + p {
margin-top: 10px;
}
/* 일반 형제 선택자 */
h1 ~ p {
color: green;
}
/* 그룹 선택자 */
h1, h2, h3 {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<header id="header">
<h1>웹사이트 제목</h1>
</header>
<div>
<h2>섹션 제목</h2>
<p>이것은 첫 번째 단락입니다.</p>
<p class="highlight">이것은 강조된 단락입니다.</p>
<p>이것은 두 번째 단락입니다.</p>
</div>
<h1>독립된 제목</h1>
<p>인접한 형제 단락입니다.</p>
<p>일반 형제 단락입니다.</p>
</body>
</html>