웹 디자인 기능사 실기 합격을 위한 영상입니다.
따라하면 누구나 딸 수 있는 자격증입니다.
끝까지 완주하시고 자격증 꼭 취득하세요^^
사용프로그램
brackets GO
인스타그램 보기 GO
포폴 만들기 스터디 모임 GO
도움이 되셨다면 구독과 좋아요!! click
모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
댓글은 영상을 제작하는데 많은 힘이 됩니다.
다 보셨으면. 꼭! 댓글 부탁드립니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>정부 24</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrap" class="clearfix">
<aside id="aside">
<h1><img src="images/logo01.jpg" alt="정부24"></h1>
<nav class="nav">
<ul>
<li class="active"><a href="#">서비스</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
<li><a href="#">정책정보</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
<li><a href="#">기관정보</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
<li><a href="#">고객센터</a>
<ul class="submenu">
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<section id="contents">
<article class="banner">
<div class="slideList">
<div class="slideImg">
<h2>페이드 효과 이미지1</h2>
<img src="images/banner01.jpg" alt="정부!!">
</div>
<div class="slideImg">
<h2>페이드 효과 이미지2</h2>
<img src="images/banner01.jpg" alt="정부!!">
</div>
<div class="slideImg">
<h2>페이드 효과 이미지3</h2>
<img src="images/banner01.jpg" alt="정부!!">
</div>
</div>
</article>
<article class="tab">
<ul>
<li class="active"><a href="#">자주 찾는 서비스</a>
<ul>
<li><a href="#"><img src="images/icon01.jpg" alt=""><span>주민등록표등폰</span></a></li>
<li><a href="#"><img src="images/icon02.jpg" alt=""><span>주민등록표등폰</span></a></li>
<li><a href="#"><img src="images/icon03.jpg" alt=""><span>주민등록표등폰</span></a></li>
<li><a href="#"><img src="images/icon04.jpg" alt=""><span>주민등록표등폰</span></a></li>
<li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰</span></a></li>
</ul>
</li>
<li><a href="#">키워드 서비스</a>
<ul style="display: none">
<li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
<li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
<li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
<li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
<li><a href="#"><img src="images/icon05.jpg" alt=""><span>주민등록표등폰2</span></a></li>
</ul>
</li>
</ul>
</article>
<article class="layer clearfix">
<div>
<h3>공지사항</h3>
<img src="images/icon06.jpg" alt="공지사항">
<ul>
<li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
<li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
<li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
</ul>
<a href="#" class="more">+</a>
</div>
<div>
<h3>공지사항</h3>
<img src="images/icon07.jpg" alt="공지사항">
<ul>
<li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
<li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
<li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
</ul>
<a href="#" class="more">+</a>
</div>
<div>
<h3>공지사항</h3>
<img src="images/icon08.jpg" alt="공지사항">
<ul>
<li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
<li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
<li>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나</li>
</ul>
<a href="#" class="more">+</a>
</div>
</article>
</section>
<footer id="footer" class="clearfix">
<h2><img src="images/logo02.jpg" alt="정부24"></h2>
<address>
서울 특별시 세종대로 209 행정안전부<br>
정부 콜센터 1588-2188<br>
Copyright © All right reserved
</address>
<div class="sns">
<ul>
<li><a href="#"><img src="images/icon09.jpg" alt="트위터"></a></li>
<li><a href="#"><img src="images/icon10.jpg" alt="네이버"></a></li>
<li><a href="#"><img src="images/icon11.jpg" alt="페이스북"></a></li>
</ul>
</div>
</footer>
</div>
<script src="script/jquery.min.js"></script>
<script src="script/custom.js"></script>
</body>
</html>
/* reset */
* {margin: 0; padding: 0;}
a {text-decoration: none; color: #333;}
li {list-style: none;}
.clearfix:before, .clearfix:after {content: ''; display: block; clear: both;}
/* layout */
#wrap {width: 1000px; margin: 0 auto; padding-top: 50px;}
#aside {float: left; width: 270px; }
#contents {float: right; width: 700px; }
#footer {float: left; width: 100%; background: #edf2f8}
/* aside */
#aside h1 {margin-bottom: 30px;}
#aside h1 img {width: 150px;}
#aside .nav li {position: relative; z-index: 1000; padding-bottom: 5px; background: #f1f1f1; padding: 10px;}
#aside .nav li a {font-size: 23px;}
#aside .nav li a:hover {text-decoration: underline;}
#aside .nav li.active a {color: blueviolet;}
#aside .nav li ul.submenu {display: none; width: 150px; position: absolute; right: -140px; top: 0;}
#aside .nav li ul.submenu li { }
#aside .nav li ul.submenu li a {display: block; font-size: 20px; color: #333; padding: 10px;
border-bottom: 1px solid #ccc;}
#aside .nav li ul.submenu li a:hover {text-decoration: none;}
/* banner */
.banner {height: 384px; }
.banner img {width: 100%; display: block;}
.slideList {width: 700px; position: relative;}
.slideList .slideImg {position: absolute; left: 0; top: 0;}
.slideList .slideImg h2 {position: absolute; left: 50%; top: 50%;
transform: translate(-50%,-50%); background: rgba(0,0,0,0.5); padding: 10px 30px;
border-radius: 25px;}
/* tab */
.tab {padding: 40px 0; height: 200px; position: relative; width: 100%;}
.tab img {width: 100px;}
.tab ul {text-align: center;}
.tab ul li {display: inline; padding: 5px;}
.tab ul li a {font-size: 24px; color: #999;}
.tab ul li ul {position: absolute; left: 0; top: 100px; width: 100%; overflow: hidden;}
.tab ul li ul li {width: 20%; float: left; box-sizing: border-box;}
.tab ul li ul li a {font-size: 14px;}
.tab ul li ul li a span {display: block;}
.tab ul li.active a {color: #000;}
/* layer */
.layer {background: #f7f7f7; padding: 15px;}
.layer > div {position: relative; float: left; width: 32%;
padding: 6% 3%; text-align: center; margin-right: 2%; background: #fff;
border: 2px solid #ccc; box-sizing: border-box;
}
.layer > div:last-child {margin-right: 0;}
.layer > div img {width: 100px; padding: 20px 0;}
.layer > div ul li {text-align: left; padding-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layer > div .more {position: absolute; right: 20px; top: 20px; border:1px solid #ccc;
border-radius: 50%; width: 15px; height: 15px;}
/* #footer */
#footer {padding: 10px; box-sizing: border-box; margin-top: 20px;}
#footer h2 {float: left;}
#footer h2 img {width: 80px;}
#footer address {float: left; font-style: normal; padding: 20px 0 0 20px;}
#footer .sns {float: right; margin-top: 20px;}
#footer .sns ul {overflow: hidden;}
#footer .sns li {float: left; padding-bottom: 5px;}
#footer .sns li img {width: 60px;}
//세로 메뉴
$(".nav > ul > li").hover(
function(){
$(this).find(".submenu").stop().slideDown();
},function(){
$(this).find(".submenu").stop().slideUp();
});
//slideList > slideImg (1) eq(0)
//slideList > slideImg (2) eq(1)
//slideList > slideImg (3) eq(2)
//이미지 슬라이드
$(".slideList").children("div:gt(0)").hide();
var currentIndex = 0;
//var currentIndex = 1;
//var currentIndex = 2;
setInterval(function(){
var next = (currentIndex + 1) % 3;
$(".slideList").find("div").eq(currentIndex).fadeOut();
$(".slideList").find("div").eq(next).fadeIn();
console.log("currentIndex="+ currentIndex);
console.log("next="+ next);
//currentIndex = 0
//next = 1
currentIndex = next;
},3000);
728x90
