웹디자인기능사 실기 C-3 입니다.
과제명 : 남도맛기행 축제
문제PDF : https://devpiki.github.io/assets/web_design/plan/C-3.pdf
결과물
https://devpiki.github.io/assets/web_design/result/C_3/index.html
남도맛기행 축제
타이틀 Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum alias commodi impedit assumenda, perferendis eaque laboriosam autem iusto sunt molestias, possimus quis deleniti omnis animi. Reprehenderit distinctio recusandae quasi iure? X
devpiki.github.io
소스
<!DOCTYPE html>
<html lang="ko">
<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="modalpop">
<p>타이틀</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum alias commodi impedit assumenda, perferendis eaque laboriosam autem iusto sunt molestias, possimus quis deleniti omnis animi. Reprehenderit distinctio recusandae quasi iure?</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>
</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>
<li>
<a href="#">회원마당</a>
<ul class="submenu">
<li><a href="#">Q&A</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="contents clearfix">
<section class="board">
<h2 class="on">공지사항</h2>
<ul>
<li><a href="#"><span class="tit01">제2회 남도 맛기행 축제에 오세요.</span><span class="date">2021-01-01</span></a></li>
<li><a href="#"><span class="tit01">제2회 남도 맛기행 축제에 오세요.</span><span class="date">2021-01-01</span></a></li>
<li><a href="#"><span class="tit01">제2회 남도 맛기행 축제에 오세요.</span><span class="date">2021-01-01</span></a></li>
<li><a href="#"><span class="tit01">제2회 남도 맛기행 축제에 오세요.</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="banner">
<h2>
<a href="#"><img src="./img/direct.png" alt="배너"></a>
</h2>
</section>
</div>
</main>
<footer id="footer">
<div class="logo">
<a href="#"><img src="./img/logo2.png" alt="하단로고"></a>
</div>
<div class="footermenu">
<ul class="clearfix">
<li><a href="#">법적고지</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
</div>
<div class="copy">
Copyright by 남도맛기행축제. all right reserved.
</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 ;}
.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-size: 20px; font-weight: 500;}
.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;width: 200px; height: 650px;float: left;}
#header h1{width: 100%; height: 100px;}
#header h1 img{width: 100%;margin-top: 30px;}
#header nav{width: 100%;position: relative;}
#header nav > ul{}
#header nav > ul > li{}
#header nav > ul > li > a{width: 170px;margin-left: 15px;height: 50px;line-height: 50px;font-weight: 900;}
#header nav li:hover > a{background-color: #cbcbcb; color: #fff;}
#header nav .submenu{position: absolute;top: -15px;left: 185px; background-color: #eee;z-index: 1;display: none; height: 225px;}
#header nav .submenu li{}
#header nav .submenu li a{width: 170px; height: 45px;line-height: 45px;}
.container{float: right;width: 800px;height: 100%;}
#main{width: 100%; height: 550px;position: relative;}
#main .slide{width: 800px; height: 350px;overflow: hidden;position: relative;}
#main .slide ul{width: 2400px; height: 100%;position: absolute;}
#main .slide ul li{float: left;}
#main .slide ul li a{}
#main .slide ul li a img{width: 800px; height: 350px;}
#main .contents section{float: left; width: 33.33%;height: 200px;}
#main .contents h2.on{font-size: 20px; color: #bb4e62;font-weight: 900;height: 50px; padding: 5px; text-align: center;width: 100px;line-height: 40px; background-clip: content-box;}
#main .contents h2.on:hover{ background-color: #d2aec2; color: #fff;}
#main .contents .board{}
#main .contents .board h2{}
#main .contents .board ul{width: 100%; height: 150px;}
#main .contents .board ul li{}
#main .contents .board ul li a{height: 37.5px; line-height: 37.5px;text-align: left;font-size: 14px;}
#main .contents .board ul li a:hover{background-color: #eee;color: #fff;}
#main .contents .board ul li a span.tit01{float: left; width: 70%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#main .contents .board ul li a span.date{float: right; width: 30%; font-size: 13px;
text-align: right;}
#main .contents .gall{}
#main .contents .gall h2{}
#main .contents .gall ul{}
#main .contents .gall ul li{float: left;width: 33.33%;height: 150px;}
#main .contents .gall ul li a{}
#main .contents .gall ul li a img{height: 80px;margin-top: 35px;width: 80px;}
#main .contents .banner{}
#main .contents .banner h2{}
#main .contents .banner h2 a{}
#main .contents .banner h2 a img{width: 100%; margin-top: 25px;}
#footer{width: 100%; height: 100px;position: relative;}
#footer .logo{position: absolute;top: 0;left: 0;width: 200px;height: 100px;}
#footer .logo a{}
#footer .logo a img{width: 100%; margin-top: 30px;}
#footer .footermenu{position: absolute;top: 0;right: 0;width: 600px;height: 50px;padding: 0 10px;line-height: 50px;}
#footer .footermenu ul{width: 100%;}
#footer .footermenu ul li{float: left; width: 33.33%;}
#footer .footermenu ul li a{}
#footer .copy{position: absolute;bottom: 0;right: 0;width: 600px;height: 50px;font-weight: 700; text-align: center;line-height: 50px;}$(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;
$('.slide ul').animate({left : idx + 'px'}, 1000);
},3000);
//#main .contents .board ul li
$('#main .contents .board ul li').eq(0).click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});
'Web > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인 기능사 실기시험 준비시 주의사항 (0) | 2021.11.17 |
|---|---|
| 웹디자인기능사 실기 C-4 (0) | 2021.11.16 |
| 웹디자인기능사 실기 C-2 (0) | 2021.11.16 |
| 웹디자인기능사 실기 C-1 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-4 (0) | 2021.11.16 |
댓글