1. 미리 알아볼 내용
보통 CSS와 자바스크립트를 구분할 때 'CSS는 디자인할 때 사용하고, 자바스크립트는 사용자와 상호 작용할 때 사용한다'고 말합니다. 그런데 사실 CSS는 사용자와 상호 작용할 때도 사용할 수 있습니다. 프로젝트를 본격적으로 만들기 전에 상호 작용할 때 사용할 수 있는 CSS부터 알아봅니다.
1.1 동위 선택자
5장에서 CSS 선택자를 배웠습니다. [표 5-1]에서 CSS 선택자를 설명할 때 다루지 않은 선택자가 하나 있는데, 바로 '동위 선택자' 입니다. 동위 선택자는 동위 관계(같은 단계에 있는 것)에서 뒤에 위치한 태그를 선택할 때 사용합니다.
[표 13-1] 도우이 선택자
형태 |
설명 |
선택자 A + 선택자 B |
선택자 A 바로 뒤에 위치하는 선택자 B를 선택 |
선택자 A ~ 선택자 B |
선택자 A 뒤에 위치하는 선택자 B를 선택 |
조금 말이 어려우니 간단하게 예제를 살펴봅시다. 먼저 첫 번째 형태(+) 입니다.
<코드 13-1 + 선택자>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
h2 + * {
color: red;
}
</style>
</head>
<body>
<div class="section-a">
<h1>header</h1>
<h2>header</h2>
<h3>header</h3>
<h4>header</h4>
</div>
</body>
</html>
h2 태그는 div.section-a 태그 내부에 있습니다. 이러한 단계에 있고, 바로 뒤에 있는 태그를 선택하므로, header 글자를 입력한 h3 태그에만 색상이 적용됩니다.
이번에는 두 번째 형태(~) 입니다.
<코드 13-2> ~선택자
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
h2 ~ * {
color: red;
}
</style>
</head>
<body>
<div class="section-a">
<h1>header</h1>
<h2>header</h2>
<h3>header</h3>
<h4>header</h4>
</div>
<h3>content title</h3>
</body>
</html>
h2 태그 뒤에서 이러한 단계에 있고 뒤에 있는 모든 태그를 선택하므로, header 글자를 입력한 h3 태그와 h4 태그에 모두 색상이 적용됩니다.
1.2 input 태그를 활용한 풀다운 메뉴
그럼 동위 선택자를 활용해 풀다운 메뉴를 만들어 보겠습니다. 일일이 설명하는 것보다 실제 코드를 살펴보는 것이 훨씬 이해하기 쉬울 것입니다.
<코드 13-3> label 태그와 input 태그를 활용한 풀다운 메뉴
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
input:checked + div {
display: none;
}
</style>
</head>
<body>
<input type="checkbox" />
<div>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
</html>
체크된 input 태그 뒤에 있는 div 태그를 선택하는 선택자를 사용하고, display 속성을 none으로 변경하는 코드입니다. 단순한 코드로 이를 실행하면 다음과 같이 출력합니다.
이때 input 태그에 체크하면 뒤에 있는 div 태그가 사라집니다. 자바스크립트를 사용하지 않고도 사용자와 상호 작용을 한 것입니다.
4장 3.2절의 NOTE에서 설명한 것처럼 label 태그를 입력하면 for 속성에 적용된 input 태그가 활성화됩니다. 따라서 체크를 직접하지 않고 label 태그를 선택해서 체크할 수도 있습니다. 그럼 이러한 내용을 활용해서 간단한 모바일 웹 페이지를 작성해 봅시다.
