웹디자인기능사 실기 C-2 입니다.
과제명 : 부여 가을연꽃축제
문제PDF : https://devpiki.github.io/assets/web_design/plan/C-2.pdf
결과물
https://devpiki.github.io/assets/web_design/result/C_2/index.html
부여 가을연꽃축제
타이틀 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam nostrum et, quisquam possimus facilis quae eligendi tempora. Modi eligendi nam aliquam, eveniet laboriosam tenetur, magnam totam ut voluptatum praesentium quam. X 닫기
devpiki.github.io
소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>부여 가을연꽃축제</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/custom.js"></script>
</head>
<body>
<div class="modal">
<div class="modal-pop">
<p>타이틀</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquam nostrum et, quisquam possimus facilis quae eligendi tempora. Modi eligendi nam aliquam, eveniet laboriosam tenetur, magnam totam ut voluptatum praesentium quam.</p>
<p><button type="button">X 닫기</button></p>
</div>
</div>
<div id="wrap" class="clearfix">
<header id="header">
<h1><a href="#"><img src="./img/logo.png" alt="부여 가을연꽃축제"></a></h1>
<nav>
<ul>
<li>
<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>
<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>
<a href="#">홍보마당</a>
<ul class="submenu">
<li><a href="#">축제소식</a></li>
<li><a href="#">보도자료</a></li>
<li><a href="#">음식레시피</a></li>
</ul>
</li>
<li>
<a href="#">참여마당</a>
<ul class="submenu">
<li><a href="#">참가후기</a></li>
<li><a href="#">연꽃갤러리</a></li>
<li><a href="#">포토갤러리</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="container">
<main id="main">
<div class="slide">
<ul>
<li><a href="#"><img src="./img/slide01.png" alt="슬라이드01"></a></li>
<li><a href="#"><img src="./img/slide02.png" alt="슬라이드02"></a></li>
<li><a href="#"><img src="./img/slide03.png" alt="슬라이드03"></a></li>
</ul>
</div>
<div class="content clearfix">
<section class="board">
<h2 class="on">공지사항</h2>
<ul>
<li><a href="#">부여 가을연꽃축제 공지사항<span>2021-01-01</span></a></li>
<li><a href="#">부여 가을연꽃축제 공지사항<span>2021-01-01</span></a></li>
<li><a href="#">부여 가을연꽃축제 공지사항<span>2021-01-01</span></a></li>
<li><a href="#">부여 가을연꽃축제 공지사항<span>2021-01-01</span></a></li>
<li><a href="#">부여 가을연꽃축제 공지사항<span>2021-01-01</span></a></li>
</ul>
</section>
<section class="gall">
<h2 class="on">갤러리</h2>
<ul class="clearfix">
<li><a href="#"><img src="./img/gall01.png" alt="갤러리01"></a></li>
<li><a href="#"><img src="./img/gall02.png" alt="갤러리02"></a></li>
<li><a href="#"><img src="./img/gall03.png" alt="갤러리03"></a></li>
</ul>
</section>
<section class="direct">
<h2>바로가기</h2>
<a href="#"><img src="./img/direct.png" alt="바로가기"></a>
</section>
</div>
</main>
<footer id="footer">
<div class="copy">copyright© by 부여 가을연꽃축제 all rights reserved.</div>
<div class="sns">
<ul class="clearfix">
<li><a href="#"><img src="./img/SNS1.png" alt="페이스북"></a></li>
<li><a href="#"><img src="./img/SNS2.png" alt="트위터"></a></li>
<li><a href="#"><img src="./img/SNS3.png" alt="인스타그램"></a></li>
</ul>
</div>
<div class="familly">
<select>
<option value="">패밀리사이트</option>
<option value="01">네이버</option>
<option value="02">다음</option>
<option value="03">티스토리</option>
</select>
</div>
</footer>
</div>
</div>
</body>
</html>@charset "UTF-8";
*{padding: 0; margin: 0; vertical-align: top;box-sizing: border-box;}
html, body{width: 100%; height: 100%;background-color: #fff;color: #222328;}
a{text-decoration: none;color: inherit;display: inline-block;width: 100%; height: 100%; text-align: center;}
ul, li {list-style-type: none;}
i, em, address{font-style: normal;}
.clearfix::before, .clearfix::after{
content: "";
display: table;
clear: both;
}
.modal{position: fixed;width: 100%; height: 100%; background-color: rgba(0,0,0,.2);z-index: 11;display: none;}
.modal .modal-pop{position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff;}
.modal p{margin: 15px;}
.modal p:nth-child(1){font-size: 20px; font-weight: 900;}
.modal p:nth-child(2){}
.modal p:nth-child(3){text-align: right;}
.modal button{padding: 5px 10px;}
/*===========*/
#wrap{width: 1000px; height: 100%;}
/*===========*/
#header{position: relative;float: left;width: 200px; height: 650px;background-color: #fff8fc;}
#header h1{width: 100%;}
#header h1 img{margin: 30px 0;}
#header nav{width: 100%;}
#header nav > ul{}
#header nav > ul > li{}
#header nav > ul > li > a{height: 50px;line-height: 50px;font-weight: 900; font-size: 20px;}
#header nav > ul > li:hover > a{background-color: rgba(0, 0, 0, .4);color: #fff8fc;}
#header nav .submenu{display: none;}
#header nav .submenu li{}
#header nav .submenu li a{height: 40px;line-height: 40px;}
#header nav .submenu li:hover a{background-color: rgba(0, 0, 0, .3);color: #fff8fc;}
/*===========*/
.container{position: relative;float: right;width: 800px;height: 650px;}
/*===========*/
#main{position: relative;width: 100%; height: 550px;}
/*===========*/
#main .slide{width: 100%; height: 350px;overflow: hidden;}
#main .slide ul{}
#main .slide ul li{}
#main .slide ul li a{}
#main .slide ul li a img{height: 350px; width: 100%;}
#main .slide ul li:nth-child(2), #main .slide ul li:nth-child(3){display: none;}
/*===========*/
#main .content{width: 100%; height: 200px;}
#main .content section{width: 33.33%; height: 100%;float: left;}
#main .content section h2.on{width: 100px;height: 50px;text-align: center;cursor: pointer;color: #d154cd; background-color: rgb(209,84,205,.15); background-clip: content-box;font-size: 20px; font-weight: 900;padding: 5px;line-height: 40px;}
#main .content section h2.on:hover{background-color: rgba(71,71,71,.1);color: #fff;}
/*===========*/
#main .board{}
#main .board ul{width: 100%;}
#main .board ul li{}
#main .board ul li a{height: 30px; font-size: 13px;line-height: 30px; padding: 0 10px;text-align: left;}
#main .board ul li a span{height: 100%; float: right;}
#main .board ul li a:hover{background-color: rgb(209,84,205,.15);color: #d154cd;}
/*===========*/
#main .gall{}
#main .gall ul{width: 100%; height: 150px;}
#main .gall ul li{float: left;width: 33.33%;height: 100%;}
#main .gall ul li a{padding: 35px 5px 0 5px;}
#main .gall ul li a img{width: 100%;}
/*===========*/
#main .direct{}
#main .direct h2{width: 0; height: 0;line-height: 0;text-indent: -9999px;z-index: -99999;}
#main .direct img{width: 100%; height: 100%;}
/*===========*/
#footer{position: relative; width: 100%; height: 100px;}
#footer .copy{position: absolute;width: 600px;height: 100px;top: 0;left: 0;text-align: center;line-height: 100px;font-weight: 700;}
#footer .sns{position: absolute;right: 0;top: 0;width: 200px; height: 50px;}
#footer .sns ul{width: 100%; height: 100%;}
#footer .sns ul li{float: left; width: 33.33%;height: 100%;}
#footer .sns ul li a{padding: 5px;}
#footer .sns ul li a img{height: 100%;}
#footer .familly{position: absolute;right: 0;bottom: 0; height: 50px;width: 200px;text-align: center;}
#footer .familly select{height: 30px;
margin-top: 10px;}$(document).ready(function(){
$('#header nav > ul > li').mouseover(function(){
$(this).find('.submenu').stop().slideDown();
});
$('#header nav > ul > li').mouseout(function(){
$(this).find('.submenu').stop().slideUp();
});
var idx = 0;
setInterval(function(){
$('#main .slide ul li').eq(idx).fadeOut();
idx += 1;
if(idx>2)idx = 0;
$('#main .slide ul li').eq(idx).fadeIn();
}, 3000);
$('#main .board ul li').eq(0).click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});
'Web > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 C-4 (0) | 2021.11.16 |
|---|---|
| 웹디자인기능사 실기 C-3 (0) | 2021.11.16 |
| 웹디자인기능사 실기 C-1 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-4 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-3 (0) | 2021.11.16 |
댓글