웹디자인기능사
웹디자인기능사 실기 코드 D-3 푸른마을
ddururu
2025. 2. 14. 19:00
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">
<section class="top flx">
<header id="header">
<h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
<nav class="gnb">
<ul>
<li><a href="#">OnSale</a></li>
<li><a href="#">기획전</a></li>
<li><a href="#">푸른마을 레시피</a></li>
<li><a href="#">매장안내</a></li>
<div class="sub_menu">
<ul class="flx a_center">
<li><a href="#">할인행사</a></li>
<li><a href="#">덤증정</a></li>
</ul>
<ul class="flx a_center">
<li><a href="#">봄 먹거리</a></li>
<li><a href="#">여름 먹거리</a></li>
<li><a href="#">가을 먹거리</a></li>
<li><a href="#">겨울 먹거리</a></li>
</ul>
<ul class="flx a_center">
<li><a href="#">메인요리</a></li>
<li><a href="#">밑반찬</a></li>
<li><a href="#">간식</a></li>
<li><a href="#">브런치</a></li>
</ul>
<ul class="flx a_center">
<li><a href="#">신규매장</a></li>
<li><a href="#">추천매장</a></li>
<li><a href="#">공지사항</a></li>
</ul>
</div>
</ul>
</nav>
<div class="spot_menu flx a_center">
<a href="#">로그인</a>
<a href="#">회원가입</a>
</div>
</header>
<main id="main">
<ul class="link">
<li><a href="#" class="flx flx_col a_center"><img src="images/link1.png" alt="할인행사"><span>할인행사</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link2.png" alt="메인요리"><span>메인요리</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link3.png" alt="공지사항"><span>공지사항</span></a></li>
</ul>
<div class="slide">
<ul class="slide_wrap">
<li><a href="#"><img src="images/slide1.png" alt="슬라이드이미지1"><span>슬라이드이미지1</span></a></li>
<li><a href="#"><img src="images/slide2.png" alt="슬라이드이미지2"><span>슬라이드이미지2</span></a></li>
<li><a href="#"><img src="images/slide3.png" alt="슬라이드이미지3"><span>슬라이드이미지3</span></a></li>
</ul>
</div>
<div class="banner flx a_center">
<a href="#"><img src="images/banner.png" alt="배너이미지"></a>
<div>
<p>푸른마을과 함께 할 여행자를 모집합니다.</p>
<button type="button">예약하기</button>
</div>
</div>
<div class="board">
<div class="tab_btn flx a_center">
<h2 class="b01 on">공지사항</h2>
<h2 class="b02">갤러리</h2>
</div>
<div class="notice">
<ul>
<li><a href="#" class="flx a_center j_spc_btw"><span>푸른마을 공지사항1 입니다.</span><span>2024.06.09</span></a></li>
<li><a href="#" class="flx a_center j_spc_btw"><span>푸른마을 공지사항1 입니다.</span><span>2024.06.09</span></a></li>
<li><a href="#" class="flx a_center j_spc_btw"><span>푸른마을 공지사항1 입니다.</span><span>2024.06.09</span></a></li>
<li><a href="#" class="flx a_center j_spc_btw"><span>푸른마을 공지사항1 입니다.</span><span>2024.06.09</span></a></li>
</ul>
</div>
<div class="gallery">
<ul class="flx a_center j_spc_btw">
<li class="flx a_center"><img src="images/gallery1.png" alt="갤러리이미지1"><span>갤러리 이미지입니다.</span></li>
<li class="flx a_center"><img src="images/gallery2.png" alt="갤러리이미지2"><span>갤러리 이미지입니다.</span></li>
<li class="flx a_center"><img src="images/gallery3.png" alt="갤러리이미지3"><span>갤러리 이미지입니다.</span></li>
</ul>
</div>
</div>
</main>
</section>
<footer id="footer" class="flx a_center">
<h3 class="f_logo"><a href="#"><img src="images/f_logo.png" alt="푸터로고"></a></h3>
<div>
<ul class="f_menu flx a_center">
<li><a href="#">푸터메뉴1</a></li>
<li><a href="#">푸터메뉴2</a></li>
<li><a href="#">푸터메뉴3</a></li>
<li><a href="#">푸터메뉴4</a></li>
<li><a href="#">푸터메뉴5</a></li>
</ul>
<div class="copy">COPYRIGHT © by WEBDESIGN. ALL RIGHTS RESERVED</div>
</div>
</footer>
<div class="modal_bg">
<div class="modal">
<h4>푸른마을 공지사항</h4>
<p>
가을 하늘 공활한데 높고 구름 없이
밝은 달은 우리 가슴 일편단심일세
무궁화 삼천리 화려 강산
대한 사람 대한으로 길이 보전하세
</p>
<button type="button">닫기</button>
</div>
</div>
</div>
</body>
</html>
CSS
/*reset*/
* { padding: 0; margin: 0; box-sizing: border-box; }
ul,ol,li { list-style-type: none; }
a { text-decoration: none; color: inherit; }
button { display: block; border: 0; text-align: center; cursor: pointer; }
img { vertical-align: top; }
html,body { width: 100%; height: 100%; font-size: 15px; font-weight: 700; color: #333; background-color: #fff; }
/*공통*/
.flx { display: flex; }
.flx_col { flex-direction: column; }
.a_center { align-items: center; }
.a_flx_end { align-items: flex-end; }
.a_flx_st { align-items: flex-start; }
.j_center { justify-content: center; }
.j_flx_st { justify-content: flex-start; }
.j_flx_end { justify-content: flex-end; }
.j_spc_btw { justify-content: space-between; }
.hide { width: 1px ; height: 1px; font-size: 1px; text-indent: -999999px; position: absolute; top: -999999px; left: -999999px; overflow: hidden; }
/*conts*/
.top { width: 100%; height: 850px; position: relative; }
#header { width: 200px; height: 100%; border-right: 1px solid #eee; }
#header .logo { margin-bottom: 20px; }
#header .gnb { }
#header .gnb > ul { }
#header .gnb > ul > li { height: 42px; line-height: 42px; padding-left: 20px; }
#header .gnb > ul > li.on { background-color: #2962B7; color: #fff; }
#header .gnb > ul > li:hover { background-color: #2962B7; color: #fff; }
#header .gnb > ul > li > a { font-size: 17px; font-weight: 700; }
#header .gnb .sub_menu { position: absolute; top: 60px; left: 160px; width: calc(100% - 160px); background-color:#2962B7; color: #Fff; display: none; z-index: 3; }
#header .gnb .sub_menu > ul > li { width: 200px; height: 42px; line-height: 42px; padding-left: 20px; }
#header .gnb .sub_menu > ul > li:hover { background-color: rgba(0, 0, 0, 0.2); color: #fff; }
.spot_menu { width: 100%; text-align: center; margin-top: 550px; }
.spot_menu > a { width: 50%; display: block; }
#main { width: calc(100% - 200px); }
#main .link { position: absolute; top: 0; right: 0; z-index: 2; background-color: rgba(255, 255, 255, 0.2); padding: 10px 20px; color: #fff; }
#main .link > li { margin-bottom: 20px; }
#main .link > li span { padding-top: 10px; }
#main .slide { width: 100%; height: 400px; overflow: hidden; }
#main .slide .slide_wrap { width: 100%; height: 100%; }
#main .slide .slide_wrap li{ width: 100%; height: 100%; position: relative; }
#main .slide .slide_wrap li > a { display: block; width: 100%; height: 100%; }
#main .slide .slide_wrap li span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 4px 20px; }
#main .banner { width: 100%; height: 200px; padding: 0 20px; }
#main .banner > div { padding-left: 30px;}
#main .banner > div >p { font-size: 17px; font-weight: 700; }
#main .banner > div > button { width: 200px; text-align: center; padding: 6px 30px; margin-top: 10px; }
#main .board { width: 100%; height: 250px; background-color: rgba(33, 99, 199, 0.1); padding: 0 20px; }
#main .board .tab_btn > h2 { width: 100px; text-align: center; font-size: 17px; font-weight: 700; padding: 10px 0; border: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 0; cursor: pointer; }
#main .board .tab_btn > h2.on { border: 0; background-color: #2962B7; color: #fff; }
#main .board .notice ul > li { height: 48px; line-height: 48px; padding: 0 10px; }
#main .board .notice ul > li:nth-of-type(odd){ background-color: rgba(33, 99, 199, 0.1); }
#main .board .gallery { display: none; }
#main .board .gallery span { padding-left: 10px; }
#footer { height: 120px; background-color: #bbb; }
#footer > div { padding-left: 20px; }
#footer .f_menu > li { width: 200px; height: 32px; line-height: 32px; }
#footer .copy { height: 32px; line-height: 32px; }
/*modal*/
.modal_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; }
.modal_bg .modal { position: absolute; top: 50%; left: 50%; width: 400px; height: auto; transform: translate(-50%, -50%); background-color: #fff; padding: 20px 30px; }
.modal_bg .modal h4 { font-size: 17px; font-weight: 700; height: 38px; line-height: 38px; }
.modal_bg .modal p { line-height: 32px; }
.modal_bg .modal button { width: 200px; padding: 10px 0; margin: 0 auto; margin-top: 20px; }
.modal_bg .modal button:hover { background-color: #2962B7; color: #fff; }
JAVASCRIPT/JQUERY
$(document).ready(function(){
//메뉴
$('.gnb > ul >li').mouseover(function(){
$('.sub_menu').show();
$('.gnb > ul >li').removeClass('on');
$(this).addClass('on');
})
$('.gnb').mouseleave(function(){
$('.sub_menu').hide();
$('.gnb > ul >li').removeClass('on');
})
//슬라이드(fadeIn,Out)
$('.slide_wrap > li').hide();
$('.slide_wrap > li:first-of-type').show();
setInterval(function(){
$('.slide_wrap > li:first-of-type').fadeOut().next().fadeIn().end().appendTo('.slide_wrap ');
},3000)
//모달창
$('.notice > ul > li:first-of-type').click(function(){
$('.modal_bg').stop().fadeIn();
})
$('.modal > button').click(function(){
$('.modal_bg').stop().fadeOut();
})
//탭메뉴
$('.tab_btn .b02').click(function(){
$('.tab_btn .b01').removeClass('on');
$('.tab_btn .b02').addClass('on');
$('.notice').hide();
$('.gallery').show();
})
$('.tab_btn .b01').click(function(){
$('.tab_btn .b02').removeClass('on');
$('.tab_btn .b01').addClass('on');
$('.gallery').hide();
$('.notice').show();
})
})