웹디자인기능사 실기 A-3 입니다.
과제명 : 강원천문대
문제PDF : https://devpiki.github.io/assets/web_design/plan/A-3.pdf
결과물
https://devpiki.github.io/assets/web_design/result/A_3/index.html
강원천문대
Title Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, fugit quaerat laboriosam iure voluptatum sunt praesentium earum laudantium, incidunt sit, cum dolores dolore? Sapiente sunt dolorem voluptatum excepturi reprehenderit cum. X 닫기
devpiki.github.io
기본 주의사항 : https://pikisvill.tistory.com/32
웹디자인 기능사 실기시험 준비시 주의사항
pdf 에 있는 배경색 및 기본텍스트색은 있을시 설정하시기 바랍니다 html, body{width: 100%; height: 100%;background-color: #f2f2f2;color: #333;} 주조색과 보조색이 있을시 디자인적으로 잘 구성하여 사용하..
pikisvill.tistory.com
소스
- index.html
<!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. Delectus, fugit quaerat laboriosam iure voluptatum sunt praesentium earum laudantium, incidunt sit, cum dolores dolore? Sapiente sunt dolorem voluptatum excepturi reprehenderit cum.</p>
<p><button type="button">X 닫기</button></p>
</div>
</div>
<div id="wrap">
<header id="header">
<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>
</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>
<main id="main">
<div class="slide">
<ul>
<li><a href="#"><img src="./img/slide01.png" alt="슬라이드1"></a></li>
<li><a href="#"><img src="./img/slide02.png" alt="슬라이드2"></a></li>
<li><a href="#"><img src="./img/slide03.png" alt="슬라이드3"></a></li>
</ul>
</div>
<div class="contents">
<section class="board">
<h2 class="bo01 on">공지사항</h2>
<ul class="bo01">
<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="bo02">갤러리</h2>
<ul class="bo02">
<li><a href="#"><img src="./img/gall01.png" alt="갤러리1"></a></li>
<li><a href="#"><img src="./img/gall02.png" alt="갤러리2"></a></li>
<li><a href="#"><img src="./img/gall03.png" alt="갤러리3"></a></li>
</ul>
</section>
<section class="banner">
<h2 class="hidden-title">배너</h2>
<a href="#"><img src="./img/banner.png" alt="배너"></a>
</section>
<section class="direct">
<h2 class="hidden-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="로고">
</div>
<div class="footer-menu">
<ul class="cleafix">
<li><a href="#">법적고지</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
</div>
<div class="copy">
copyright© by 강원천문대 all rights reserved.
</div>
</footer>
</div>
</body>
</html>
- ./css/style.css
@charset "UTF-8";/*필수입니다*/
/*=====리셋 관련 style=====*/
*{padding: 0; margin: 0;vertical-align: top;box-sizing: border-box;}
html, body{width: 100%; height: 100%; color: #333333; background-color: #fff;}
a{text-decoration: none;color: inherit;width: 100%;height: 100%;display: inline-block;text-align: center;}
ul, li{list-style-type:none;}
.clearfix::before, .clearfix::after{
content: "";
clear: both;
display: table;
}
.hidden-title{width: 1px;height: 1px;overflow: hidden;line-height: 1px;font-size: 1px;margin: -1px;z-index: -999999;text-indent: -999999px;position: absolute;}
/*====모달 팝업 style=====*/
.modal{position: fixed;width: 100%; height: 100%;z-index: 2;background-color: rgba(0,0,0,.3);display: none;}
.modal .modal-pop{width: 500px;background-color: #fff;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.modal .modal-pop p{margin: 10px;}
.modal .modal-pop p:nth-child(1){font-size: 20px;font-weight: 800;}
.modal .modal-pop p:nth-child(2){}
.modal .modal-pop p:nth-child(3){text-align: right;}
.modal .modal-pop button{padding: 5px;margin: 5px;}
#wrap{width: 1200px;height: 100%; margin: 0 auto;}
#header{width: 100%; height: 100px;position: relative;}
#header h1{float: left;width: 200px;height: 100%;}
#header h1 a{}
#header h1 a img{width: 100%;margin-top: 30px;}
#header nav{float: right; width: 800px;margin: 30px 30px 0 0;position: relative;}
#header nav>ul{width: 100%;position: absolute;z-index: 1;}
#header nav>ul>li{float: left;background-color: #fff;}
#header nav>ul>li>a{width: 200px;height: 40px;line-height: 40px;}
#header nav>ul>li:hover >a{background-color: #0066ad;color: #fff;}
#header nav ul.submenu{display: none;}
#header nav ul.submenu li{background-color: #fff;}
#header nav ul.submenu li a{width: 200px;height: 40px;line-height: 40px;}
#header nav ul.submenu li:hover a{background-color: #0066ad;color: #fff;}
#main{width: 100%; height: 500px;position: relative;}
#main .slide{width: 100%; height: 300px;position: relative;overflow: hidden;}
#main .slide ul{}
#main .slide ul li{}
#main .slide ul li a{}
#main .slide ul li a img{width: 1200px;height: 300px;}
#main .contents{width: 100%; height: 200px;position: relative;}
#main .contents section{float: left;width: 400px;height: 200px;position: relative;}
#main .contents section.board{}
#main .contents section.board h2{width: 100px;text-align: center;height: 40px;line-height: 40px;font-size: 20px;background-color: #c1c1c1;color: #8b8b8b;position: absolute;top: 0;left: 0;cursor: pointer;}
#main .contents section.board h2.on{background-color: #fff;color: #0066ad;}
#main .contents section.board ul{position: absolute;top: 40px;left: 0;height: 160px;width: 100%;}
#main .contents section.board h2.bo01{}
#main .contents section.board ul.bo01{}
#main .contents section.board ul.bo01 li{}
#main .contents section.board ul.bo01 li a{height: 31px; line-height: 31px;text-align: left;}
#main .contents section.board ul.bo01 li a span{float: right;}
#main .contents section.board h2.bo02{left: 100px;}
#main .contents section.board ul.bo02{display: none;}
#main .contents section.board ul.bo02 li{float: left;width: 33.33%;}
#main .contents section.board ul.bo02 li a{}
#main .contents section.board ul.bo02 li a img{margin-top: 30px;}
#main .contents section.banner{}
#main .contents section.banner a{}
#main .contents section.banner a img{width: 100%; height: 100%;}
#main .contents section.direct{}
#main .contents section.direct a{}
#main .contents section.direct a img{width: 100%; height: 100%;}
#footer{width: 100%; height: 100px;position: relative;}
#footer div.logo{position: absolute;top: 0;left: 0;width: 200px;height: 100px;}
#footer div.logo img{width: 100%;margin-top: 30px;}
#footer div.footer-menu{position: absolute;top: 0;left: 200px;width: 800px;height: 50px;line-height: 50px;}
#footer div.footer-menu ul{}
#footer div.footer-menu ul li{float: left;width: 33.33%;}
#footer div.footer-menu ul li a{}
#footer div.copy{position: absolute;top: 50px;left: 200px;width: 800px;height: 50px;line-height: 50px;text-align: center;}
- ./js/action.js
$(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 .contents section.board h2').click(function(){
$('#main .contents section.board h2').removeClass('on');
$('#main .contents section.board ul').hide();
$(this).addClass('on');
$(this).next().show();
});
//모달
$('#main .contents section.board ul.bo01 li').eq(0).find('a').click(function(){
$('.modal').show();
});
$('.modal .modal-pop button').click(function(){
$('.modal').hide();
});
});'Web > 웹디자인기능사' 카테고리의 다른 글
| 웹디자인기능사 실기 B-2 (0) | 2021.11.16 |
|---|---|
| 웹디자인기능사 실기 B-1 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-4 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-2 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-1 (0) | 2021.11.16 |
댓글