웹디자인기능사 실기 B-2 입니다.
과제명 : 대한투어
문제PDF : https://devpiki.github.io/assets/web_design/plan/B-2.pdf
결과물
https://devpiki.github.io/assets/web_design/result/B_2/index.html
대한투어
Title Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum numquam id aut ducimus veniam iure quasi facilis! Ipsum nemo cumque quibusdam labore unde soluta maxime, hic quos ut a? Nostrum. X 닫기
devpiki.github.io
소스
<!DOCTYPE html>
<html lang="ko">
<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. Eum numquam id aut ducimus veniam iure quasi facilis! Ipsum nemo cumque quibusdam labore unde soluta maxime, hic quos ut a? Nostrum.</p>
<p><button type="button">X 닫기</button></p>
</div>
</div>
<div id="wrap">
<header id="header">
<div class="container">
<h1><a href="#"><img src="./img/logo.png" alt="대한투어"></a></h1>
<nav>
<ul class="clearfix">
<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>
</ul>
</li>
</ul>
</nav>
<div class="nav-bg"></div>
</div>
</header>
<main id="main" class="container">
<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="title on">공지사항</h2>
<ul>
<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>
</section>
<section class="gall">
<h2 class="title">갤러리</h2>
<ul>
<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 class="hide-title">바로가기</h2>
<a href="#"><img src="./img/banner.png" alt="바로가기"></a>
</section>
</div>
</main>
<footer id="footer">
<div class="container">
<div class="copy">
Copyright by 대한투어, All right reserved.
</div>
<div class="sns">
<a href="#">
<img src="./img/SNS1.png" alt="sns1">
</a>
<a href="#">
<img src="./img/SNS2.png" alt="sns1">
</a>
<a href="#">
<img src="./img/SNS3.png" alt="sns1">
</a>
</div>
<div class="familly">
<select>
<option value="">패밀리사이트</option>
<option value="02">하나투어</option>
<option value="03">민국투어</option>
<option value="04">기타투어</option>
</select>
<button type="button">이동</button>
</div>
</div>
</footer>
</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: #333;}
a{text-decoration: none; color: inherit;width: 100%; height: 100%;text-align: center;display: inline-block;}
ul, li{list-style-type: none;}
.clearfix::before, .clearfix::after{
content: "";
clear: both;
display: table;
}
.hide-title{width: 1px; height: 1px;line-height: 1px;margin: -1px;
position: absolute !important;overflow: hidden;font-size: 1px;
text-indent: -99999px;z-index: -99999;}
.modal{position: fixed;width: 100%;height: 100%;
z-index: 5;background-color: rgba(0, 0, 0, .3);display: none;}
.modal .modal-pop{position: absolute;width: 500px;background-color: #fff;
top: 50%;left: 50%;transform: translate(-50%, -50%);}
.modal .modal-pop p{margin: 10px;}
.modal .modal-pop p:nth-child(1){font-size: 25px;font-weight: 800;}
.modal .modal-pop p:nth-child(2){}
.modal .modal-pop p:nth-child(3){text-align: right;}
.modal .modal-pop button{height: 30px;width: 70px;}
#wrap{width: 100%;height: 100%;}
.container{width: 1200px;margin: 0 auto;height: 100%;position: relative;}
#header{width: 100%; height: 100px;}
#header h1{float: left;width: 200px;height: 100%;}
#header h1 a{}
#header h1 a img{width: 100%;margin-top: 30px;}
#header nav{float: right;margin: 60px 10px 0 0;width: 800px;position: relative;}
#header nav>ul{position: absolute;z-index: 2;}
#header nav>ul>li{height: 40px;line-height: 40px;float: left;width: 200px;}
#header nav>ul>li:hover >a{background-color: #00C73C;color: #fff;}
#header nav>ul>li>a{}
#header nav .submenu{display: none;}
#header nav .submenu li{height: 40px;line-height: 40px;background-color: #00C73C;color: #fff;}
#header nav .submenu li a{}
#header nav .submenu li:hover a{background-color: #fff;color: #333;}
#header .nav-bg{background-color: #00C73C;position: absolute;z-index: 1;
width: 1200px;height: 180px;top: 100px;left: 0;display: none;
}
#main{height: 500px;display: block;}
#main .slide{position: relative;overflow: hidden;height: 300px;}
#main .slide ul{width: 100%;height: 900px;position: absolute;}
#main .slide ul li{height: 300px;}
#main .slide ul li a{}
#main .slide ul li a img{width: 100%;height: 100%;}
#main .contents{position: relative;height: 200px;}
#main .contents section{float: left;width: 400px;height: 100%;}
#main .contents h2.title{height: 40px;width: 100px;font-size: 20px;
font-weight: 800;background-color: #d7d7d7;color: #eee;
line-height: 40px;text-align: center;}
#main .contents h2.on{background-color: #fff;color:#00C73C ;}
#main .contents .board{}
#main .contents .board h2{}
#main .contents .board ul{width: 100%;height: 160px;}
#main .contents .board ul li{width: 100%;height: 32px;line-height: 32px;}
#main .contents .board ul li a{text-align: left;}
#main .contents .board ul li a span{float: right;}
#main .contents .gall{}
#main .contents .gall h2{}
#main .contents .gall ul{width: 100%;height: 160px;}
#main .contents .gall ul li{float: left; width: 33.33%;}
#main .contents .gall ul li a{}
#main .contents .gall ul li a img{width: 100px;height: 100px;margin-top: 30px;}
#main .contents .direct{}
#main .contents .direct h2{}
#main .contents .direct a{}
#main .contents .direct a img{width: 100%;height: 100%;}
#footer{width: 100%; height: 100px;}
#footer .copy{top: 0;left: 0;width: 1000px;height: 100px;position: absolute;text-align: center;line-height: 100px;}
#footer .sns{top: 0;left: 1000px;width: 200px;height: 50px;position: absolute;padding: 5px;}
#footer .sns a{float: left;width: 33.33%;}
#footer .sns a img{height: 100%;}
#footer .familly{top: 50px;left: 1000px;width: 200px;height: 50px;position: absolute;text-align: center;}
#footer .familly select{height: 30px;margin-top: 10px;}
#footer .familly button{height: 30px;margin-top: 10px;}$(document).ready(function(){
$('#header nav>ul>li').mouseover(function(){
$('#header nav .submenu').stop().slideDown();
$('#header .nav-bg').stop().slideDown();
});
$('#header nav>ul>li').mouseout(function(){
$('#header nav .submenu').stop().slideUp();
$('#header .nav-bg').stop().slideUp();
});
//#main .slide ul
var idx = 0;
setInterval(function(){
idx -= 300;
if(idx<-600)idx=0;
$('#main .slide ul').animate({top:idx+'px'},1000);
},3000);
$('#main .contents .board ul li').eq(0).find('a').click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});
'Web > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 B-4 (0) | 2021.11.16 |
|---|---|
| 웹디자인기능사 실기 B-3 (0) | 2021.11.16 |
| 웹디자인기능사 실기 B-1 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-4 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-3 (0) | 2021.11.16 |
댓글