Web/웹디자인기능사
웹디자인기능사 실기 C-4
pikisvill
2021. 11. 16. 13:40
웹디자인기능사 실기 C-4 입니다.
과제명 : Vallery Festiva
문제PDF : https://devpiki.github.io/assets/web_design/plan/C-4.pdf
결과물
https://devpiki.github.io/assets/web_design/result/C_4/index.html
Vallery Festival
타이틀 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas a culpa quis molestiae iusto eius. Ducimus reiciendis, quo dolores ab quis natus, voluptatem laboriosam est corporis eaque facere repudiandae itaque. X 닫기
devpiki.github.io
소스
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Vallery Festival</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="modalpop">
<p>타이틀</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas a culpa quis molestiae iusto eius. Ducimus reiciendis, quo dolores ab quis natus, voluptatem laboriosam est corporis eaque facere repudiandae itaque.</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="Vallery Festival"></a></h1>
<nav>
<ul>
<li>
<a href="#">축제소개</a>
<ul class="submenu">
<li><a href="#">Festival소개</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>
<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 class="clearfix">
<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 class="tit">페스티벌 프로그램 경연대회 결선 결과</span><span class="date">2021-01-01</span></a></li>
<li><a href="#"><span class="tit">페스티벌 프로그램 경연대회 결선 결과</span><span class="date">2021-01-01</span></a></li>
<li><a href="#"><span class="tit">페스티벌 프로그램 경연대회 결선 결과</span><span class="date">2021-01-01</span></a></li>
<li><a href="#"><span class="tit">페스티벌 프로그램 경연대회 결선 결과</span><span class="date">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>
<a href="#"><img src="./img/direct.png" alt="바로가기"></a>
</h2>
</section>
</div>
</main>
<footer id="footer" class="clearfix">
<div class="logo">
<a href="#"><img src="./img/logo2.png" alt="하단로고"></a>
</div>
<div class="copy">
Copyright by Vallery Festival, All right reserved.
</div>
<div class="fam">
<select>
<option>패밀리사이트</option>
<option>Ko Festival</option>
<option>Seong Festival</option>
<option>Min Festival</option>
</select> <button>이동</button>
</div>
</footer>
</div>
</div>
</body>
</html>@charset "UTF-8";
*{padding: 0; margin: 0; vertical-align: top;box-sizing: border-box;}
html, body{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;}
.clearfix::before, .clearfix::after{
content: "";
clear: both;
display: table;
}
.modal{position:fixed;width: 100%; height: 100%; background-color: rgba(0,0,0,.3);z-index: 11;display: none;}
.modal .modalpop{width: 500px; position: absolute;top: 50%; left: 50%;transform:translate(-50%, -50%);background-color: #fff;}
.modal p{margin: 15px;}
.modal p:nth-child(1){font-weight: 700; font-size: 20px;}
.modal p:nth-child(2){}
.modal p:nth-child(3){text-align: right;}
.modal button{height: 30px; padding: 0 10px;}
/*================*/
#wrap{width: 1000px;height: 100%;}
#header{float: left;width: 200px;height: 650px;position: relative; background-color: rgb(255, 255, 224);}
#header h1{width: 100%; height: 100px;}
#header h1 a{padding: 32px 10px 0 10px;}
#header h1 img{width: 100%;}
#header nav{width: 100%; padding: 10px 10px 0 10px;position: relative;z-index: 1;}
#header nav > ul{width: 100%;}
#header nav > ul > li{}
#header nav > ul > li > a{height: 50px;line-height: 50px;}
#header nav > ul > li:hover > a{background-color: #d4d4d4;color: ivory;}
#header nav .submenu{width: 180px; height: 225px;position: absolute;top: -10px;left: 190px;background-color: #d4d4d4;color: ivory;display: none;}
#header nav .submenu li{}
#header nav .submenu li a{height: 45px;line-height: 45px;}
#header nav .submenu li:hover a{background-color: rgb(255, 255, 224);color:#222328;}
.container{float: right;width: 800px;height: 650px;}
#main{width: 100%; height: 550px;position: relative;}
#main .slide{width: 800px; height: 350px; overflow: hidden;position: relative;}
#main .slide ul{width: 2400px; height: 350px;position: absolute;top: 0;left: 0;}
#main .slide ul li{float: left;}
#main .slide ul li a{}
#main .slide ul li a img{width: 100%; height: 350px;}
#main .content{width: 100%; height: 200px;}
#main .content section{width: 33.33%; height: 200px;float: left;}
#main .content section h2.on{width: 100px; height: 50px; text-align: center;line-height: 40px; background-color: yellow; background-clip: content-box;padding: 5px;font-size: 20px;}
#main .content section h2.on:hover{background-color: #eee;color: #fff;}
#main .content .board{}
#main .content .board ul{width: 100%;height: 150px;}
#main .content .board ul li{}
#main .content .board ul li a{width: 100%; height: 37.5px; line-height: 37.5px;font-size: 12px;text-align: left;}
#main .content .board ul li:hover{background-color: #494949;color: #fff;}
#main .content .board ul li a span{display: inline-block;}
#main .content .board ul li a span.tit{height: 100%;width: 75%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#main .content .board ul li a span.date{height: 100%;width: 25%;}
#main .content .gall{}
#main .content .gall ul{width: 100%; height: 150px;}
#main .content .gall ul li{float: left; width: 33.33%;}
#main .content .gall ul li a{padding: 35px 5px;}
#main .content .gall ul li a img{width: 100%;}
#main .content .direct h2{width: 100%; height: 200px;padding-top: 12px;}
#main .content .direct h2 img{width: 100%; height: 100%;}
#footer{width: 100%; height: 100px;position: relative;}
#footer > div{float: left;}
#footer .logo{width: 200px;height: 100px;}
#footer .logo img{margin-top: 30px;}
#footer .copy{width: 400px;height: 100px;text-align: center;line-height: 100px;font-weight: 500;}
#footer .fam{width: 200px;height: 100px;line-height: 100px;text-align: center;padding-top: 35px;}
#footer .fam select{height: 30px;}
#footer .fam button{height: 30px;}$(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(){
idx -= 800;
if(idx < -1600) idx = 0;
$('#main .slide ul').animate({left : idx + 'px'}, 1000);
}, 3000);
$('#main .content .board ul li').eq(0).click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});