웹 디자인 기능사 실기 합격을 위한 영상입니다.
따라하면 누구나 딸 수 있는 자격증입니다.
끝까지 완주하시고 자격증 꼭 취득하세요^^
사용프로그램
brackets GO
인스타그램 보기 GO
포폴 만들기 스터디 모임 GO
도움이 되셨다면 구독과 좋아요!! click
모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
댓글은 영상을 제작하는데 많은 힘이 됩니다.
다 보셨으면. 꼭! 댓글 부탁드립니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹 디자인 기능사 - 탭메뉴</title>
<style>
/* reset */
* {margin: 0; padding: 0; font-size: 20px; color: #fff;}
a {color: #333; text-decoration: none;}
li {list-style: none;}
table {border-spacing: 0;}
.clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
#wrap {width: 1200px; margin: 0px auto;}
#side {float: left; width: 300px;}
#content {float: left; width: 900px;}
/* header */
#side {text-align: center;}
#side .logo {width: 300px; height: 150px; line-height: 150px; background: #d1c4e9; }
#side .nav {width: 300px; height: 700px; background: #b7a8d4}
/* banner */
#banner {width: 900px; text-align: center; height: 450px; line-height: 450px; background: #9575cd;}
/* contents */
#contents {width: 900px;}
#contents > div {float: left; width: 33.333333%; height: 300px; text-align: center; line-height: 300px;}
#contents > div.cont1 {background: #7e57c2;}
#contents > div.cont2 {background: #673ab7;}
#contents > div.cont3 {background: #5e35b1 ;}
/* footer */
#footer {width: 900px; text-align: center;}
#footer .foot1 {float: left; width: 200px; height: 100px; line-height: 100px; background: #5e35b1;}
#footer .foot2 {float: left; width: 700px; height: 50px; line-height: 50px; background: #512da8;}
#footer .foot3 {float: left; width: 700px; height: 50px; line-height: 50px; background: #4527a0;}
</style>
</head>
<body>
<div id="wrap">
<aside id="side">
<h1 class="logo">로고</h1>
<nav class="nav">
</nav>
</aside>
<section id="content">
<section id="banner">
<h2>이미지 슬라이드</h2>
</section>
<!-- //banner -->
<section id="contents" class="clearfix">
<div class="cont1"><h3>공지사항</h3></div>
<div class="cont2"><h3>갤러리</h3></div>
<div class="cont3"><h3>팝업</h3></div>
</section>
<!-- //contents -->
<footer id="footer">
<div class="foot1"><h3>로고</h3></div>
<div class="foot2"><h3>하단 메뉴</h3></div>
<div class="foot3"><h3>Copyright</h3></div>
</footer>
<!-- //footer -->
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
</script>
</body>
</html>
<div id="wrap">
<aside id="side">
<h1 class="logo">로고</h1>
<nav class="nav">
<ul>
<li><a href="#">Menu1</a>
<ul class="submenu">
<li><a href="#">SubMenu1</a></li>
<li><a href="#">SubMenu2</a></li>
<li><a href="#">SubMenu3</a></li>
</ul>
</li>
<li><a href="#">Menu2</a>
<ul class="submenu">
<li><a href="#">SubMenu1</a></li>
<li><a href="#">SubMenu2</a></li>
<li><a href="#">SubMenu3</a></li>
</ul>
</li>
<li><a href="#">Menu3</a>
<ul class="submenu">
<li><a href="#">SubMenu1</a></li>
<li><a href="#">SubMenu2</a></li>
<li><a href="#">SubMenu3</a></li>
</ul>
</li>
<li><a href="#">Menu4</a>
<ul class="submenu">
<li><a href="#">SubMenu1</a></li>
<li><a href="#">SubMenu2</a></li>
<li><a href="#">SubMenu3</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<section id="content">
<section id="banner">
<h2>이미지 슬라이드</h2>
</section>
<!-- //banner -->
<section id="contents" class="clearfix">
<div class="cont1"><h3>공지사항</h3></div>
<div class="cont2"><h3>갤러리</h3></div>
<div class="cont3"><h3>팝업</h3></div>
</section>
<!-- //contents -->
<footer id="footer">
<div class="foot1"><h3>로고</h3></div>
<div class="foot2"><h3>하단 메뉴</h3></div>
<div class="foot3"><h3>Copyright</h3></div>
</footer>
<!-- //footer -->
</section>
</div>
* {margin: 0; padding: 0; font-size: 20px; color: #fff;}
a {color: #333; text-decoration: none;}
li {list-style: none;}
table {border-spacing: 0;}
.clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
#wrap {width: 1200px; margin: 0px auto;}
#side {float: left; width: 300px;}
#content {float: left; width: 900px;}
/* header */
#side {text-align: center;}
#side .logo {width: 300px; height: 150px; line-height: 150px; background: #d1c4e9; }
#side .nav {width: 300px; height: 700px; background: #b7a8d4}
#side .nav li {text-align: center; background: #b39ddb;}
#side .nav li a {padding: 10px;display: block; color:#fff; background: rgba(0,0,0,0.3);}
#side .nav li a:hover {background: rgba(0,0,0,0.4);}
#side .nav li ul.submenu {display: none;}
#side .nav li ul.submenu a:hover {background: rgba(0,0,0,0.2);}
/* banner */
#banner {width: 900px; text-align: center; height: 450px; line-height: 450px; background: #9575cd;}
/* contents */
#contents {width: 900px;}
#contents > div {float: left; width: 33.333333%; height: 300px; text-align: center; line-height: 300px;}
#contents > div.cont1 {background: #7e57c2;}
#contents > div.cont2 {background: #673ab7;}
#contents > div.cont3 {background: #5e35b1 ;}
/* footer */
#footer {width: 900px; text-align: center;}
#footer .foot1 {float: left; width: 200px; height: 100px; line-height: 100px; background: #5e35b1;}
#footer .foot2 {float: left; width: 700px; height: 50px; line-height: 50px; background: #512da8;}
#footer .foot3 {float: left; width: 700px; height: 50px; line-height: 50px; background: #4527a0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".nav > ul > li").hover(
function(){
$(this).find(".submenu").stop().slideDown();
},function(){
$(this).find(".submenu").stop().slideUp();
});
</script>
728x90
