웹디자인기능사
웹디자인기능사 실기 코드 F-3 오픈뱅킹
ddururu
2025. 2. 24. 19:20
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.12.3.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap">
<header id="header" class="flx j_spc_btw">
<div class="header_wrap flx j_spc_btw">
<h1 class="logo"><a href="#"><img src="images/logo.png" alt="로고"></a></h1>
<nav>
<ul class="dep1 flx j_flx_end">
<li><a href="#">조회</a></li>
<li><a href="#">이체</a></li>
<li><a href="#">공과금</a></li>
<li><a href="#">외환</a></li>
</ul>
<div class="sub_menu">
<div class="flx j_flx_end">
<ul>
<li><a href="#">계좌조회</a></li>
<li><a href="#">거래내역조회</a></li>
<li><a href="#">휴먼계좌조회</a></li>
<li><a href="#">수표/어음 조회</a></li>
</ul>
<ul>
<li><a href="#">계좌이체</a></li>
<li><a href="#">다계좌이체</a></li>
<li><a href="#">자동이체</a></li>
<li><a href="#">예약이체</a></li>
</ul>
<ul>
<li><a href="#">지로/생활요금</a></li>
<li><a href="#">지방세</a></li>
<li><a href="#">국세/관세</a></li>
<li><a href="#">벌칙금/벌과금</a></li>
</ul>
<ul>
<li><a href="#">금리</a></li>
<li><a href="#">환율/외화예금</a></li>
<li><a href="#">글로벌뱅킹</a></li>
<li><a href="#">외화송금</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main id="main">
<div class="slide">
<ul class="slide_wrap flx a_center">
<li><a href="#"><img src="images/slide1.png" alt="슬라이드1"><span>오픈뱅킹 슬라이드이미지1</span></a></li>
<li><a href="#"><img src="images/slide2.png" alt="슬라이드2"><span>오픈뱅킹 슬라이드이미지2</span></a></li>
<li><a href="#"><img src="images/slide3.png" alt="슬라이드3"><span>오픈뱅킹 슬라이드이미지3</span></a></li>
</ul>
</div>
<div class="conts">
<ul class="link flx j_spc_btw a_center">
<li><a href="#" class="flx a_center"><img src="images/link_1.png" alt="바로가기1"><span>계좌조회</span></a></li>
<li><a href="#" class="flx a_center"><img src="images/link_2.png" alt="바로가기2"><span>계좌이체</span></a></li>
<li><a href="#" class="flx a_center"><img src="images/link_3.png" alt="바로가기3"><span>예약이체</span></a></li>
<li><a href="#" class="flx a_center"><img src="images/link_4.png" alt="바로가기4"><span>환율/외화예금</span></a></li>
<li><a href="#" class="flx a_center"><img src="images/link_5.png" alt="바로가기5"><span>외화송금</span></a></li>
</ul>
<div class="banner flx a_center">
<a href="#"><img src="images/banner.png" alt="배너이미지"></a>
<div class="txt">
<h3>오픈뱅킹 1주년 이벤트</h3>
<p>2024-06-03</p>
<p>오픈뱅킹 1주년을 맞이하여 수수료를 면제해드립니다. 자세한 사항은 메인 홈페이지 참고 부탁드립니다.</p>
</div>
</div>
<div class="board">
<div class="flx a_center">
<h4 class="b01 on">공지사항</h4>
<h4 class="b02">갤러리</h4>
</div>
<div class="board_conts">
<ul class="notice">
<li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 1번 공지사항입니다.<span>2024-06-03</span></a></li>
<li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 2번 공지사항입니다.<span>2024-06-03</span></a></li>
<li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 3번 공지사항입니다.<span>2024-06-03</span></a></li>
<li class="flx j_spc_btw"><a href="#" class="flx j_spc_btw">오픈뱅킹 사이트의 4번 공지사항입니다.<span>2024-06-03</span></a></li>
</ul>
<ul class="gallery flx j_spc_btw">
<li><a href="#" class="flx flx_col j_center"><img src="images/gallery1.png" alt="갤러리1"><span>2024-06-03</span></a></li>
<li><a href="#" class="flx flx_col j_center"><img src="images/gallery2.png" alt="갤러리2"><span>2024-06-03</span></a></li>
<li><a href="#" class="flx flx_col j_center"><img src="images/gallery3.png" alt="갤러리3"><span>2024-06-03</span></a></li>
</ul>
</div>
</div>
</div>
</main>
<footer id="footer">
<div class="footer_wrap flx a_center">
<a href="#"><img src="images/f_logo.png" alt="footer로고"></a>
<div class="flx flx_col">
<ul class="family flx a_center">
<li><a href="#">footerMenu1</a></li>
<li><a href="#">footerMenu2</a></li>
<li><a href="#">footerMenu3</a></li>
<li><a href="#">footerMenu4</a></li>
<li><a href="#">footerMenu5</a></li>
</ul>
<div class="copyright">
COPYRIGHT © by WEBDESIGN. ALL RIGHTS RESERVED
</div>
</div>
</div>
</footer>
<div class="modal_bg">
<div class="modal">
<div class="modal_tit">오픈뱅킹 공지사항</div>
<div class="modal_conts">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
</div>
<button type="button">닫기</button>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/*reset*/
* { padding: 0; margin: 0; box-sizing: border-box; }
html { width: 100vw; height: 100vh; }
body { width: 100%; min-height: 100%; background-color: #fff; font-size: 15px; color: #666; }
ul,ol,li { list-style-type: none; }
a,em { text-decoration: none; color: #666; display: block; text-align: center; }
button { display: block; text-align: center; border: 0; }
img { vertical-align: top; }
/*공통*/
.wrap { width: 100%; height: 100%; position: relative; }
.flx { display: flex; }
.flx_col { flex-direction: column; }
.a_center {align-items: center;}
.a_spc_btw { align-items: space-between; }
.a_flx_end { align-items: flex-end; }
.a_flx_st { align-items: flex-start; }
.j_center{ justify-content: center;}
.j_spc_btw { justify-content: space-between; }
.j_flx_end { justify-content: flex-end; }
.j_flx_st { justify-content: flex-start; }
.hide { width: 1px; height: 1px; text-indent: -999999px; overflow: hidden; position: absolute; top: -9999px; left: -999999px; }
/*header*/
#header { width: 100%; height: 100px; position: relative; border-bottom: 1px solid #eee; }
.header_wrap { width: 1340px; height: 100%; margin: 0 auto; padding: 0 10px; }
.header_wrap .logo { width: 200px; height: auto; margin-top: 25px; }
.dep1 {height: 42px; line-height: 42px; margin-top: 58px; }
.header_wrap li { width: 160px; height: 42px; line-height: 42px; }
.header_wrap li:hover { background-color: #0A9B97; }
.header_wrap li a { font-size: 17px; font-weight: 700; }
.header_wrap li:hover a { color: #fff; }
.sub_menu { display: none; width: 100%; background: #fff; position: absolute; top: 100px; left: 0; z-index: 2; }
.sub_menu > div { width: 1340px; margin: 0 auto; padding: 0 10px; }
/*main*/
.conts{position: relative;}
.slide { width: 100%; height: 350px; overflow: hidden; }
.slide .slide_wrap li { position: relative; height: 350px; }
.slide .slide_wrap li > a { display: block; height: 100%; }
.slide .slide_wrap li > a > span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 10px 20px; font-weight: 700; }
.link { position: absolute; top:-80px; left: 50%; transform: translateX(-50%); width: 1340px; height: 80px; padding: 0 30px; margin: 0 auto; background-color: rgba(0, 0, 0, 0.3); }
.link span{ margin-left: 8px; font-weight: bold; color: #fff;}
.banner { width: 1340px; margin: 0 auto; background-color: #0A9B97; }
.banner .txt { margin-left: 30px; color: #fff;}
.banner .txt h3 { line-height: 42px; height: 42px; }
.board { width: 1340px; margin: 0 auto; }
.board h4 { width: 120px; padding: 0 20px; height: 38px; line-height: 38px; background-color: #e4e4e4; text-align: center; cursor: pointer; }
.board h4.on { background-color: #F04467; color: #fff; text-align: center; }
.board > div { width: 60%;}
.notice { width: 100%; height: 152px; }
.notice li { height: 38px; line-height: 38px; padding: 0 10px; }
.notice li:nth-child(2n){ background: rgb(240, 68, 103, 0.2); }
.notice li > a { width: 100%; }
.notice li > a > span { display: inline-block; width: 20%; }
.gallery { display: none; height: 152px; }
.gallery >li:hover a > img { animation-duration: 3s; animation-name: opa; animation-iteration-count: infinite; }
@keyframes opa {
from{
opacity: 30%;
}
to{
opacity: 100%;
}
}
/*footer*/
#footer { height: 120px; width: 100%; }
.footer_wrap { height: 100%; width: 1340px; margin: 0 auto; background-color: #efefef; }
.footer_wrap > a { width: 240px; }
.footer_wrap > div { height: 100%; }
.footer_wrap > div > ul { height: 70%; }
.footer_wrap .family li{ padding:0 30px; border-right: 1px solid #666; }
.footer_wrap .family li:first-of-type{ padding-left: 0; }
.footer_wrap .family li:last-of-type{ border-right: none; }
/*modal*/
.modal_bg { background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; }
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px 30px; width: 420px; height: auto; background-color: #fff; }
.modal .modal_tit { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.modal .modal_conts { line-height: 32px; }
.modal button { width: 150px; color: #fff; background-color: #0A9B97; text-align: center; margin: 10px auto 0; padding: 10px 0; cursor: pointer; }
JQUERY
$(document).ready(function(){
//사이드메뉴
$('.dep1 li').mouseover(function(){
$('.sub_menu').stop().fadeIn(300);
})
$('.header_wrap').mouseleave(function(){
$('.sub_menu').stop().fadeOut(300);
})
//슬라이드
setInterval(function(){
$('.slide_wrap').delay(3000);
$('.slide_wrap').animate({marginLeft:'-100%'});
$('.slide_wrap').delay(3000);
$('.slide_wrap').animate({marginLeft:'-200%'});
$('.slide_wrap').delay(3000);
$('.slide_wrap').animate({marginLeft:'0'});
})
//공지사항 갤러리 탭 color변경 + 컨텐츠내용변경
$('.board .b02').click(function(){
$('.b01').removeClass('on');
$('.b02').addClass('on');
$('.notice').css('display','none');
$('.gallery').css('display','flex');
})
$('.board .b01').click(function(){
$('.b02').removeClass('on');
$('.b01').addClass('on');
$('.gallery').css('display','none');
$('.notice').css('display','block');
})
//modal
$('.notice li:first-of-type').click(function(){
$('.modal_bg').stop().fadeIn(500);
})
$('.modal button').click(function(){
$('.modal_bg').stop().fadeOut(500);
})
});