Web/웹디자인기능사
웹디자인기능사 실기 B-1
pikisvill
2021. 11. 16. 12:58
웹디자인기능사 실기 B-1 입니다.
과제명 : 대한은행
문제PDF : https://devpiki.github.io/assets/web_design/plan/B-1.pdf
결과물
https://devpiki.github.io/assets/web_design/result/B_1/index.html
대한은행
Title Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita cumque, accusamus culpa ratione consequatur inventore perferendis officiis in labore facilis voluptatibus provident pariatur quisquam blanditiis libero, aliquam nulla quidem nam. 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. Expedita cumque, accusamus culpa ratione consequatur inventore perferendis officiis in labore facilis voluptatibus provident pariatur quisquam blanditiis libero, aliquam nulla quidem nam.</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>
<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>
<li><a href="#">이용내역조회</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="container">
<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="슬라이드01"></a></li>
<li><a href="#"><img src="./img/slide03.png" alt="슬라이드01"></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="container">
<div class="logo">
<img src="./img/logo2.png" alt="하단로고">
</div>
<div class="footmenu">
<ul class="clearfix">
<li><a href="#">법적고지</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">개인정보처리방침</a></li>
</ul>
</div>
<div class="copy">
<span>사업자번호:111-22-333</span>
<span>상호명:(주)회사 이름</span>
<span>대표자:홍길동</span>
<span>통신판매업 신고:제8888-인천중구-9999호</span>
<span>개인정보관리책임자:이순신</span>
<span>상담전화:1588-1588</span>
<span>사업장주소:인천광역시 중구 개항로 49(내동,INS 6층) (주)회사 이름</span>
<span>E-mail : master@aaa.com)</span>
</div>
</div>
</footer>
</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: #333;}
a{text-decoration: none;width: 100%;height: 100%;text-align: center;color: inherit;display: inline-block;}
ul, li{list-style-type: none;}
.clearfix::before, .clearfix::after{
content: "";
clear: both;
display: table;
}
.hide-title{width: 1px;height: 1px;position: absolute !important;overflow: hidden;
z-index: -99999;text-indent: -99999px;margin: -1px;font-size: 1px;
line-height: 1px;}
.modal{position: fixed;width: 100%;height: 100%;
background-color: rgba(0,0,0,.3);z-index: 3;display: none;
}
.modal .modal-pop{position: absolute;top: 50%;left: 50%;
transform: translate(-50%, -50%);background-color: #fff;
padding: 5px;width: 500px;
}
.modal p{margin: 5px;}
.modal p:nth-child(1){font-size: 20px;font-weight: 800;}
.modal p:nth-child(2){}
.modal p:nth-child(3){text-align: right;}
.modal button{margin: 5px;width: 80px;height: 30px;}
#wrap{width: 100%; height: 100%;}
.container{position: relative;width: 1200px;margin: 0 auto;height: 100%;}
#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: absolute;z-index: 1;right: 0;background-color: #fff;}
#header nav>ul{}
#header nav>ul>li{float: left;width: 200px;height: 40px;line-height: 40px;}
#header nav>ul>li:hover >a{background-color: #E66B27;color: #fff;}
#header nav>ul>li>a{}
#header nav .submenu{height: 160px;background-color: #fff;display: none;}
#header nav .submenu li{width: 200px;height: 40px;line-height: 40px;}
#header nav .submenu li a{}
#header nav .submenu li:hover a{background-color: #E66B27;color: #fff;}
#main{height: 500px;}
#main .slide{width: 100%;height: 300px;position: relative;overflow: hidden;}
#main .slide ul{width: 3600px;position: absolute;top: 0;left: 0;}
#main .slide ul li{float: left;width: 1200px;height: 300px;}
#main .slide ul li a{}
#main .slide ul li a img{}
#main .contents{width: 100%;height: 200px;position: relative;}
#main .contents section{float: left;width: 400px;height: 200px;}
#main .contents .board{}
#main .contents .board h2{position: absolute;top: 0;left: 0;width: 100px;
height: 40px;line-height: 40px;text-align: center;background-color: #d4d4d4;color: #bbb;font-size: 20px;font-weight: 900;cursor: pointer;}
#main .contents .board h2.on{background-color: #fff;color: #E66B27;}
#main .contents .board ul{position: absolute;left: 0;top: 40px;}
#main .contents .board h2.b01{}
#main .contents .board ul.b01{width: 400px;}
#main .contents .board ul.b01 li{width: 100%; height: 32px;line-height: 32px;}
#main .contents .board ul.b01 li a{text-align: left;}
#main .contents .board ul.b01 li a span{float: right;}
#main .contents .board h2.b02{left: 100px;}
#main .contents .board ul.b02{width: 400px;height: 160px;display: none;}
#main .contents .board ul.b02 li{float: left;width: 33.33%;height: 100%;}
#main .contents .board ul.b02 li a{}
#main .contents .board ul.b02 li a img{width: 100px; height: 100px;margin-top: 30px;}
#main .contents .banner{}
#main .contents .banner h2{}
#main .contents .banner a{}
#main .contents .banner a img{width: 100%;height: 100%;}
#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;position: relative;background-color: #E66B27;}
/* #footer div{position: absolute;} */
#footer .logo{position: absolute;top: 0; left: 0;width: 200px;height: 100px;}
#footer .logo img{width: 100%;margin-top: 30px;}
#footer .footmenu{position: absolute;top: 0; left: 200px;width: 1000px;height: 50px;line-height: 50px;padding: 0 50px;}
#footer .footmenu ul{}
#footer .footmenu ul li{float: left;width: 33.33%;}
#footer .footmenu ul li a{}
#footer .copy{position: absolute;top: 50px; left: 200px;width: 1000px;height: 50px;padding: 0 10px;}
#footer .copy span{display: inline-block;font-size: 13px;margin: 0 10px;}$(document).ready(function(){
$('#header nav>ul>li').mouseover(function(){
$('#header nav .submenu').stop().slideDown();
});
$('#header nav>ul>li').mouseout(function(){
$('#header nav .submenu').stop().slideUp();
});
var idx = 0;
setInterval(() => {
idx -= 1200;
if(idx < -2400) idx = 0;
$('#main .slide ul').animate({left:idx+'px'}, 1000);
}, 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).find('a')
.click(function(){
$('.modal').show();
});
$('.modal button').click(function(){
$('.modal').hide();
});
});