<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메뉴바 만들기</title>
<style>
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000; /* black */
}
div {
/* border: 1px solid blue; */
box-sizing: border-box;
}
#navigator { width: 80%; height: 40px;}
#nav { height: 100%; }
#nav > li {
float: left;
width: 100px;
height: 100%;
text-align: center;
}
#nav a {
font-size: 18px;
font-weight: 900;
width: 100%;
height: 100%;
display: block;
/* vertical-align: middle; */
line-height: 35px;
}
#nav a:hover {
color: skyblue;
scale: 1.08;
}
#nav > li > ul {
display: none;
}
/* a 요소에 마우스가 올라갔을 때 a 요소의 형제인 ul 요소 */
#nav > li > a:hover + ul {
display: block;
}
/* ul 요소에 마우스가 올라갔을 때 */
#nav > li > ul:hover {
display: block;
}
</style>
</head>
<body>
<div id="navigator">
<!-- ul#nav>(li>a)*5 -->
<ul id="nav">
<li><a href="#">Java</a></li>
<li><a href="#">Oracle</a></li>
<li>
<a href="#">Front-end</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li>
<a href="#">Server</a>
<ul>
<li><a href="#">JDBC</a></li>
<li><a href="#">Servlet</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">AJAX</a></li>
</ul>
</li>
<li><a href="#">Framework</a></li>
</ul>
</div>
</body>
</html>
전체 네비게이션 메뉴를 감싸는 컨테이너이다
<ul id="nav">
<li><a href="#">Java</a></li>
<li><a href="#">Oracle</a></li>
<li>
<a href="#">Front-end</a>
네비게이션 메뉴 항목을 담고 있는 순서없는 목록
<a href="#">Front-end</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
li 태그 Front-end를
ul태그 안에 다시 ul태그로 감쌌다
즉 서브메뉴를 사용하고 있다
<li>
<a>Front-end</a>
<ul>
li
li
<ul>
</li>
CSS 부분
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul, li에 적용되는
list-style-type : none;
순서없는 목록에 적용되는 기본 스타일을 없앤다
a {
text-decoration: none;
color: #000; /* black */
}
모든 a태그의 기본 스타일(밑줄)을 제거한다
글씨 색깔을 검정색으로 준다
div {
border: 1px solid blue;
box-sizing: border-box;
}
#navigator { width: 80%; height: 40px;}
네비게이션을 감싸는 div의 너비를 80%로
높이를 40px로 고정한다
#nav > li {
float: left;
width: 100px;
height: 100%;
text-align: center;
}
float : left가 적용된 모습
float lefr 적용이 안된 모습
텍스트를 중앙에 정렬한다
#nav a {
font-size: 18px;
font-weight: 900;
width: 100%;
height: 100%;
display: block;
line-height: 35px;
}
#nav a 후손 선택자 :
후손에는 자식, 자식의 자식 그 이하의 모든 후손 요소가 포함이 된다
#nav 내부에 있는 <a> 요소에 스타일이 적용이 된다
모든 <a> 링크는 글자 크기 18px 글자 굵기는 900으로 설정을 한다
인라인 요소 <a>태그를 블록요소로 만든다
line-height :는
텍스트의 줄 간격을 설정하는 속성이다
#nav > li > ul {
display: none;
}
하위메뉴(서브 메뉴) 화면에 표시가 되지 않도록 만든다.
/* a 요소에 마우스가 올라갔을 때 a 요소의 형제인 ul 요소 */
#nav > li > a:hover + ul {
display: block;
}
/* ul 요소에 마우스가 올라갔을 때 */
#nav > li > ul:hover {
display: block;
}
#nav > li > a:hover + ul {display : none}
#nav의 직계 자식인 li의 직계 자식인 a 요소에 마우스가 올라간 상태 : hover
a요소에 마우스가 올라간 상태에 display :block이 적용이 된다
그러면 display : none으로 설정된 ul에 요소를 보이게 만든다
+ ul 형제 선택자를 지정한다
왜 형제 선택자인가?
ul과 a는
li라는 같은 부모를 공유하고 있다