웹디자인기능사
웹디자인기능사 실기 코드 E-4 철길마을
ddururu
2025. 2. 20. 19:11
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">
<main id="main" class="flx j_center">
<header id="header">
<h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
<nav class="gnb">
<ul>
<li><a href="#" class="dep1">철길마을</a>
<ul class="sub_menu">
<li><a href="#">마을소개</a></li>
<li><a href="#">마을의 유래</a></li>
<li><a href="#">볼거리</a></li>
<li><a href="#">찾아오시는 길</a></li>
</ul>
</li>
<li><a href="#" class="dep1">주변맛집</a>
<ul class="sub_menu">
<li><a href="#">빵집</a></li>
<li><a href="#">간장게장</a></li>
<li><a href="#">중국음식점</a></li>
<li><a href="#">횟집</a></li>
</ul>
</li>
<li><a href="#" class="dep1">주변여행지</a>
<ul class="sub_menu">
<li><a href="#">은파호수공원</a></li>
<li><a href="#">초원사진관</a></li>
<li><a href="#">월명공원</a></li>
<li><a href="#">진포해양공원</a></li>
</ul>
</li>
<li><a href="#" class="dep1">도움마당</a>
<ul class="sub_menu">
<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>
<section class="conts">
<div class="banner flx flx_col a_center J_center">
<p class="banner_tit">아름다운 철길마을 지금 여행해보세요</p>
<button type="button">에약하기</button>
</div>
<div class="notice">
<h2>공지사항</h2>
<ul>
<li><a href="#" class="flx j_spc_btw a_center"><span>철길마을 공지사항1 입니다.</span><span>2024-06-06</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-06</span></a></li>
<li><a href="#" class="flx j_spc_btw a_center"><span>철길마을 공지사항4 입니다.</span><span>2024-06-06</span></a></li>
</ul>
</div>
<div class="gallery">
<h2>갤러리</h2>
<ul class="flx j_spc_btw">
<li><a href="#"><img src="images/gallery_1.png" alt="갤러리이미지1"></a><p class="gallery_txt">철길마을 전경1</p></li>
<li><a href="#"><img src="images/gallery_2.png" alt="갤러리이미지2"></a><p class="gallery_txt">철길마을 전경2</p></li>
</ul>
</div>
<ul class="link flx j_spc_btw">
<li><a href="#" class="flx flx_col a_center"><img src="images/link_1.png" alt="바로가기1"><span>전화하기</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link_2.png" alt="바로가기2"><span>문의하기</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link_3.png" alt="바로가기3"><span>에약하기</span></a></li>
<li><a href="#" class="flx flx_col a_center"><img src="images/link_4.png" alt="바로가기4"><span>분실물</span></a></li>
</ul>
</section>
<div class="slide">
<ul class="slide_wrap flx">
<li><a href="#"><img id="iw1" src="images/slide_1.png" alt="슬라이드이미지1"><span>철길마을 이미지1</span></a></li>
<li><a href="#"><img id="iw2" src="images/slide_2.png" alt="슬라이드이미지2"><span>철길마을 이미지2</span></a></li>
<li><a href="#"><img src="images/slide_3.png" alt="슬라이드이미지3"><span>철길마을 이미지3</span></a></li>
</ul>
</div>
</main>
<footer id="footer" class="flx j_spc_btw a_center">
<h3 class="f_logo"><a href="#"><img src="images/f_logo.png" alt="footer로고"></a></h3>
<div class="f_m">
<ul class="f_menu flx j_spc_btw a_center">
<li><a href="#">footer1</a></li>
<li><a href="#">footer2</a></li>
<li><a href="#">footer3</a></li>
<li><a href="#">footer4</a></li>
<li><a href="#">footer5</a></li>
</ul>
<div class="copy flx a_center">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</div>
</div>
<select class="family_site">
<option>패밀리사이트1</option>
<option>패밀리사이트2</option>
<option>패밀리사이트3</option>
<option>패밀리사이트4</option>
<option>패밀리사이트5</option>
</select>
</footer>
<div class="modal_bg">
<div class="modal">
<p class="modal_tit">철길마을 이벤트</p>
<p class="moadl_txt">동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.</p>
<button type="button" class="close">닫기</button>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/*reset*/
*{margin: 0; padding: 0; box-sizing: border-box;}
html, body { width: 100%; height: 100%; color: #333; background-color: #fff; font-size: 15px; }
ul,ol,li { list-style-type: none; }
a, em { text-decoration: none; color: #333; display: block; }
img { vertical-align: top; }
button { border: 0; cursor: pointer; }
/*공통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_flx_st { justify-content: flex-start; }
.j_flx_end { justify-content: flex-end; }
.j_spc_btw { justify-content: space-between; }
.hidden { width: 1px; height: 1px; text-indent: -999999px; position: absolute; z-index: -9999px; font-size: 1px; }
/*main*/
.wrap { width: 100%; height: 100%; position: relative; }
#main { width: 100%; height: calc(100% - 120px); }
#header { width: 200px; height: 100%; border-right: 1px solid #eee; }
#header .logo { margin-top: 20px; }
#header .logo > img { display: block; width: 195px; margin: 0 auto; }
#header .gnb { padding: 0 10px; width: 100%; margin-top: 20px; }
#header .gnb .dep1{ height: 42px; line-height: 42px; padding-left: 20px; font-size: 17px; font-weight: bold; }
#header .gnb .dep1:hover { background-color: #2962B7; color: #fff; }
#header .gnb > ul > li { position: relative; }
#header .gnb .sub_menu { position: absolute; background-color: #2962B7; width: 100%; left: 100%; top: 0; display: none; }
#header .gnb .sub_menu li { height: 42px; line-height: 42px; padding: 0 10px; }
#header .gnb .sub_menu li:hover { background-color: rgba(0, 0, 0, 0.3); }
#header .gnb .sub_menu li > a { color: #fff;}
.conts { width: 400px; height: 100%; }
.conts .banner { height: 15%; background: url(../images/banner.png) 50% 50%; justify-content: center; }
.conts .banner .banner_tit { color: #fff; background-color: rgba(0, 0, 0, 0.7); font-weight: bold; padding: 6px 20px; }
.conts .banner button { width: 150px; height: 32px; background-color: fff; border: 0; margin-top: 6px; border-radius: 30px; }
.conts .banner button:hover { background-color: #2962B7; color: #fff; font-weight: bold; }
.conts .notice { height: 35%; margin-top: 10px; }
.conts .notice h2,
.conts .gallery h2 { width: 150px; height: 38px; line-height: 38px; font-size: 17px; font-weight: bold; background-color: #eee; text-align: center; }
.conts .notice ul,
.conts .gallery ul { background-color: #eee; padding: 20px 0; }
.conts .notice ul > li { height: 42px; line-height: 42px; }
.conts .notice ul > li > a { padding: 0 10px; }
.conts .notice ul > li:nth-child(2n){ background-color: #fafafa; }
.conts .gallery { height: 35%; }
.conts .link { height: 15%; padding: 0 10px; }
.conts .link span { margin-top: 6px; }
.slide { width: calc(100% - 200px - 400px); height: 100%; overflow: hidden; }
.slide .slide_wrap li { position: relative; width: 100%; height: 100%; }
.slide span { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.3); color: #fff; font-size: 17px; font-weight: bold; padding: 10px 30px; }
#footer{width: 100%; height: 120px; border-top: 1px solid #eee; padding: 0 20px 0 10px;}
#footer .f_m { width: 50%; height: 100%; }
#footer .f_m .f_menu { height: 50%; padding: 0 30px; }
#footer .f_m .copy { height: 50%; border-top: 1px solid #eee; }
#footer .family_site { width: 150px; height: 42px; padding: 0 10px; }
/*모달창*/
.modal_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: none; }
.modal_bg .modal { background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; height: auto; padding: 20px 30px; }
.modal_bg .modal .modal_tit { height: 48px; height: 48px; font-size: 17px; font-weight: 700; }
.modal_bg .modal .modal_txt { height: 32px; line-height: 32px;}
.modal_bg .modal button { display: block; width: 150px; height: 32px; margin: 30px auto 0; background-color: #2962B7; color: #Fff; }
JQUERY
$(document).ready(function(){
//서브메뉴
$('.dep1').mouseover(function(){
$('.sub_menu').hide()
$('.dep1').css('background','#fff').css('color','#333');
$(this).siblings().stop().fadeIn(300);
$(this).css('background','#2962B7').css('color','#fff');
})
$('.gnb > ul > li').mouseleave(function(){
$('.sub_menu').stop().fadeOut(300);
$('.dep1').css('background','#fff').css('color','#333');
})
//모달창
$('.notice ul li:first-of-type').click(function(){
$('.modal_bg').css('display','block');
})
$('.close').click(function(){
$('.modal_bg').css('display','none');
})
//슬라이드
setInterval(function(){
let iw1 = $('#iw1').width();s
let iw2 = iw1 + $('#iw2').width();
$('.slide_wrap').delay(3000);
$('.slide_wrap').animate({marginLeft:'-' + iw1 + 'px'});
$('.slide_wrap').delay(3000);
$('.slide_wrap').animate({marginLeft:'-' + iw2 + 'px'});
$('.slide_wrap').delay(3000);
$('.slide_wrap').animate({marginLeft:0});
})
})