D TYPE
CHECKLIST HTML <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> D TYPE</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script src="script/jquery-1.12.3.js" type="text/javascript"></script>
<script src="script/index.js" type="text/javascript"></script>
</head>
<body>
<div class="wrapper">
<header class="clerfix">
<!-- header code -->
</header>
<section class="visual">
<!-- visual code -->
</section>
<section class="contents clearfix">
<!-- tab_contents code -->
</div>
<div class="banner">
<!-- banner code -->
</div>
<div class="link">
<!-- link code -->
</div>
</section>
<footer>
<!-- footer code -->
</footer>
<div class="modal">
<!-- modal code -->
</div>
</div>
</body>
</html>
<!-- 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"><img src="images/img1.jpg" alt="이미지 1"><span>슬라이드 1</span></div>
<div class="slides"><img src="images/img2.jpg" alt="이미지 2"><span>슬라이드 2</span></div>
<div class="slides"><img src="images/img3.jpg" alt="이미지 3"><span>슬라이드 3</span></div>
<!-- tab_contents code -->
<div class="tab_content">
<ul class="first">
<li class="active">
<a class="tabs" href="#">공지사항</a>
<div class="notice">
<ul class="second">
<li><a href="#" class="btn_pop">공지사항1<span>2020.03.14</span></a></li>
<li><a href="#">공지사항1<span>2020.03.14</span></a></li>
<li><a href="#">공지사항1<span>2020.03.14</span></a></li>
<li><a href="#">공지사항1<span>2020.03.14</span></a></li>
</ul>
</div>
</li>
<li>
<a class="tabs" href="#">갤러리</a> width: 400px; height: 200px;
<div class="gallery">
<ul class="second">
<li><a href="#"><img src="images/icon1.jpg" alt="갤러리 1"></a></li>
<li><a href="#"><img src="images/icon2.jpg" alt="갤러리 2"></a></li>
<li><a href="#"><img src="images/icon3.jpg" alt="갤러리 3"></a></li>
</ul>
</div>
</li>
</ul>
</div><!-- banner code -->
<a href="#">
<img src="images/banner.jpg" alt="배너 1">
<span>배너</span>
</a><!-- link code -->
<a href="#">
<img src="images/contents.jpg" alt="바로가기 1">
<span>바로가기</span>
</a><!-- footer code-->
<div class="footer_logo"><img src="images/footer_logo.png" alt="푸터로고"></div>
<div class="copy">
<p>COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</p>
</div>
<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 { 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;}
/* tab_content */
.contents .tab_content { float: left; width: 400px; height: 200px; padding: 10px;}
.contents .first {position: relative; }
.contents .first > li { float: left; width: 80px; }
.contents .first > li > a {display: block; position: relative; left: 20px; z-index: 2; width: 80px; height: 30px; text-align: center; line-height: 30px; }
/* notice */
.contents .notice { position: absolute; left: 0; top: 30px; width: 380px; height: 150px; padding: 5px; margin-top: -1px; background: #fff; border: 1px solid #ddd;}
.contents .notice .second > li:nth-child(2n) { background: #ddd;}
.contents .notice .second > li > a { display: block; width: 100%; height: 35px; font-size: 13px; line-height: 34px;}
.contents .notice .second > li > a > span {float: right; }
/* gallery */
.contents .gallery { position: absolute; left: 0; top: 30px; width: 380px; height: 150px; padding: 10px; margin-top: -1px; background: #fff; border: 1px solid #ddd;}
.contents .gallery .second > li {float:left; width: 33.3333%; height: 130px; padding: 15px;}
.contents .gallery .second > li > a { display: block; width: 100%; height: 100%;}
.contents .gallery .second > li > a > img { display: block; width: 100%; height: 100%; object-fit: cover;}
.contents .tab_content .first > li.active > a { display: block; position: relative; z-index: 2; width: 80px; height: 30px; text-align: center; line-height: 30px; border: 1px solid #ccc; border-bottom: none; background: #fff;}
.contents .tab_content .first > li > a {background: #ddd; border: 1px solid #ccc;}
.contents .tab_content .first > li.active > div {display: block;}
.contents .tab_content .first > li > div {display: none;}
/* banner */
.contents .banner {position: relative; float: left; width: 400px; height: 200px; padding: 10px;}
.contents .banner a {display: block; position:relative; width: 100%; height: 100%;}
.contents .banner a > img {display: block; width: 100%; height: 100%; object-fit: cover;}
.contents .banner a > 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;}
/* link */
.contents .link {position: relative; float: left; width: 400px; height: 200px; padding: 10px;}
.contents .link a {display: block; position:relative; width: 100%; height: 100%;}
.contents .link a > img {display: block; width: 100%; height: 100%; object-fit: cover;}
.contents .link a > 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;}
/* footer */
footer {width: 100%; height: 100px; background: #ddd; text-align: center; }
footer .footer_logo {float: left; width: 220px; height: 100px; margin-top: 30px;}
footer .footer_logo a { width: 200px; height: 40px;}
footer .footer_logo img { width: 200px; height: 40px; object-fit: cover;}
footer .footer_right {float: left; width: 980px; height: 100px;}
footer .footer_right ul > li {display: inline-block; margin: 20px;}
footer .footer_right p { font-weight: bold;}
/* 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);
});
//visua 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);
//tabs
$(".tabs").click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
return false;
});
//modal
$(".btn_pop").click(function(){
$(".modal").css("display", "block");
return false;
});
$(".btn_close").click(function(){
$(".modal").css("display", "none");
return false;
});
});
