728x90
반응형
CSS에는 적용하고자하는 스타일의 범위를 지정하는데 선택자(selector)를 이용한다. 하나하나 범위를 지정하기보다는 CSS에 내장된 고급 선택자들로 더 편하게 작업을 해보자.
해당 예제는 Do IT! HTML + CSS + JS 웹 표준의 정석에서 일부 발췌 & 변형하서 사용하였으며 필자가 전부 만든 것이 아님을 밝힙니다.
1. 하위 선택자
제일 많이 이용할 선택자들 중 하나이다. 어떤 선택자의 하위에 존재하는 모든 요소에 해당 스타일을 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>descendant</title>
<style>
section p {
color: blue;
}
</style>
</head>
<body>
<p>
outside section
</p>
<section>
<p>
아직 온라인 예약 신청이... (p inside section)
</p>
<div>
<p>
가족실... (p inside div inside section)
</p>
</div>
</section>
</body>
</html>
2. 자식 선택자
부모요소 바로 아래에 있는 자식 요소 에게만 스타일을 적용하는 태그이다. 위의 것과는 다르게 손자 이하부터는 적용하지 않는다는 의미이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>childe</title>
<style>
section > p {
color: blue;
}
</style>
</head>
<body>
<p>
outside section
</p>
<section>
<p>
아직 온라인 예약 신청이... (p inside section)
</p>
<div>
<p>
가족실... (p inside div inside section)
</p>
</div>
</section>
</body>
</html>
여기서부터는 생소할 수 있다.
3. 인접 형제 선택자
같은 요소 안에 들어있는 가장 첫번째 해당 요소를 찾아서 스타일을 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>childe</title>
<style>
h1 + p {
color: white;
background-color: #222;
}
</style>
</head>
<body>
<h1>예약 방법 & 이용 요금</h1>
<p>아직 온라인 예약....</p> <!-- h1요소의 형제 요소중 첫번째 형제인 p에만 적용 -->
<p>가족실....</p>
<p>도미토리....</p>
</body>
</html>
4. 형제 선택자
같이 붙어있는 모든 형제 선택자에 해당 스타일을 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>childe</title>
<style>
h1 ~ p {
color: white;
background-color: #222;
}
</style>
</head>
<body>
<h1>예약 방법 & 이용 요금</h1>
<p>아직 온라인 예약....</p>
<p>가족실....</p>
<p>도미토리....</p>
</body>
</html>
이것 말고도 더 많은 선택자들이 있는데, 다음 포스팅에서는 "속성 선택자"를 포스팅해보도록 해야겠다.
728x90
반응형
'프로그래밍 > CSS' 카테고리의 다른 글
| [반응형] CSS 간단한 가변 요소 크기 단위 정리 (1) | 2023.12.28 |
|---|---|
| CSS margin padding 해도 안 사라지는 공백 (inline-block) (3) | 2023.12.21 |
| CSS 고급 선택자 2 - 속성 선택자 (0) | 2023.08.13 |
| CSS Flex 와 레이아웃 구조 쓰는 방법(23.08.30) 수정 (0) | 2023.05.31 |
