J TYPE
CHECKLIST HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>J 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="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>
</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 cur"><img src="images/img1.jpg" alt="이미지1"><span>슬라이드1</span></div>
<div class="slides next"><img src="images/img2.jpg" alt="이미지2"><span>슬라이드2</span></div>
<div class="slides prev"><img src="images/img3.jpg" alt="이미지3"><span>슬라이드3</span></div>
<!-- notie code -->
<ul class="first">
<li><a href="#">공지사항</a>
<div class="info_wrap">
<ul class="second">
<li><a href="#" class="btn_pop">공지사항1 <span>2021.04.21</span></a></li>
<li><a href="#">공지사항2 <span>2021.04.21</span></a></li>
<li><a href="#">공지사항3 <span>2021.04.21</span></a></li>
<li><a href="#">공지사항4 <span>2021.04.21</span></a></li>
</ul>
</div>
</li>
</ul><!-- gallery code -->
<ul class="first">
<li><a href="#">갤러리</a>
<div class="info_wrap">
<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><!-- banner code -->
<a href="#">
<img src="images/banner.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: block; clear:both; }
.wrapper {width: 1000px; height: 650px;}
header {float: left; width: 220px; height: 650px; padding: 10px; text-align:center;}
header .logo { width: 200px; height: 100px;}
header .logo > a {display: block; width: 100%; height: 100%; }
header .logo > img {display: block; width: 100%; height: 100%; object-fit:cover;}
header nav {width: 200px; text-align: center;}
nav .open > li {width: 200px; position:relative;}
nav .open > li > a { display:block; width: 100%; height: 40px; background: #ddd; color: #fff; line-height: 40px;}
nav .open > li:hover > a { background: #000; color: #fff; line-height: 40px;}
nav .sub {display: none; position: absolute; z-index: 100; left: 200px; top: 0;}
nav .sub li {width: 200px;}
nav .sub li > a { display:block; width: 100%; height: 40px; background: #ddd; color: #fff; line-height: 40px;}
nav .sub li:hover > a { background: #000; color: #fff; line-height: 40px;}
/* container */
.container {float: right; width: 780px; height: 650px;}
/* visual */
.visual {position: relative; overflow:hidden; width: 780px; height: 350px;}
.visual .slides {position:absolute; left: 0; top: 0; width: 100%; height: 100%;}
.visual .slides a {display: block; width: 100%; height: 100%;}
.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%); color:#fff; padding: 5px 10px; font-weight: bold; background: rgba(0, 0, 0, 0.7);}
.visual .slides.cur {opacity: 1; z-index: 10;}
.visual .slides.next {opacity: 1; z-index: 5; transform:translateY(100%);}
.visual .slides.prev {opacity: 1; z-index: 5; transform:translateY(-100%);}
/* contents */
.contents .notice {float: left; width: 260px; height: 200px; padding: 10px}
/* notice */
.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: 240px; 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: 260px; 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: 240px; 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;}
.gallery .info_wrap .second li img {display: block; width: 100%; height: 100%; padding: 5px; }
/* 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%); color:#fff; padding: 5px 10px; font-weight: bold; background: rgba(0, 0, 0, 0.7);}
/* 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").slideDown(400);
}).mouseout(function(){
$(this).find(".sub").slideUp(400);
});
//slides
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");
});
});
