웹디자인기능사 실기 A-2 입니다.
과제명 : Green복지재단
문제PDF : https://devpiki.github.io/assets/web_design/plan/A-2.pdf
결과물
https://devpiki.github.io/assets/web_design/result/A_2/index.html
Green복지재단
타이틀 Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci asperiores deleniti consequatur numquam! Sit quia eos tenetur porro quasi culpa, dignissimos aspernatur labore excepturi dolore modi mollitia perspiciatis architecto facere? 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="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>Green복지재단</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-1.12.4.min.js"></script>
<script src="./js/script.js"></script>
</head>
<body>
<div class="modal">
<div class="modal-pop">
<div>타이틀</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci asperiores deleniti consequatur numquam! Sit quia eos tenetur porro quasi culpa, dignissimos aspernatur labore excepturi dolore modi mollitia perspiciatis architecto facere?</div>
<div><button type="button">X 닫기</button></div>
</div>
</div>
<div id="wrap">
<header id="header" class="clearfix">
<h1><a href="#"><img src="./img/logo.png" alt="Green복지재단"></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>
<div class="nav-bg"></div>
</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="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="갤러리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>
</div>
</main>
<footer id="footer">
<div class="logo">
<img src="./img/logo2.png" alt="회사로고2">
</div>
<div class="copy">
<address>서울특별시 은평구 진관4로 107 (진관동) / 전화 : 02-1111-1111 / 팩스 : 02-2222-2222</address>
<p>copyright © GREEN복지재단. All rights reserved.</p>
</div>
<div class="fam">
<select name="sel01" id="sel01">
<option value="01">패밀리사이트</option>
<option value="02">빨강 복지재단</option>
<option value="03">누리끼리 복지센터</option>
<option value="04">블루 복지재단</option>
</select><button type="button">이동</button>
</div>
</footer>
</div>
</body>
</html>
- ./css/style.css
@charset "UTF-8"; /*필수입니다. 꼭 작성하세요*/
/*=====리셋 관련 style=====*/
*{margin: 0; padding: 0;vertical-align: top;box-sizing: border-box;}
html, body{background-color: #fff;color: #333;width: 100%; height: 100%;}
a{display: inline-block; color: inherit; text-decoration: none;text-align: center;width: 100%; height: 100%;}
ul, li{list-style-type:none;}
table{border-collapse: collapse;}
i, em, address{font-style: normal;}
/*float 관련해서 height 가 확장되지 않는 이슈관련된 class 입니다.*/
/*숙지하시면 나중에 업무에서 요긴하게 쓰실수 있습니다*/
.clearfix::before, .clearfix::after{
content: "";
clear: both;
display: table;
}
/*section 쪽에서 헤딩태그를 안보이게 하는 style 입니다.*/
/*꼭 이렇게 다 작성하실 필요는 없습니다만, 숙지하시면 나중에 업무에서 요긴하게 쓰실수 있습니다.*/
.hidden-title{width: 1px; height: 1px; position: absolute;overflow: hidden;line-height: 1px; z-index: -999999;text-indent: -999999;margin: -1px;font-size: 1px;}
/*=================================================*/
/*====모달 팝업 style=====*/
.modal{position: fixed;width: 100%; height: 100%;background-color: rgba(0,0,0,.3);z-index: 11;display: none;}
.modal .modal-pop{width: 500px; position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%); background-color: #fff;}
.modal div{margin: 15px;}
.modal div:nth-child(1){}
.modal div:nth-child(2){}
.modal div:nth-child(3){ text-align: right;}
.modal button{}
#wrap{width: 1200px;margin: 0 auto;}
/*header와 main, footer 쪽은 position을 주시는것이 좋습니다.*/
/*메뉴에 애니메에션 처리를 할 때 postion 을 안주면 문제가 생길 수 있습니다.*/
#header{position: relative;width: 100%;height: 100px;}
#header h1{float: left;height: 100%;width: 200px;}
#header h1 a{}
#header h1 a img{height: 40px; margin: 30px 0;}
#header nav{float: right;margin: 60px 10px 0 0;width: 800px;position: relative;}
#header nav > ul{position: absolute;top: 0;left: 0;z-index: 2;}
#header nav > ul > li{width: 200px;float: left;}
#header nav > ul > li > a{height: 40px;line-height: 40px;}
#header nav > ul > li:hover > a{background-color: #1d8844;color: #fff;}
#header nav ul.submenu{background-color:#1d8844 ;color: #fff;height: 140px;display: none;}
#header nav ul.submenu li{}
#header nav ul.submenu li a{height: 40px;line-height: 40px;}
#header nav ul.submenu li:hover a{background-color: #fff;color: #1d8844;}
#header .nav-bg{position: absolute;top: 100px;left: 0;background-color:#1d8844 ;width: 100%; height: 140px;z-index: 1;display: none;}
#main{position: relative;width: 100%;height: 500px;}
#main .slide{width: 100%; height: 300px; position: relative;overflow: hidden;}
#main .slide ul{position: absolute;top: 0; left: 0;width: 3600px;}
#main .slide ul li{float: left;width: 1200px;height: 300px;}
#main .slide ul li a{}
#main .slide ul li a img{width: 100%; height: 100%;}
#main .contents{width: 100%; height: 200px;}
#main .contents section{float: left;width: 400px;height: 100%;}
#main .contents h2.title{width: 100px;text-align: center;height: 40px;font-size: 20px;line-height: 40px;background-color: #eee;color: #b2b2b2;}
#main .contents h2.on{color:#434748 ;background-color: #fff;}
#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%;height: 100%;}
#main .contents .gall ul li a{}
#main .contents .gall ul li a img{margin-top: 30px;}
#main .contents .banner{}
#main .contents .banner a{}
#main .contents .banner a img{width: 100%; height: 100%;}
#footer{position: relative;width: 100%;height: 100px;}
#footer div{float: left;height: 100%;}
#footer .logo{width: 200px; height: 100%;}
#footer .logo img{margin-top: 30px;}
#footer .copy{width: 800px; height: 100%;text-align: center;
line-height: 30px;
padding-top: 20px;}
#footer .copy address{}
#footer .copy p{}
#footer .fam{width: 200px; height: 100%;text-align: center;padding-top: 37.5px;}
#footer .fam select{height: 25px;}
#footer .fam button{height: 25px;}
- ./js/script.js
$(document).ready(function(){
//메뉴
$('#header nav > ul > li').mouseover(function(){
$('#header nav ul.submenu').stop().slideDown();
$('#header .nav-bg').stop().slideDown();
});
$('#header nav > ul > li').mouseout(function(){
$('#header nav ul.submenu').stop().slideUp();
$('#header .nav-bg').stop().slideUp();
});
//메인 슬라이드
var idx = 0;
setInterval(function(){
idx -= 1200;
if(idx< -2400) idx = 0;
$('#main .slide ul').animate({left:idx}, 1000);
}, 3000);
//모달 팝업
$('#main .contents .board ul li a').eq(0).click(function(){
$('.modal').show();
});
$('.modal 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-3 (0) | 2021.11.16 |
| 웹디자인기능사 실기 A-1 (0) | 2021.11.16 |
댓글