HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JUST쇼핑몰</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap">
<header id="header">
<h1><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
<nav>
<ul class="navul">
<li class="gnb"><a href="#">탑</a>
<ul class="subMenu">
<li><a href="#">블라우스</a></li>
<li><a href="#">티</a></li>
<li><a href="#">셔츠</a></li>
<li><a href="#">니트</a></li>
</ul>
</li>
<li class="gnb"><a href="#">아우터</a>
<ul class="subMenu">
<li><a href="#">자켓</a></li>
<li><a href="#">코트</a></li>
<li><a href="#">가디건</a></li>
<li><a href="#">머플러</a></li>
</ul>
</li>
<li class="gnb"><a href="#">팬츠</a>
<ul class="subMenu">
<li><a href="#">청바지</a></li>
<li><a href="#">짧은바지</a></li>
<li><a href="#">긴바지</a></li>
<li><a href="#">레깅스</a></li>
</ul>
</li>
<li class="gnb"><a href="#">악세서리</a>
<ul class="subMenu">
<li><a href="#">귀고리</a></li>
<li><a href="#">목걸이</a></li>
<li><a href="#">반지</a></li>
<li><a href="#">팔찌</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main id="main">
<div class="slide">
<ul>
<li><a href="#"><img src="images/img1.jpg" alt="슬라이드이미지1"><span>쇼핑몰 홈페이지 새단장</span></a></li>
<li><a href="#"><img src="images/img2.jpg" alt="슬라이드이미지2"><span>이달의 쇼핑 이벤트</span></a></li>
<li><a href="#"><img src="images/img3.jpg" alt="슬라이드이미지3"><span>장바구니 할인 이벤트</span></a></li>
</ul>
</div>
<div class="contents">
<section class="board">
<h2 class="b01 on">공지사항</h2>
<ul class="b01">
<li><a href="#">신규회원 대상 할인 이벤트 안내 <span>2020.11.23</span></a></li>
<li><a href="#">S/S 시즌 신규 의류 신상품 안내 <span>2020.11.23</span></a></li>
<li><a href="#">반품/환불 규정에 대해 알려드립니다 <span>2020.11.23</span></a></li>
<li><a href="#">3월 재입고 품목을 알려드립니다 <span>2020.11.23</span></a></li>
</ul>
<h2 class="b02">갤러리</h2>
<ul class="b02">
<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>
</section>
<section class="banner">
<h2 class="hidden-title">배너</h2>
<a href="#"><img src="images/banner.jpg" alt="배너이미지"></a>
</section>
<section class="direct">
<h2 class="hidden-title">바로가기</h2>
<a href="#"><img src="images/direct.jpg" alt="바로가기이미지"></a>
</section>
</div>
</main>
<footer id="footer">
<div class="logo"><img src="images/footerLogo.png" alt="로고이미지"></div>
<div class="copyright"><span>COPYRIGHT©sssby WEBDESIGN. ALL RIGHTS RESERVED</span></div>
<div class="sns">
<ul>
<li><a><img src="images/sns1.jpg" alt="sns1"></a></li>
<li><a><img src="images/sns2.jpg" alt="sns2"></a></li>
<li><a><img src="images/sns3.jpg" alt="sns3"></a></li>
</ul>
</div>
</footer>
<div class="modal-wrap">
<div class="modal">
<h3>제목: 신규회원 대상 이벤트 안내</h3>
<p>
내용: 즐거운 쇼핑 환경을 위해 항상 노력하는 JUST 쇼핑몰입니다.
고객님들께 한 단계 더 나아가 보답하는 ON쇼핑몰이 되고자
신규회원 대상 10% 할인 이벤트를 실시하고 있습니다.
웹과 모바일에서 모두 이용 가능하며,
수준 높은 서비스를 위해 앞으로도 꾸준히 노력할 것을 약속드립니다.
</p>
<button type="button" class="close">닫기</button>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8"; /*필수작성*/
/* reset */
*{ margin: 0; padding: 0; vertical-align: top; box-sizing: border-box;}
html, body { width: 100%; height: 100%; background: #ffffff; color: #222328; }
ul, ol, li { list-style-type: none; }
a { text-decoration: none; color: inherit; display: inline-block; width: 100%; height: 100%; text-align: center; }
i, em, address { font-style: none; }
table { border-collapse: collapse; }
/* hidden */
.hidden-title { width: 1px; height: 1px; z-index: -9999999; text-indent: -9999999px; overflow: hidden; position: absolute !important; margin: -1px; font-size: 1px; }
/*modal*/
.wrap{ width: 1200px; height: auto; margin: 0 auto;}
/*header*/
#header{ width: 100%; height: 100px; background-color: #3370ff; display: flex; align-items: center; justify-content: space-between;}
#header h1 { width: 200px; height: 100px; }
#header h1 img{ margin-top: 30px; margin-left: 10px; }
#header nav { width: 800px; }
#header li { height: 40px; line-height: 40px; color: #fff; }
#header li:hover { background-color: rgba(0, 0, 0, 0.5); }
#header .navul { display: flex; align-items: center; justify-content: flex-start; }
#header .navul > li { width: 200px; }
#header .gnb > a{ font-size: 18px; font-weight: 500; }
#header .subMenu { display: none; position: relative; z-index: 2; background-color: #666; }
/*main*/
#main .slide { width: 100%; height: 300px; overflow: hidden;}
#main .slide li { position: relative; }
#main .slide ul > li span{ position: absolute; top: 20px; left: 20px; color: #Fff; }
#main .contents { display: flex; }
#main .contents section { width: 33.3%; height: 200px; }
#main .contents .board { position: relative;}
#main .contents .board h2 { cursor: pointer; height: 38px; line-height: 38px; padding: 0 10px; }
#main .contents .board h2.on { background-color: rgba(0, 0, 0, 0.3); }
#main .contents .board h2.b01 { position: absolute; left: 0; top: 0; }
#main .contents .board ul.b01 > li > a { text-align: left; display: flex; justify-content: space-between; padding: 0 10px; }
#main .contents .board ul.b01 > li > a span { float: right; }
#main .contents .board h2.b02 { position: absolute; left: 116px; top: 0; }
#main .contents .board ul { margin-top: 38px; }
#main .contents .board ul.b02 { display: none; }
#main .contents .board ul.b02 li { display: inline-block; }
/*footer*/
#footer { height: 100px; display: flex; align-items: center; justify-content: space-between; background-color: #666; padding: 0 10px; }
#footer > div { height: 100px; }
#footer .logo { width: 20%; }
#footer .logo img { margin-top: 30px; }
#footer .copyright { width: 60%; }
#footer .copyright span{ display: block; text-align: center; line-height: 100px; }
#footer .sns { width: 20%; display: flex; justify-content: flex-end; margin-top: 30px; }
#footer .sns ul { display: flex; }
#footer .sns ul li { margin-right: 10px; }
/*modal*/
.modal-wrap { display: none; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: auto; padding: 20px; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.5); }
.modal h3 { font-size: 18px; margin-bottom: 10px; }
.modal p { font-size: 15px; }
.modal button { width: 80px; display: block; margin: 0 auto; margin-top: 10px; }
JAVASCRIPT/JQUERY
$(document).ready(function(){
//메뉴
$('.gnb').mouseover(function(){
$('.subMenu').stop().slideDown(300);
})
$('.gnb').mouseleave(function(){
$('.subMenu').stop().slideUp(300);
})
//슬라이드
setInterval(function(){
$('.slide> ul').delay(3000);
$('.slide> ul').animate({marginTop:"-300px"})
$('.slide> ul').delay(3000);
$('.slide> ul').animate({marginTop:"-600px"})
$('.slide> ul').delay(3000);
$('.slide> ul').animate({marginTop:"0px"})
})
//탭버튼
$('.board h2.b02').click(function(){
$('.board h2.b01').removeClass('on');
$('.board ul.b01').css("display","none");
$('.board h2.b02').addClass('on');
$('.board ul.b02').css("display","block");
})
$('.board h2.b01').click(function(){
$('.board h2.b02').removeClass('on');
$('.board ul.b02').css("display","none");
$('.board h2.b01').addClass('on');
$('.board ul.b01').css("display","block");
})
//공지사항 클릭시 팝업 생성
$('.b01 li:first-of-type').click(function(){
$('.modal-wrap').css("display","block");
})
//modal close
$('.modal .close').click(function(){
$('.modal-wrap').css("display","none");
})
})
'웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 코드 E-4 철길마을 (0) | 2025.02.20 |
|---|---|
| 웹디자인기능사 실기 코드 E-3 영상박물관 (0) | 2025.02.18 |
| 웹디자인기능사 실기 코드 D-4 리빙샵아울렛 (1) | 2025.02.17 |
| 웹디자인기능사 실기 코드 D-3 푸른마을 (1) | 2025.02.14 |
| 웹디자인기능사 실기 코드 A-2 Green복지재단 (0) | 2025.02.11 |