H TYPE
CHECKLIST
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>H TYPE</title>
<link href="css/index.css" type="text/css" rel="stylesheet">
<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>
<!-- header code -->
</header>
<div class="container">
<section class="visual">
<!-- visual code -->
</section>
<section class="contents clearfix">
<div class="tab_content">
<!-- tab_content code -->
</div>
<div class="banner">
<!-- banner code -->
</div>
<div class="link">
<!-- link -->
</div>
</section>
<footer>
<!-- footer code -->
</footer>
</div>
<div class="modal">
<!-- modal code-->
</div>
</div>
</body>
<!-- header code -->
<div class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></div>
<nav>
<ul class="open">
<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>
<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="배너">
<span>배너</span>
</a><!-- link code -->
<a href="#">
<img src="images/contents.jpg" alt="바로가기">
<span>바로가기</span>
</a><!-- footer code-->
<div class="footer_left">
<p class="copy">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</p>
</div>
<div class="footer_right">
<div class="sns">
<ul>
<li><a href="#"><img src="images/sns1.jpg" alt="에스엔에스1"></a></li>
<li><a href="#"><img src="images/sns2.jpg" alt="에스엔에스2"></a></li>
<li><a href="#"><img src="images/sns3.jpg" alt="에스엔에스3"></a></li>
</ul>
</div>
<div class="familysite">
<select>
<option value="#">패밀리사이트 1</option>
<option value="#">패밀리사이트 2</option>
<option value="#">패밀리사이트 3</option>
</select>
</div>
</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 {color: inherit; text-decoration: none; }
.clearfix::after {content: ""; display: none; clear:both;}
/* wrapper */
.wrapper {width: 1000px; height: 650px;}
header {float: left; width: 220px; text-align: center; margin: 0 auto;}
header .logo {width: 220px; height: 100px; padding: 10px; margin-top: 30px; }
header .lgoo a {display: block; width: 100%; height: 40px;}
header .lgoo img {display: block; width: 100%; height: 40px; object-fit: cover;}
/* nav */
header nav {width: 200px; margin: 0 auto; }
nav .open > li {display: block; width: 200px;}
nav .open > li > a {display: block; width: 100%; height: 40px; line-height: 40px; font-weight: bold; color: #fff; background: #000;}
nav .open > li:hover > a { color: #000; background: #fff;}
nav .sub {display: none;}
nav .sup > li {display: block; width: 200px;}
nav .sup > li > a {display: block; width: 100%; height: 40px; line-height: 40px; font-weight: bold; color: #fff; background: #ddd;}
nav .sup > li:hover > a { color: #666; background: #444;}
/* container */
.container {float: right; width: 780px; height: 650px;}
/* visual */
.visual {overflow: hidden; position: relative; width: 780px; height: 350px;}
.visual .slides {position: absolute; display: none; left: 0; top: 0; width: 100%; height: 100%;}
.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: 5px 10px; background: rgba(0, 0, 0, .6); color: #fff; font-weight: bold;}
/* contents */
.contents {width: 780px; height: 200px;}
/* tab_content */
.contents .tab_content { float: left; width: 33.333%; height: 200px; padding: 10px;}
.contents .first {position: relative; }
.contents .first > li { float: left; width: 80px; }
.contents .first > li > a {display: block; position: relative; z-index: 2; width: 80px; height: 30px; text-align: center; line-height: 30px; }
.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;}
/* notice */
.contents .notice { position: absolute; left: 0; top: 30px; width: 240px; 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: 34px; font-size: 13px; line-height: 34px;}
.contents .notice .second > li > a > span {float: right; }
/* gallery */
.contents .gallery { position: absolute; left: 0; top: 30px; width: 240px; height: 150px; padding: 10px; margin-top: -1px; background: #fff; border: 1px solid #ddd;}
.contents .gallery .second > li {float:left; width: 33.3333%; height: 100px;padding: 5px; margin-top: 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;}
/* banner */
.contents .banner {float: left; position:relative; width: 33.333%; height: 200px; padding: 10px;}
.contents .banner a {display: block; width: 100%; height: 100%}
.contents .banner img {display: block; width: 100%; height: 100%; object-fit:cover;}
.contents .banner span {position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 5px; background: rgba(0, 0, 0, .7); color: #fff; font-weight: bold;}
/* link */
.contents .link {float: left; position:relative; width: 33.333%; height: 200px; padding: 10px;}
.contents .link a {display: block; width: 100%; height: 100%}
.contents .link img {display: block; width: 100%; height: 100%; object-fit:cover;}
.contents .link span {position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 5px; background: rgba(0, 0, 0, .7); color: #fff; font-weight: bold;}
/* footer */
footer { width: 780px; height: 100px; text-align: center; }
footer .footer_left { float: left; width: 580px; height: 100px;}
footer .footer_left p {margin-top: 30px; font-weight: bold;}
footer .footer_right { float: right; width: 200px; height: 100px; }
footer .footer_right .sns > ul > li { display: inline-block; width: 40px; height: 40px; margin: 10px; }
footer .footer_right .sns > ul > li > a { display: block; width: 100%; height: 100%; }
footer .footer_right .sns > ul > li > a > img { display: block; width: 100%; height: 100%; object-fit: cover; }
footer .footer_right .familysite > select { width: 180px; 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 > 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;
$(".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;
});
});
