![[2021/12/30]국비지원 CSS3 10-(4) navigation](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F7jYlG%2FbtrsfSAkcUI%2FAAAAAAAAAAAAAAAAAAAAAK8C8PTXeYypF7ZFwpiYmjHExAqNiuxFkjqCPxEXS_r1%2Fimg.gif%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DZLSIG3onsChCr7Da0WosIdZ3s88%253D)
hover & transition
navigation1
<!DOCTYPE html>
<html lang="en">
<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>네비1</title>
<style type="text/css">
*{padding:0;margin:0;}
ul{list-style-type: none;}
body{font-weight: bold;font-size: 14px;font-family: "굴림";}
a{text-decoration:none;}
nav>ul>li{position:relative;float:left;}
nav>ul>li>a{display: block;padding:20px 25px;background:#600;color:#fff;
transition:color 1s ease 0s;}
nav>ul>li:hover>a{color:#f90;}
nav>ul>li>ul{position:absolute;left:0;opacity:0;transition:opacity 1s linear 0s;}
nav>ul>li:hover>ul{opacity:1;}
nav>ul>li>ul>li{background:#d8afaf;height:0;transition:all 1s ease 0s;}
nav>ul>li:hover>ul>li{height:30px;padding:5px 0;}
nav>ul>li>ul>li>a{display:block;color:#900;padding: 5px 25px;width:140px;
transition:all 1s ease 0s;}
/* all 또는 color, background로 나눠도 ok */
nav>ul>li>ul>li>a:hover{color:#f90;background:#900;}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> 웹 개발</a>
<ul>
<li><a href="#"> 웹 디자인 </a></li>
<li><a href="#"> HTML5 + CSS3</a></li>
<li><a href="#"> JQuery</a></li>
<li><a href="#"> 웹 + 모바일</a></li>
</ul>
</li>
<li><a href="#"> 게시판 </a>
<ul>
<li><a href="#"> Q & A </a></li>
<li><a href="#"> 방명록</a></li>
</ul>
</li>
<li><a href="#"> 프로필 </a></li>
</ul>
</nav>
</body>
</html>
navigation2
<!DOCTYPE html>
<html lang="en">
<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>네비2</title>
<style type="text/css">
*{padding:0;margin:0;}
body{font-size:14px;font-family:"굴림";font-weight:bold;line-height: 40px;}
nav ul{list-style: none;}
nav li{float:left;}
nav a{text-decoration: none;}
nav>ul{width: 560px;height:40px;background-color: #39f;border-radius: 10px 10px 0 0;
margin:20px;position:relative;}
nav>ul>li>a{display:block;color:#fff;padding:0 30px;text-shadow: 1px 1px 1px #800;
background:#39f; border-radius: 10px 10px 0 0;
transition:background 0.5s ease 0;}
nav>ul>li:hover>a{background:#36f;}
nav>ul>li>ul{width:560px;height:40px;background: #33f;border-radius: 0 0 10px 10px;
display:none;position:absolute;left:0;}
nav>ul>li:hover>ul{display:block;}
nav>ul>li>ul>li>a{display:block;color:#fff;text-shadow:1px 1px 1px #100;
padding: 0 0 0 30px;transition:all 0.5s linear 0s;}
nav>ul>li>ul>li>a:hover{color:#120000;text-shadow: none;}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> 웹 개발 </a>
<ul>
<li><a href="#"> 웹 디자인 </a></li>
<li><a href="#"> HTML + CSS3 </a></li>
<li><a href="#"> JQuery </a></li>
<li><a href="#"> 웹 + 모바일 </a></li>
</ul>
</li>
<li><a href="#"> 게시판 </a>
<ul>
<li><a href="#"> Q & A </a></li>
<li><a href="#"> 방명록 </a></li>
</ul>
</li>
<li><a href="#"> 프로필 </a></li>
</ul>
</nav>
</body>
</html>
navigation3 ( 과제2 )
<!DOCTYPE html>
<html lang="en">
<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>네비3</title>
<style type="text/css">
*{padding:0;margin:0;}
body{font-size:14px;font-family:"굴림";font-weight:bold;line-height: 40px;}
nav ul{list-style: none;}
nav a{color:#fff;text-decoration: none;}
nav>ul{width:510px;height:160px;background: #39f;border-radius:10px;
margin:20px;position:relative;}
nav>ul>li{width:240px;padding-right:20px;padding-left:280px;border-radius: 10px;}
nav>ul>li>a{display:block;color:#fff;background:#39f;padding-left: 10px;
text-shadow: 1px 1px 1px #800;}
nav>ul>li:first-child>a{border-radius: 0 10px 0 0;}
nav>ul>li:last-child>a{border-radius:0 0 10px 0;}
nav>ul>li:hover>a{background:#36f;}
nav>ul>li>ul{float:left;left:0px;top:0;width:260px;height:160px;
border-radius:10px 0 0 10px;background: #33f;
padding:0 10px;position:absolute;opacity:0;
transition:opacity 1s ease 0s;}
nav>ul>li:hover>ul{opacity:1;}
nav>ul>li:hover>ul>li>a{text-shadow: 1px 1px 1px #800;}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#"> Home </a>
<ul>
<li><a href="#">home</a></li>
</ul>
</li>
<li><a href="#"> 웹 개발 </a>
<ul>
<li><a href="#"> 웹 개발 </a></li>
</ul>
</li>
<li><a href="#"> 게시판 </a>
<ul>
<li><a href="#"> 게시판 </a></li>
</ul>
</li>
<li><a href="#"> 프로필 </a>
<ul>
<li><a href="#">프로필</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
정식으로 사이트 짤 생각이면 브라우저 식별 대상은 꼭 신경 써줘야 함
결과물1
결과물2
결과물3
