C TYPE
CHECKLIST
HTML
<!doctype html>
<html>
<meta charset="utf-8">
<title>C TYPE</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
<script src="script/jquery-1.12.3.js" type="text/javascript"></script>
<script src="script/index.js" type="text/javascript"></script>
</html>
<body>
<div class="wrapper">
<header class="clearfix">
<!-- header code -->
</header>
<section class="visual">
<!-- visual code -->
</section>
<section class="contents">
<div class="notice">
<!-- notice code -->
</div>
<div class="gallery">
<!-- gallery code -->
</div>
<div class="banner">
<!-- banner code -->
</div>
</section>
<footer>
<!-- footer code -->
</footer>
<div class="modal">
<!-- modal code -->
</div>
</div>
</body>
<!-- header code -->
<div class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></div>
<nav class="clearfix">
<ul class="open clearfix">
<li><a href="#">MAIN - 1</a>
<ul class="sub">
<li><a href="#">sub 1 - 1</a></li>
<li><a href="#">sub 1 - 2</a></li>
<li><a href="#">sub 1 - 3</a></li>
<li><a href="#">sub 1 - 4</a></li>
</ul>
</li>
<li><a href="#">MAIN - 2</a>
<ul class="sub">
<li><a href="#">sub 2 - 1</a></li>
<li><a href="#">sub 2 - 2</a></li>
<li><a href="#">sub 2 - 3</a></li>
<li><a href="#">sub 2 - 4</a></li>
</ul>
</li>
<li><a href="">MAIN - 3</a>
<ul class="sub">
<li><a href="#">sub 3 - 1</a></li>
<li><a href="#">sub 3 - 2</a></li>
<li><a href="#">sub 3 - 3</a></li>
<li><a href="#">sub 3 - 4</a></li>
</ul>
</li>
<li><a href="#">MAIN - 4</a>
<ul class="sub">
<li><a href="#">sub 4 - 1</a></li>
<li><a href="#">sub 4 - 2</a></li>
<li><a href="#">sub 4 - 3</a></li>
<li><a href="#">sub 4 - 4</a></li>
</ul>
</li>
</ul>
</nav> <!-- visual code -->
<div class="slides cur"><img src="images/img1.jpg" alt="이미지1"><span>슬라이드1</span></div>
<div class="slides prev"><img src="images/img2.jpg" alt="이미지2"><span>슬라이드2</span></div>
<div class="slides next"><img src="images/img3.jpg" alt="이미지3"><span>슬라이드3</span></div>
<!-- notice code -->
<ul class="first">
<li><a href="#">공지사항</a>
<div class="info_wrap">
<ul class="second">
<li><a class="btn_pop" href="#">공지사항<span>2021.2.22</span></a></li>
<li><a href="#">공지사항<span>2021.2.22</span></a></li>
<li><a href="#">공지사항<span>2021.2.22</span></a></li>
<li><a href="#">공지사항<span>2021.2.22</span></a></li>
</ul>
</div>
</li>
</ul><!-- gallery code --> <ul class="first">
<li><a href="#">갤러리</a>
<div class="info_wrap">
<ul class="second">
<li><img src="images/icon1.jpg" alt="#"></li>
<li><img src="images/icon2.jpg" alt="#"></li>
<li><img src="images/icon3.jpg" alt="#"></li>
</ul>
</div>
</li>
</ul>
<!-- banner code -->
<a href="#">
<img src="images/banner.jpg" alt="배너"><span>배너</span>
</a>
<!-- footer code-->
<div class="footer_logo"><img src="images/footer_logo.png" alt="푸터로고"></div>
<p class="copy">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</p>
<div class="sns">
<a href="#"><img src="images/sns1.jpg" alt="에스엔에스1"></a>
<a href="#"><img src="images/sns2.jpg" alt="에스엔에스2"></a>
<a href="#"><img src="images/sns3.jpg" alt="에스엔에스3"></a>
</div><!-- modal code -->
<div class="info_wrap">
<p class="title">Lorem ipsum</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Incidunt, repudiandae, illum, quo voluptatem suscipit natus laborum delectus at
molestiae hic quia ad dolores culpa corrupti iste aspernatur expedita nesciunt autem
beatae vero? Doloremque, nihil expedita debitis assumenda ut iste quas explicabo magni
necessitatibus aliquam illum incidunt provident sunt perspiciatis nemo!</p>
<a class="btn_close" href="#">× close</a>
</div>
CSS @charset "utf-8";
* {margin: 0; padding: 0; box-sizing: border-box; list-style: none; font-family: "맑은 고딕";}
a {text-decoration: none; color: inherit; }
.clearfix::after {content: ""; clear:both; display: block; }
/* wrapper */
.wrapper { width: 1200px; height: 700px; margin: 0 auto;}
/* header */
header { position:relative; width: 100%; height: 100px; background: #ddd; }
header .logo {float:left; width: 220px; height: 100px; text-align: center; padding-top: 30px;}
header .logo a { display: block; width: 200px; height: 40px; }
header .logo img { display: block; width: 200px; height: 40px; object-fit: cover; }
/* nav */
header nav {float: right; width: 800px; margin: 40px 20px 0 0; text-align: center;}
header .open > li {position:relative; float: left; width: 25%;}
header .open > li > a {display: block; width: 100%; height: 100%; color: #fff; background: #000; font-weight: bold; line-height: 40px;}
header .open > li:hover > a {background: #fff; color: #000;}
header .sub {display: none; position: absolute; left: 0; top: 40px; z-index: 50;}
header .sub > li {width: 200px;}
header .sub > li > a {display: block; width: 100%; height: 100%; color: #fff; background: #ddd; font-weight: bold; line-height: 40px;}
header .sub > li:hover > a {background: #444; color: #666;}
/* visual */
.visual {position: relative; overflow: hidden; width: 100%; height: 300px;}
.visual .slides {position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 300px; }
.visual .slides > img {display: block; width: 100%; height: 100%; object-fit: cover;}
.visual .slides > span {position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); padding: 5px 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-weight: bold;}
.visual .slides.cur {opacity: 10; z-index: 10;}
.visual .slides.netx {opacity: 10; z-index: 5; transform:translateY(100%)}
.visual .slides.prev {opacity: 10; z-index: 5; transform:translateY(-100%)}
/* contents */
.contents { width: 100%; height:200px; background: #ddd;}
/* notice */
.contents .notice {float: left; width: 400px; height: 200px; padding: 10px}
.notice .first {position: relative;}
.notice .first > li {width: 80px;}
.notice .first > li > a {display: block; position: relative; left: 20px; z-index: 2; width: 80px; height: 30px; text-align: center; line-height:30px; background: #fff; border:1px solid #ddd; border-bottom: none; }
.notice .info_wrap {position: absolute; left: 0; top: 30px; width: 380px; height: 150px; padding: 5px; margin-top: -1px; background: #fff; border: 1px solid #ddd; }
.notice .info_wrap li:nth-child(2n) {background: #ddd;}
.notice .info_wrap li > a {display: block; width: 100%; height: 34px; line-height: 34px; font-size: 13px; }
.notice .info_wrap li > a > span {float: right; }
/* gallery */
.contents .gallery {float: left; width: 400px; height: 200px; padding: 10px}
.gallery .first {position: relative;}
.gallery .first > li {width: 80px;}
.gallery .first > li > a {display: block; position: relative; left: 20px; z-index: 2; width: 80px; height: 30px; text-align: center; line-height:30px; background: #fff; border:1px solid #ddd; border-bottom: none; }
.gallery .info_wrap {position: absolute; left: 0; top: 30px; width: 380px; height: 150px; padding: 5px; margin-top: -1px; background: #fff; border: 1px solid #ddd; text-align: center; }
.gallery .info_wrap li {float: left; width: 33.3333%; height: 108px; margin-top: 20px;}
/* banner */
.contents .banner {float: left; position: relative; width: 400px; height: 200px; padding: 10px}
.banner > a {display: block; width: 100%; height: 100%;}
.banner > a > img {display: block; width: 100%; height: 100%; object-fit: cover;}
.banner > a > span {position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); padding: 5px 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-weight: bold;}
/* footer */
footer {width: 100%; height: 100px; text-align: center;}
footer .footer_logo {float: left; width: 220px; height: 100px; padding: 10px;}
footer .footer_logo > a {display: block; width: 100%; height: 100%; }
footer .footer_logo > a > img {width: 100%; height: 100%; object-fit:cover;}
footer .copy {float: left; width: 780px; height: 100px; font-weight: bold; margin-top: 30px; }
footer .sns {float: left; width: 200px; height: 100px;}
footer .sns a {display: inline-block; margin-top: 30px;}
footer .sns img {float: left; width: 40px; height: 40px;}
/* modal */
.modal { display: none; position: fixed; left: 0; top: 0; z-index:11; width: 100%; height: 100%; background: rgba(0,0,0,0.7); }
.modal .info_wrap { width: 450px; height: 280px; padding: 15px; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.modal .title { font-weight: bold; font-size: 18px; margin-bottom: 20px; }
.modal .desc { margin-bottom: 20px; font-size: 16px; }
.modal .btn_close {float:right; padding: 5px; background: #888; color: #fff;}
jQuery
$(document).ready(function(){
$(".open > li").mouseover(function(){
$(this).find(".sub").stop().slideDown(400);
}).mouseout(function(){
$(this).find(".sub").stop().slideUp(400);
});
var slides = 2;
var cnt = 0;
function slide_func(){
cnt = cnt == slides ? 0 : cnt + 1; //정방향 아래에서 위로
//cnt cnt == 0 ? slides : cnt - 1; //역방향 위에서 아래로
var next_num = cnt == slides ? 0 : cnt + 1;
var prev_num = cnt == 0 ? slides : cnt - 1;
$(".slides").removeClass('cur prev next').css("transition", "none");
$(".slides").eq(cnt).addClass("cur").css("transition", "transform 0.3s");
$(".slides").eq(next_num).addClass("next").css("transition", "transform 0.3s");
$(".slides").eq(prev_num).addClass("prev").css("transition", "transform 0.3s");
}
setInterval(slide_func, 3000);
//modal
$(".btn_pop").click(function(){
$(".modal").css("display", "block");
return false;
});
$(".btn_close").click(function(){
$(".modal").css("display", "none");
return false;
});
});
