F TYPE
CHECKLIST HTML
<!doctype html>
<html>
<meta charset="utf-8">
<title>F-1 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>
</
<!-- 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>
<div class="sub_bg"></div><!-- 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_left">
<ul>
<li><a href="#">하단메뉴 1</a></li>
<li><a href="#">하단메뉴 2</a></li>
<li><a href="#">하단메뉴 3</a></li>
</ul>
<p class="copy">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</p>
</div>
<div class="footer_right">
<select>
<option value="#">site 1</option>
<option value="#">site 2</option>
<option value="#">site 3</option>
</select>
</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;}
header .sub_bg {display: none; position:absolute; z-index: 49; left: 0; top: 80px; width: 1200px; height: 160px; background: #ddd;}
/* visual */
.visual {position: relative; overflow:hidden; width: 100%; height:300px;}
.visual .slides { display: none; position: absolute; left: 0; top: 0; z-index: 0; width: 1200px; height: 300px;}
.visual .slides:nth-of-type(1) {display: block;}
.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: 15px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; font-weight: bold;}
/* 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: 1200px; height: 100px; background: #eee; text-align: center; }
footer .footer_left { float: left; width: 980px; height: 100px;}
footer .footer_left ul > li {display: inline-block; margin: 20px;}
footer .footer_left .copy {font-weight: bold;}
footer .footer_right { float: left; width: 220px; height: 100px; margin-top: 30px; }
footer .footer_right select {width: 220px; height: 30px;}
/* 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").mouseover(function(){
$(this).find(".sub").stop().slideDown(400);
$(".sub_bg").stop().slideDown(400);
}).mouseout(function(){
$(this).find(".sub").stop().slideUp(400);
$(".sub_bg").stop().slideUp(400);
});
//visual fadein-out
var slides = 2;
var cnt = 0;
function slide_func(){
cnt = cnt == slides ? 0 : cnt + 1;
$(".slides").fadeOut(500);
$(".slides").eq(cnt).fadeIn(500);
}
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;
});
});
