웹디자인기능사 실기 C-1 입니다.
과제명 : 해운대빛축제
문제PDF : https://devpiki.github.io/assets/web_design/plan/C-1.pdf
결과물
https://devpiki.github.io/assets/web_design/result/C_1/index.html
해운대빛축제
Title Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam incidunt quibusdam reprehenderit quia animi maiores corporis tenetur expedita. Quod animi ex, voluptatum molestias fugit amet accusamus officiis culpa odit eaque? X 닫기
devpiki.github.io
소스
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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.4.min.js"></script>
<script src="./js/action.js"></script>
</head>
<body>
<div class="modal">
<div class="modal-pop">
<p>Title</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam incidunt quibusdam reprehenderit quia animi maiores corporis tenetur expedita. Quod animi ex, voluptatum molestias fugit amet accusamus officiis culpa odit eaque?</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="#">공지사항</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="contents">
<section class="board">
<h2 class="b01 on">공지사항</h2>
<ul class="b01">
<li><a href="#">공지사항 타이틀 01<span>2021-01-01</span></a></li>
<li><a href="#">공지사항 타이틀 02<span>2021-01-01</span></a></li>
<li><a href="#">공지사항 타이틀 03<span>2021-01-01</span></a></li>
<li><a href="#">공지사항 타이틀 04<span>2021-01-01</span></a></li>
<li><a href="#">공지사항 타이틀 05<span>2021-01-01</span></a></li>
</ul>
<h2 class="b02">갤러리</h2>
<ul class="b02">
<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 class="hide-title">배너</h2>
<a href="#"><img src="./img/banner.png" alt="배너"></a>
</section>
<section class="direct">
<h2 class="hide-title">바로가기</h2>
<a href="#"><img src="./img/direct.png" alt="바로가기"></a>
</section>
</div>
</main>
<footer id="footer">
<div class="logo">
<img src="./img/logo2.png" alt="로고2">
</div>
<div class="footermenu">
<p><a href="#">법적고지</a></p>
<p><a href="#">개인정보취급방침</a></p>
<p><a href="#">개인정보처리방침</a></p>
</div>
<div class="copy">
copyright© by 해운대빛축제 all rights reserved.
</div>
</footer>
</div>
</div>
</body>
</html>@charset "UTF-8";
*{margin: 0; padding: 0; vertical-align: top;box-sizing: border-box;}
html, body{width: 100%; height: 100%; background-color: #fff; color: #222328;}
a{text-decoration: none;width: 100%; height: 100%;text-align: center;display: inline-block;color: inherit;}
ul,li{list-style-type: none;}
.clearfix::before, .clearfix::after{
content: "";
clear: both;
display: table;
}
.hide-title{width: 1px; height: 1px; position: absolute !important;
margin: -1px; overflow: hidden;text-indent: -99999px; z-index: -99999;font-size: 1px;}
.modal{position: fixed;width: 100%;height: 100%;z-index: 3;background-color: rgba(0,0,0,.3);display: none;}
.modal .modal-pop{position: absolute;top: 50%;left: 50%;width: 500px;transform: translate(-50%, -50%);background-color: #fff;}
.modal p{margin: 15px;}
.modal p:nth-child(1){}
.modal p:nth-child(2){}
.modal p:nth-child(3){text-align: right;}
.modal button{}
#wrap{width: 1000px;}
#header{float: left;width: 200px;}
#header h1{}
#header h1 a{margin: 10px 0;}
#header h1 a img{width: 100%;}
#header nav{margin: 10px;}
#header nav>ul{}
#header nav>ul>li{}
#header nav>ul>li>a{height: 40px;line-height: 40px;}
#header nav>ul>li:hover >a{background-color: blue;color: #fff;}
#header nav ul.submenu{display: none;}
#header nav ul.submenu li{}
#header nav ul.submenu li a{height: 30px;line-height: 30px;}
#header nav ul.submenu li:hover a{background-color: blue;color: #fff;}
.container{float: left;width: 800px;}
#main{}
#main .slide{width: 100%;height: 350px;position: relative;overflow: hidden;}
#main .slide ul{}
#main .slide ul li{}
#main .slide ul li a{}
#main .slide ul li a img{width: 800px;height: 350px;}
#main .contents{width: 100%;height: 200px;}
#main .contents section{width: 33.33%;height: 100%;float: left;position: relative;}
#main .contents .board{}
#main .contents .board h2{position: absolute;top: 0;left: 0;width: 100px;height: 40px;background-color: #d9d9d9;
color: #c3c3c3;text-align: center;line-height: 40px;font-size: 20px;cursor: pointer;}
#main .contents .board h2.b01{}
#main .contents .board h2.b02{left: 100px;}
#main .contents .board h2.on{background-color: #fff;color: blue;}
#main .contents .board ul{position: absolute;top: 40px;left: 0;width: 100%;height: 160px;}
#main .contents .board ul.b01{}
#main .contents .board ul.b01 li{}
#main .contents .board ul.b01 li a{height: 32px;text-align: left;line-height: 32px;}
#main .contents .board ul.b01 li a span{float: right;}
#main .contents .board ul.b02{display:none;}
#main .contents .board ul.b02 li{width: 33.33%;height: 100%;float: left;}
#main .contents .board ul.b02 li a{padding:30px 5px 0 5px;}
#main .contents .board ul.b02 li a img{width: 100%;}
#main .contents .banner img{width: 100%;height: 100%;}
#main .contents .direct img{width: 100%;height: 100%;}
#footer{width: 800px;height: 100px;position: relative;}
#footer>div{position: absolute;}
#footer div.logo{left: 0;top: 0;width: 200px;height: 100px;}
#footer div.logo img{width: 100%;margin-top: 30px;}
#footer div.footermenu{left: 200px;top: 0;width: 600px;height: 50px;padding: 0 20px;line-height: 50px;}
#footer div.footermenu p{float: left;width: 33.33%;}
#footer div.footermenu p a{}
#footer div.copy{left: 200px;top: 50px;width: 600px;height: 50px;line-height: 50px;text-align: center;}$(document).ready(function(){
$('#header nav>ul>li').mouseover(function(){
$(this).find('ul.submenu').stop().slideDown();
});
$('#header nav>ul>li').mouseout(function(){
$(this).find('ul.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 .contents .board h2').click(function(){
$('#main .contents .board h2').removeClass('on');
$('#main .contents .board ul').hide();
$(this).addClass('on');
$(this).next().show();
});
$('#main .contents .board ul.b01 li').eq(0).click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});
'Web > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 C-3 (0) | 2021.11.16 |
|---|---|
| 웹디자인기능사 실기 C-2 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-4 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-3 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-2 (0) | 2021.11.16 |
댓글