웹디자인기능사 실기 코드 B-1 대한은행
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>B-1 대한은행</title>
<link href="./css/style.css" type="text/css" rel="stylesheet">
<script src="./js/jquery-1.12.3.js"></script>
<script src="./js/script.js"></script>
</head>
<body>
<header>
<div class="headerWrap">
<a class="logo" href="#">
<img src="./img/logo.png" alt="로고">
</a>
<nav class="mainMenu">
<a href="#">개인</a>
<a href="#">기업</a>
<a href="#">금융상품</a>
<a href="#">카드</a>
<!-- 서브 메뉴 -->
<nav class="subMenu">
<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>
</ul>
<ul>
<li><a href="#">카드 정보</a></li>
<li><a href="#">카드 신청</a></li>
<li><a href="#">이용내역조회</a></li>
</ul>
</nav>
</nav>
</div>
</header>
<main>
<!-- 이미지슬라이드 -->
<div class="imgSlide">
<a href="#"><img src="./img/img1.jpg" alt="같지만 다른 은행, 대한은행"><span class="imgText">같지만 다른 은행, 대한은행</span></a>
<a href="#"><img src="./img/img2.jpg" alt="일상에서 더 쉽게, 더 자주 "><span class="imgText">일상에서 더 쉽게, 더 자주 </span></a>
<a href="#"><img src="./img/img3.jpg" alt="나만의 은행, 대한은행"><span class="imgText">나만의 은행, 대한은행</span></a>
</div>
<!-- 컨텐츠 -->
<div class="contents">
<div>
<ul class="tabMenu"> <!-- tabMenu:공지사항과 갤러리 묶어줌 -->
<li class="active"><a href="#">공지사항</a>
<div class="tabBG notice">
<ul>
<li><a href="#">편리함과 혜택을 더한 대한은행 개선 안내<span>2020.11.24</span></a></li>
<li><a href="#">해외송금서비스 점검 공지<span>2020.11.24</span></a></li>
<li><a href="#">고객센터 전화상담서비스 시간 변경 안내<span>2020.11.24</span></a></li>
<li><a href="#">개인정보처리방침 변경 안내<span>2020.11.24</span></a></li>
</ul>
</div>
</li>
<li class=""><a href="#">갤러리</a>
<div class="tabBG gallery">
<ul>
<li><a href="#"><img src="./img/icon1.jpg" alt="갤러리1"></a></li>
<li><a href="#"><img src="./img/icon2.jpg" alt="갤러리2"></a></li>
<li><a href="#"><img src="./img/icon3.jpg" alt="갤러리3"></a></li>
</ul>
</div>
</li>
</ul> <!-- tabMenu 끝 -->
</div>
<div class="banner">
<a href="#">배너</a>
</div>
<div class="direct">
<a href="#">바로가기</a>
</div>
</div>
</main>
<!-- 하단 -->
<footer>
<div class="footerWrap">
<div class="footerLogo">
<img src="./img/logo.png" alt="하단로고">
</div>
<div class="footerGroup">
<div class="footerMenu">
<a href="#">하단메뉴1</a>
<a href="#">하단메뉴2</a>
<a href="#">하단메뉴3</a>
</div>
<div class="footerCright">
COPYRIGHT © by WEBDESIGN. ALL RIGHTS RESERVED
</div>
</div>
</div>
</footer>
<!-- 팝업 -->
<div id="modalWrap">
<div class="modal">
<h1>편리함과 혜택을 더한 대한은행 개선 안내</h1>
<p>
안녕하세요. 대한은행 입니다. 편리해진 홈, 상품, 메뉴와 새로운 서비스 추가로 혜택을 더한 대한은행 개선 내용을 확인해보세요. 홈이 입출금계좌, 편의서비스 중심으로 정리되었어요. 홈에서 다른은행 조회 하기가 더 쉬워졌고, 더 나은 혜택을 제공하기 위해 플러스박스, 행운상자 서비스가 추가되었어요. 잔액 숨기기 기능을 설정한 경우 홈에서 일시적으로 잔액확인을 눌러 쉽게 잔액 확인이 가능 해졌어요.
</p>
<button class="btn">닫기</button>
</div>
</div>
</body>
</html>javascript & jQuery
$(document).ready(function(){
//**** 마우스오버 ****//
//서브메뉴 숨기고 시작
$(".subMenu").hide();
// 마우스 오버
$(".mainMenu").mouseover(function(){
$(".subMenu").stop().slideDown(300);
}).mouseout(function(){
$(".subMenu").stop().slideUp(300);
});
//**** 이미지슬라이드 ****//
var imgs = 2;
var now = 0;
start();
function start(){
$(".imgSlide>a").eq(0).siblings().animate({width:"-1200px"});
setInterval(function(){
now = now==imgs ? 0 : now+=1;
$(".imgSlide>a").eq(now-1).animate({width:"-1200px"});
$(".imgSlide>a").eq(now).animate({width:"1200px"});
},3000);
}
// ****** 탭 메뉴 공지사항 갤러리 ****** //
$(function(){
$('.tabMenu>li>a').click(function(){
$(this).parent().addClass("active").siblings().removeClass("active");
// return false;
/* return false를 반드시 적기.
버블링(bubbling) 때믄. 버블링이란?
한 요소에 이벤트가 발생하면,
이 요소에 할당된 핸들러가 동작하고,
이어서 부모 요소의 핸들러가 동작합니다.
가장 최상단의 조상 요소를 만날 때까지
이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문입니다.
클릭 이벤트를 중단하고, 호출한 곳으로 되돌아 가라~라는 의미.
a를 클릭했을 때, 부모의 요소도 클릭한것 처럼 처리가 되기때문에
HTML을 클릭 이전 상태로 되돌리기 위해서
*/
});
});
// ****** 레이어팝업 ****** //
$('.notice li:first').click(function(){
$('#modalWrap').addClass("active");
});
$('.btn').click(function(){
$('#modalWrap').removeClass("active");
});
});CSS
@charset "utf-8";
/*초기 설정*/
*{
margin: 0;
padding: 0;
list-style:none;
box-sizing: border-box;
}
body{
background: #ffffff;
color:#333333;
}
a{
text-decoration:none;
display:block;
}
/* 확장형 header, headerWrap을 감쌈 */
header {
width:100%;
height:100px;
background: #0076BE;
}
/* 메뉴와 로고가 들어가고 중앙정렬하는 */
.headerWrap{
width:1200px;
height:100%;
margin:0 auto;
display:flex;
justify-content: space-between;
}
/*로고*/
.logo {
width:20%;
display: flex; /*로고 이미지를 중앙에 위치 시키기 위해 flex로 지정하여 수평, 수직 정렬이 되도록 하기 위해.*/
justify-content: center; /* 수평 가운데 정렬 */
align-items: center; /* 수직 가운데 정렬 */
}
/*로고이미지*/
.logo > img{
width:200px; /*지시사항에 적힌대로 width값 */
height:40px; /*지시사항에 적힌대로 height값 */
}
/*상단메뉴*/
.mainMenu {
width:800px; /*서브메뉴랑 동일하게*/
height:100%; /*header의 높이 그대로 */
display: flex;
justify-content: space-between;
align-items:center;
position:relative; /*subMenu때문에 반드시 필요*/
}
.mainMenu > a{
width:25%;
padding:20px 0;
text-align: center;
color:#ffffff;
font-weight:bold;
}
.mainMenu > a:hover{
background: rgba(255,255,255, 0.1);
}
.subMenu{
width:800px; /*메인메뉴랑 동일하게*/
display:flex;
justify-content: space-between;
background: #333333;
position:absolute;
right:0;
top:100px; /*header 높이 만큼 내려옴*/
z-index:1;
}
.subMenu > ul{
width:25%;
}
.subMenu > ul > li > a{
text-align: center;
padding:10px 0;
color:#E66B27;
}
.subMenu > ul > li > a:hover{
background: rgba(255,255,255, 0.1);
color:#ffffff;
}
/********본문시작*********/
/* 이미지슬라이드와 컨텐츠를 감싸는 main */
main {
width: 1200px;
margin:0 auto;
position:relative;
}
/*이미지슬라이드*/
.imgSlide{
position:relative;
width:100%;
height:300px;
overflow: hidden;
background: #eeeeee;
}
.imgSlide > a{
position:absolute;
top:0;
left:0;
overflow: hidden; /* 이미지슬라이드가 좌우로 움직일때는 반드시 필요 */
}
.imgSlide a > img {height:100%;}
.imgText{
position:absolute;
top:40%;
left:40%;
margin:-10px -70px;
background: rgba(0, 118, 190, 0.7);
color:#ffffff;
padding:16px 100px;
font-weight: bold;
}
/*컨텐츠*/
.contents {
width: 100%;
height:200px;
padding:0;
margin:10px 0;
display:flex;
justify-content: space-between;
position: relative; /* 탭메뉴의 콘텐츠 영역 absolute 때문에 넣어줌 */
}
/*컨텐츠 공통사항*/
.contents div{ width:33.3%;}
.contents > div:nth-of-type(2){margin:0 10px;}
/*탭메뉴 : 공지사항 갤러리 */
.tabMenu{ display:flex;}
.tabMenu>li>a{
padding:0 10px;
min-width: 85px;
line-height:30px;
font-size:14px;
text-align:center;
background:#eeeeee;
border:1px solid #dddddd;
}
.tabMenu>li>a:hover{ background-color:#eeeeee;}
/* 공지사항과 갤러리 탭 맞닿는 부분에 보더를 없애줌 */
.tabMenu>li:first-child a{border-right:none;}
/* 활성화된 탭의 스타일 */
.tabMenu>li.active>a{ font-weight: bold; background-color:#ffffff;}
/*탭 콘텐츠 영역 스타일*/
.tabBG{
position:absolute;
overflow:hidden;
height:168px; /* chrome inspect(검사) 보고 수치 계산 */
background:#ffffff;
}
/*active 클래스가 추가된 탭 콘텐츠 영역 스타일*/
.tabMenu>li.active div{
border:1px solid #dddddd;
z-index:1;
}
/* 공지사항 */
.notice ul{ padding:20px 0;}
.notice ul li{ padding:8px 20px;
margin:0 10px;
font-size:14px;
}
/*공지사항 중 2배수 리스트 스타일*/
.notice li:nth-child(even){ background:rgba(230, 107, 39, 0.1); }
.notice li:hover{color:#222328;background:rgba(0, 118, 190, 0.1); }
.notice li span {float:right;} /* 날짜 오른쪽 정렬 */
.gallery{ left:0; }
.gallery ul {
display: flex;
justify-content: space-around;
align-items: center;
height:100%; /*높이 값이 있어야 수직 정렬 됨*/
}
.gallery li:hover{ opacity:0.5; }
/*배너와 바로가기 공통 */
.banner, .direct{
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.banner > a,
.direct > a{
width:100px;
padding:14px 0;
text-align: center;
font-weight:bold;
color:#ffffff;
background-color:rgba(230, 107, 39, 0.5);
}
.banner > a:hover,
.direct > a:hover{
background:rgba(0, 118, 190, 0.5);
}
/*배너*/
.banner{
background: url("../img/banner.jpg") center center ;
}
/*바로가기*/
.direct{
background: url("../img/direct.jpg") center center ;
}
/* 확장형 footer, footerWrap을 감쌈 */
footer{
width:100%;
height:100px;
background:#333333;
}
/* 하단로고 + 하단메뉴 + 카피라이트 감싸고 중앙정렬 */
.footerWrap{
width:1200px;
height:100%;
margin:0 auto;
padding:0 40px;
display: flex;
justify-content: space-between;
}
/* 공통 */
.footerWrap div { display: flex; }
/* 하단로고 */
.footerLogo{
width:25%;
justify-content: center;
align-items: center;
opacity: 0.2;
}
/* 하단메뉴와 카피라이트 그룹 */
.footerGroup{
width:40%;
height:100%;
padding:20px 0 ;
flex-direction: column;
justify-content: space-around;
}
/* 하단메뉴 */
.footerMenu{
justify-content: space-between;
}
.footerMenu a {color:#ffffff;}
.footerMenu a:hover {color:#E66B27;}
/* 카피이트 */
.footerCright {
letter-spacing: 0.4px;
font-size:16px;
color:#ffffff;
}
/* 레이어 팝업 */
#modalWrap{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index: 1;
}
#modalWrap.active{
display:block;
}
.modal{
position:fixed;
width:450px;
padding:20px;
top:40%;
left:40%;
background:#ffffff;
}
.modal > h1{
margin:10px 0;
text-align: center;
}
.modal > p{
text-align:justify;
}
.btn{
width:100%;
padding:10px;
margin-top:20px;
background: #0076BE;
color:#ffffff;
border:0;
font-weight: bold;
cursor:pointer;
}
.btn:hover{background:rgba(0, 118, 190, 0.2); color:#0076BE;}728x90
300x250
