웹디자인기능사
웹디자인기능사 실기 코드 A-2 Green복지재단
ddururu
2025. 2. 11. 14:27
실제로 내가 시험볼때 나왔던 문제다!
솔직히 유형이 다양해서 A유형에서 나올줄 몰랐는데 당황!
시험을 준비하고 계신분들이라면 A쉽다고 넘기지말고 꼼꼼히 보는것 추천!
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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" class="flx spc-bt">
<h1><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
<nav>
<ul class="navul flx">
<li class="dep1"><a href="#">재단소개</a></li>
<li class="dep1"><a href="#">후원하기</a></li>
<li class="dep1"><a href="#">자료실</a></li>
<li class="dep1"><a href="#">스토리</a></li>
</ul>
</nav>
<div class="subMenu flx">
<nav class="flx">
<ul>
<li><a href="#">설립취지</a></li>
<li><a href="#">연혁</a></li>
<li><a href="#">찾아오시는길</a></li>
</ul>
<ul>
<li><a href="#">국내후원</a></li>
<li><a href="#">국외후원</a></li>
<li><a href="#">맞춤후원</a></li>
</ul>
<ul>
<li><a href="#">서식자료실</a></li>
<li><a href="#">사진자료실</a></li>
<li><a href="#">후원양식</a></li>
</ul>
<ul>
<li><a href="#">웹진</a></li>
<li><a href="#">보고서</a></li>
<li><a href="#">나의후원</a></li>
</ul>
</nav>
</div>
</header>
<main id="main">
<ul class="slide flx">
<li class="slide1"><a><img src="images/img1.jpg" alt="슬라이드이미지1"><span>Green 복지재단1</span></a></li>
<li class="slide2"><a><img src="images/img2.jpg" alt="슬라이드이미지2"><span>Green 복지재단2</span></a></li>
<li class="slide3"><a><img src="images/img3.jpg" alt="슬라이드이미지3"><span>Green 복지재단3</span></a></li>
</ul>
<div class="conts flx spc-bt">
<div class="notice">
<h2>공지사항</h2>
<ul>
<li class="flx spc-bt">Green 복지재단 공지사항1<span>2020.11.23</span></li>
<li class="flx spc-bt">Green 복지재단 공지사항2<span>2020.11.23</span></li>
<li class="flx spc-bt">Green 복지재단 공지사항3<span>2020.11.23</span></li>
<li class="flx spc-bt">Green 복지재단 공지사항4<span>2020.11.23</span></li>
</ul>
</div>
<div class="gallery">
<h2>갤러리</h2>
<ul class="flx">
<li><a href="#"><img src="images/icon1.png" alt="갤러리이미지1"></a></li>
<li><a href="#"><img src="images/icon2.png" alt="갤러리이미지2"></a></li>
<li><a href="#"><img src="images/icon3.png" alt="갤러리이미지3"></a></li>
</ul>
</div>
<div class="banner">
<h2 class="hidden-title">배너</h2>
<a href="#"><img src="images/banner.jpg" alt="배너이미지"></a>
</div>
</div>
</main>
<footer id="footer" class="flx spc-bt">
<div class="logo"><a href="#"><img src="images/footerLogo.png"></a></div>
<div class="copyright">COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED</div>
<div class="familysite">
<select>
<option>패밀리사이트1</option>
<option>패밀리사이트2</option>
<option>패밀리사이트3</option>
</select>
</div>
</footer>
<div class="modal-bg">
<div class="modal">
<h3 class="modal-tit">복지재단 공지사항</h3>
<p> 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
</p>
<button type="button">닫기</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-color: #fff; color: #333;}
ul,ol,li { list-style-type: none; }
a { text-decoration: none; color: #333; 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: -9999999px; text-indent: -9999999px; overflow: hidden; position: absolute !important; font-size: 1px; margin: -1px; }
/*flex관련cls*/
.flx { display: flex; align-items: center; }
.spc-bt{ justify-content: space-between;}
/*contents*/
.wrap { width: 1200px; margin: 0 auto; background-color: rgba(0, 0, 0, 0.); position: relative; overflow: hidden; }
#header { width: 100%; height: 100px; background-color: #43af43; position: relative; padding-left: 10px; }
#header nav .navul > li { width: 200px; }
#header nav .navul > li:hover { background-color:rgba(0, 0, 0, 0.1); }
#header nav .navul > li > a { height: 100px; line-height: 100px; color: #fff; }
#header .subMenu { display: none; position: absolute; top: 100px; z-index: 3; margin-left: -10px; color: #fff; }
#header .subMenu nav { width: 1200px; padding-left: 400px; background: #fff;}
#header .subMenu nav > ul { width: 200px; }
#header .subMenu nav > ul li { height: 38px; line-height: 38px; }
#header .subMenu nav > ul li:hover { background-color: #43af43; color: #fff; }
#main .slide { height: 300px; overflow: hidden; }
#main .slide li { position: relative;}
#main .slide span { position: absolute; bottom: 10px; left: 10px; font-size: 20px; color: #fff; }
#main .conts { height: 200px; }
#main .conts > div { width: 100%; height: 100%; }
#main .conts > div h2 { width: 130px; background: rgba(0, 0, 0, 0.1); text-align: center; }
#main .conts .notice li{ height: 42px; line-height: 42px; padding: 0 10px; cursor: pointer; }
#main .conts .gallery li { margin-top: 10px; margin-right: 10px;}
#main .conts .gallery li:last-of-type { margin-right: 0; }
#footer { height: 100px; background-color: #eee; padding: 0 10px; }
#footer .familysite select { width: 150px; height: 38px; padding: 0 6px; }
/*modal*/
.modal-bg { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); }
.modal-bg .modal { width: 450px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 6px; }
.modal-bg .modal .modal-tit { height: 42px; line-height: 42px; }
.modal-bg .modal > p { font-size: 16px; line-height: 28px; }
.modal-bg .modal > button { display: block; width: 150px; height: 28px; text-align: center; margin: 14px auto 0; border: none; cursor: pointer; background: #43af43; color: #fff; border-radius: 3px; }
JAVASCIPRT/JQUERY
$(document).ready(function(){
//서브메뉴표출
$('.dep1').mouseover(function(){
$('.subMenu').stop().slideDown(300);
});
$('#header').mouseleave(function(){
$('.subMenu').stop().slideUp(300);
});
//슬라이드 구현
setInterval(function(){
$('.slide').delay(3000);
$('.slide').animate({marginLeft :"-1200px"});
$('.slide').delay(3000);
$('.slide').animate({marginLeft :"-2400px"});
$('.slide').delay(3000);
$('.slide').animate({marginLeft :"0px"});
})
//모달창
$('.notice ul > li:first-of-type').click(function(){
$('.modal-bg').css("display","block");
});
$('.modal-bg button').click(function(){
$('.modal-bg').css("display","none");
});
})