HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리빙샵아울렛</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">
<div class="top flx">
<header id="header">
<h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
<nav class="gnb">
<ul class="dep1">
<li><a href="#">인기모음전</a></li>
<li><a href="#">베스트상품</a></li>
<li><a href="#">업종별샵</a></li>
<li><a href="#">인덕션용품</a></li>
</ul>
<div class="sub_menu">
<ul class="flx dep2">
<li><a href="#">수저모음</a></li>
<li><a href="#">도마모음</a></li>
<li><a href="#">그릇모음</a></li>
<li><a href="#">접시모음</a></li>
</ul>
<ul class="flx dep2">
<li><a href="#">주방용품</a></li>
<li><a href="#">설비제품</a></li>
<li><a href="#">인덕션제품</a></li>
<li><a href="#">실리콘제품</a></li>
</ul>
<ul class="flx dep2">
<li><a href="#">한식기물</a></li>
<li><a href="#">양식기물</a></li>
<li><a href="#">일식기물</a></li>
<li><a href="#">중식기물</a></li>
</ul>
<ul class="flx dep2">
<li><a href="#">냄비/솥</a></li>
<li><a href="#">후라이팬/주물</a></li>
<li><a href="#">인덕션렌지</a></li>
<li><a href="#">기타제품</a></li>
</ul>
</div>
</nav>
</header>
<main id="main">
<div class="slide" id="slide">
<ul class="slide_wrap">
<li><img src="images/slide1.png" alt="슬라이드이미지1"><span>리빙샵아울렛 슬라이드1</span></li>
<li><img src="images/slide2.png" alt="슬라이드이미지2"><span>리빙샵아울렛 슬라이드2</span></li>
<li><img src="images/slide3.png" alt="슬라이드이미지3"><span>리빙샵아울렛 슬라이드3</span></li>
</ul>
</div>
<ul class="link flx a_center j_spc_btw">
<li><a href="#" class="flx flx_col a_center"><img src="images/link1.png" alt="바로가기1"><span>식기류</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link2.png" alt="바로가기2"><span>견적내기</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link3.png" alt="바로가기3"><span>예약하기</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link4.png" alt="바로가기4"><span>활용하기</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link5.png" alt="바로가기5"><span>레시피</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link6.png" alt="바로가기6"><span>플레이트</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link7.png" alt="바로가기7"><span>기물종류</span></a></li>
</ul>
<div class="board flx">
<div class="notice">
<h2>공지사항</h2>
<ul>
<li><a href="#" class="flx j_spc_btw a_center"><span>리빙샵아울렛 공지사항1 클릭해서 확인해주세요.</span><span>2024.06.07</span></a></li>
<li><a href="#" class="flx j_spc_btw a_center"><span>리빙샵아울렛 공지사항2 클릭해서 확인해주세요.</span><span>2024.06.06</span></a></li>
<li><a href="#" class="flx j_spc_btw a_center"><span>리빙샵아울렛 공지사항3 클릭해서 확인해주세요.</span><span>2024.06.04</span></a></li>
<li><a href="#" class="flx j_spc_btw a_center"><span>리빙샵아울렛 공지사항4 클릭해서 확인해주세요.</span><span>2024.06.03</span></a></li>
</ul>
</div>
<div class="gallery">
<h2>갤러리</h2>
<ul class="flx a_center j_spc_btw">
<li><a href="#" class="flx flx_col a_center"><img src="images/gallery1.png" alt="갤러리1"><span>갤러리이미지1</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/gallery2.png" alt="갤러리1"><span>갤러리이미지2</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/gallery3.png" alt="갤러리1"><span>갤러리이미지3</span></a></li>
</ul>
</div>
</div>
</main>
</div>
<footer id="footer" class="flx j_flx_end a_center">
<div class="f_m">
<ul class="f_m_t flx">
<li><a href="#">FOOTERMENU1</a></li>
<li><a href="#">FOOTERMENU2</a></li>
<li><a href="#">FOOTERMENU3</a></li>
<li><a href="#">FOOTERMENU4</a></li>
<li><a href="#">FOOTERMENU5</a></li>
<li><a href="#">FOOTERMENU6</a></li>
</ul>
<div class="f_m_b">COPYRIGHT © by WEBDESIGN. ALL RIGHTS RESERVED</div>
</div>
<select class="family">
<option>패밀리사이트1</option>
<option>패밀리사이트2</option>
<option>패밀리사이트3</option>
<option>패밀리사이트4</option>
<option>패밀리사이트5</option>
</select>
</footer>
<div class="modal_bg">
<div class="modal">
<h3>리빙샵아울렛 공지사항</h3>
<p>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
</p>
<button type="button">닫기</button>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/*reset*/
* {margin: 0; padding: 0; box-sizing: border-box; }
html { width: 100%; height: 100%; font-size: 15px; color: #333; background-color: #fff; }
body { width: 100%; height: 100%; }
ul, ol, li { list-style-type: none; }
a { display: block; text-decoration: none; color: inherit; }
button { cursor: pointer; border: 0; }
img { vertical-align: top; }
/*공통 cls*/
.flx { display: flex; }
.flx_col { flex-direction: column; }
.a_center { align-items: center; }
.a_flx_st { align-items: flex-start; }
.a_flx_end { align-items: flex-end; }
.j_center { justify-content: center; }
.j_spc_btw { justify-content: space-between; }
.j_flx_end { justify-content: flex-end; }
.hide { width: 1px; height: 1px; text-indent: -999999px; font-size: 1px; position: absolute; z-index: -999999px; overflow: hidden; }
.wrap { width: 100%; height: 920px; position: relative; }
.top { height: 800px; }
/*header*/
#header{ width: 200px; height: 100%; background-color: #fff; border-right: 1px solid #eee;}
#header .logo a img { margin: 10px 0 ; }
#header .gnb .dep1 li{ height: 42px; line-height: 42px; padding: 0 20px; }
#header .gnb .dep1 li:hover { background-color: #e54180; color: #fff; }
#header .gnb .dep1 li.on { background-color: #e54180; color: #fff; }
#header .gnb .dep1 li a { font-size: 17px; font-weight: bold; }
#header .gnb .dep1 li:hover a { color: #fff; }
#header .sub_menu { position: absolute; top: 60px; left: 200px; width: 100%; height: auto; background-color: #e54180; display: none; z-index: 2; }
#header .sub_menu > ul { height: 42px; line-height: 42px; }
#header .sub_menu > ul > li { width: 200px; padding: 0 10px; }
#header .sub_menu > ul > li:hover { background-color: rgba(0, 0, 0, 0.2); }
#header .sub_menu > ul > li > a { color: #fff; text-align: center; }
/*main*/
#main { width: calc(100% - 200px); height: 100%; }
#main .slide { width: 100%; height: 400px; overflow: hidden; }
#main .slide .slide_wrap { width: 100%; height: 100%; }
#main .slide .slide_wrap li { position: relative; }
#main .slide .slide_wrap span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.4); color: #fff; padding: 6px 10px; }
#main .link { width: 100%; height: 150px; padding: 0 50px; }
#main .link span { padding-top: 10px; }
#main .board { width: 100%; height: 250px; }
#main .board .notice,
#main .board .gallery{ width: 50%; padding: 0 20px;}
#main .board .notice h2,
#main .board .gallery h2{ width: 150px; height: 48px; line-height: 48px; font-size: 17px; font-weight: bold; text-align: center; background-color: #eee; }
#main .board .notice li { height: 48px; line-height: 48px; padding: 0 10px }
#main .board .notice li:nth-of-type(odd) { background-color: #eee; }
#main .board .gallery ul { background-color: #eee; }
#main .board .gallery ul > li:hover img{ animation: opa 0.5s ease-in 1; }
@keyframes opa{
0% {
opacity: 80%;
}
50%{
opacity: 50%;
}
100%{
opacity: 100%;
}
}
/*footer*/
#footer{ height: 120px; padding: 0 20px 0 200px; background-color: #333; color: #fff;}
#footer .f_m { width: 1500px; }
#footer .family { height: 42px; width: 200px; }
/*modal*/
.modal_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); display: none; }
.modal_bg .modal { width: 400px; height: auto; padding: 20px 30px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.modal_bg .modal h3 { height: 42px; line-height: 42px; font-size: 17px; }
.modal_bg .modal p { line-height: 28px; margin-bottom: 10px; }
.modal_bg .modal button { display: block; width: 150px; margin: 0 auto; padding: 4px 0; background-color: #e54180; color: #fff; }
JAVASCRIPT/JQUERY
$(document).ready(function(){
//메뉴
$('.dep1 li').mouseover(function(){
$('.sub_menu').stop().fadeIn(300);
$('.dep1 li').removeClass('on');
$(this).addClass('on');
})
$('.gnb').mouseleave(function(){
$('.sub_menu').stop().fadeOut(300);
$('.dep1 li').removeClass('on');
})
//슬라이드
$('#slide .slide_wrap li').hide();
$('#slide .slide_wrap li:first-of-type').show();
setInterval(function(){
$('#slide .slide_wrap li:first-of-type').fadeOut().next().fadeIn().end().appendTo($('#slide .slide_wrap'));
},3000)
//모달창
$('.notice ul li:first-of-type').click(function(){
$('.modal_bg').stop().show();
})
$('.modal button').click(function(){
$('.modal_bg').stop().hide();
})
})
'웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 코드 E-4 철길마을 (0) | 2025.02.20 |
|---|---|
| 웹디자인기능사 실기 코드 E-3 영상박물관 (0) | 2025.02.18 |
| 웹디자인기능사 실기 코드 D-3 푸른마을 (1) | 2025.02.14 |
| 웹디자인기능사 실기 코드 A-1 JUST쇼핑몰 (1) | 2025.02.11 |
| 웹디자인기능사 실기 코드 A-2 Green복지재단 (0) | 2025.02.11 |