![[2021/12/29]국비지원 CSS3 9-(5) 과제2](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fer6QPl%2Fbtrr4xx2RVF%2FAAAAAAAAAAAAAAAAAAAAAHUAp3DWFYx2odoWyIB6sXIVdLrpmIcf_tJP6_CyPnUr%2Fimg.gif%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D%252BSBfTWWDY3ywKevYgvG%252F7q0sU28%253D)
과제2 메뉴
활용 psuedo-class :first-child, :last-child
동작 활용 :hover
기능 : 첫번째 a를 클릭하면 N사 메인화면으로 이동
작업내용
<!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">
ul{list-style: none;font-family:Doutum,"돋움",sans-serif;font-size: 12px;}
/* font-size 수정 */
li{float:left;border-right:1px solid #818181;box-shadow: 1px 2px 5px rgba(0,0,0,0.5);
background:#8e8e8e;background:linear-gradient(to bottom,#c0c0c0 0%,#8e8e8e 100%);}
li:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px;}
li:last-child{border:none;border-top-right-radius:5px; border-bottom-right-radius:5px;}
li:hover{background:#4b4b4b;background:linear-gradient(to bottom,#383838 0%,#4b4b4b 100%);}
a{display:inline-block;color:#000;text-decoration:none;text-shadow:0px 1px 1px #fff;padding:10px 30px;}
a:hover{color:#fff;}
</style>
</head>
<body>
<ul>
<li><a href="https://www.naver.com">Home</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Profile</a></li>
</ul>
</body>
</html>
결과물
