HTML 문서의 태그는 트리(계층) 구조로 이루어져 있다.
즉, 부모,형제,자식,후손 태그가 있다.
1. 부모태그의 후손태그
· 부모태그의 후손태그는 자식태그와 손자태그 모두 해당한다.
· 후손요소는 후손 선택자(스페이스바)를 이용하여 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식 + 후손선택자</title>
<style>
ul li a {color : red;}
/*공통 스타일시트*/
/*후손 선택자로 모든 메뉴를 red로 변경함*/
</style>
</head>
<body>
<nav>
<ul class="main-menu">
<li> <!-- 메인 메뉴 -->
<a href="#">menu01</a>
<ul class="sub-menu"> <!-- 서브 메뉴 -->
<li><a href="#">sub-menu01</a></li>
<li><a href="#">sub-menu02</a></li>
<li><a href="#">sub-menu03</a></li>
</ul>
</li>
<li><a href="#">menu02</a></li>
<li>
<a href="#">menu03</a>
<ul class="sub-menu3">
<li><a href="#">sub-menu01</a></li>
<li><a href="#">sub-menu02</a></li>
<li><a href="#">sub-menu03</a></li>
</ul>
</li>
<li><a href="#">menu04</a></li>
<li><a href="#">menu05</a></li>
</ul>
</nav>
</body>
</html>
2. 부모태그의 자식태그
· 부모태그의 자식태그는 자식태그만 해당한다.
· 메인 메뉴를 선택할 때는 자식 선택자를 사용하여 자식 요소만 선택한다.
· 자식요소는 자식 선택자(>)를 이용하여 선택한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식 + 후손선택자</title>
<style>
ul li a {color : red;}
/*공통 스타일시트*/
/*후손 선택자로 모든 메뉴를 red로 변경함*/
ul.main-menu > li > a {color : brown;}
/*개별 스타일시트*/
/* 메인 메뉴를 선택 할 때는 자식 선택자를 사용하여 자식 요소만 선택한다. */
ul.sub-menu3 > li > a {color : blue;}
/* 메인 메뉴만 개별적으로 선택하여 brown으로 적용한다.*/
</style>
</head>
<body>
<nav>
<ul class="main-menu">
<li> <!-- 메인 메뉴 -->
<a href="#">menu01</a>
<ul class="sub-menu"> <!-- 서브 메뉴 -->
<li><a href="#">sub-menu01</a></li>
<li><a href="#">sub-menu02</a></li>
<li><a href="#">sub-menu03</a></li>
</ul>
</li>
<li><a href="#">menu02</a></li>
<li>
<a href="#">menu03</a>
<ul class="sub-menu3">
<li><a href="#">sub-menu01</a></li>
<li><a href="#">sub-menu02</a></li>
<li><a href="#">sub-menu03</a></li>
</ul>
</li>
<li><a href="#">menu04</a></li>
<li><a href="#">menu05</a></li>
</ul>
</nav>
</body>
</html>
'국비지원 JAVA 풀스택 과정 > HTML+CSS3' 카테고리의 다른 글
| [HTML+CSS3] 형제선택자 (0) | 2022.09.27 |
|---|---|
| [HTML+CSS3] 상태 선택자, 속성 선택자 (0) | 2022.09.26 |
| [HTML+CSS3] 기본 선택자 (0) | 2022.09.26 |
| [HTML+CSS3] 스타일시트 기본 문법 (0) | 2022.09.26 |
| [HTML+CSS3] 회원가입 화면 만들기 (0) | 2022.09.23 |