반응형
B유형의 첫 번째 문제
B-1 대한은행 와이어프레임 살펴보기
B유형의 경우 전반적인 레이아웃 구성은 A유형과 거의 동일하지만, 상단의 헤더와 푸터의 Width를 브라우저 100% 처리해 줘야 한다.
- B-1 유형의 경우 푸터를 제외한 나머지 구조(메뉴, 탭메뉴 등)는 A-1과 동일하고 하단의 푸터 레이아웃은 A-3와 동일하다.
- 메인메뉴에 마우스를 오버하면 서브메뉴 전체가 한 번에 나타나는 구조
- 이미지 슬라이드는 가로로 이동하도록 구현해야 한다.
B-1: 대한은행 와이어프레임 구성하기
기존과 동일하게 Visual Studio Code를 실행하고, 아래와 같은 구로조 파일을 생성한다:
HTML을 사용해서 와이어프레임의 기본 구조를 만든다:
*A유형과 다른 점이 있다면 B유형은 각각의 id별로 container 클래스를 추가해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>대한은행</title>
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<!-- script -->
<script src="script/script.js"></script>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<!-- //header -->
<article id="slider">
<div class="container"></div>
</article>
<!-- //slider -->
<main id="contents">
<div class="container"></div>
</main>
<!-- //contents -->
<footer id="footer">
<div class="container"></div>
</footer>
<!-- //footer -->
</div>
<!-- wrap -->
</body>
</html>
CSS
기존처럼 reset 작업을 해주고, #wrap을 정의해 준 다음에 container 클래스를 먼저 정의해 준다. 나머지는 기존의 A유형과 동일:
@charset "UTF-8";
/* reset */
* {
margin: 0;
padding: 0;
color: #333;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
/* wrap */
#wrap {
width: 100%;
}
/* container */
.container {
width: 1200px;
margin: 0 auto;
height: inherit;
background-color: rgba(0, 0, 0, 0.4);
}
/* header */
#header {
width: 100%;
height: 100px;
background-color: #7b7b7b;
}
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #bababa;
}
/* contents */
#contents {
width: 100%;
height: 200px;
background-color: #e6e6e6;
}
/* footer */
#footer {
width: 100%;
height: 100px;
background-color: #cecdcd;
}
브라우저
여기까지 코딩을 진행한 다음 Live Server를 통해 확인해 보면 아래와 같이 container(불투명) 영역이 중앙에 위치하는 것을 확인할 수 있다:
그럼 이어서 와이어프레임의 세부 구조를 정의한다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>대한은행</title>
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<!-- script -->
<script src="script/script.js"></script>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="container">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</div>
</header>
<!-- //header -->
<article id="slider">
<div class="container"></div>
</article>
<!-- //slider -->
<main id="contents">
<div class="container">
<section class="info"></section>
<section class="banner"></section>
<section class="link"></section>
</div>
</main>
<!-- //contents -->
<footer id="footer">
<div class="container">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</div>
</footer>
<!-- //footer -->
</div>
<!-- wrap -->
</body>
</html>
CSS
전반적인 구조는 A유형과 동일하지만. container 클래스가 추가되었다:
/* wrap */
#wrap {
width: 100%;
}
/* container */
.container {
width: 1200px;
margin: 0 auto;
height: inherit;
background-color: rgba(0, 0, 0, 0.4);
}
/* header */
#header {
width: 100%;
background-color: #f0f0f0;
}
#header .container {
display: flex;
}
#header .container .logo {
width: 200px;
height: 100px;
background-color: #7b7b7b;
}
#header .container .nav {
width: 1000px;
height: 100px;
background-color: #c5c5c5;
}
/* slider */
#slider {
width: 100%;
height: 300px;
}
/* contents */
#contents {
width: 100%;
}
#contents .container {
display: flex;
}
#contents .container .info {
width: 400px;
height: 200px;
background-color: #636363;
}
#contents .container .banner {
width: 400px;
height: 200px;
background-color: #b3b3b3;
}
#contents .container .link {
width: 400px;
height: 200px;
background-color: #e8e8e8;
}
/* footer */
#footer {
width: 100%;
background-color: #dddddd;
}
#footer .container {
display: flex;
}
#footer .container .footer1 {
width: 20%;
height: 100px;
background-color: #cecdcd;
}
#footer .container .footer2 {
width: 80%;
}
#footer .container .footer2 .footer2-1 {
width: 100%;
height: 50px;
background-color: #535353;
}
#footer .container .footer2 .footer2-2 {
width: 100%;
height: 50px;
background-color: #aaaaaa;
}
브라우저 화면
A영역(헤더) 로고 코딩하기
포토샵을 사용해 로고를 먼저 제작한다. 기존과 동일하게 워드타입으로 가로(200px) & 세로(40px) 사이즈의 PNG 파일로 제작한다. 푸터 영역의 무채색(grayscale) 로고도 함께 제작한다:
HTML 코딩
<div id="wrap">
<header id="header">
<div class="container">
<h1 class="logo">
<a href="#"><img src="images/logo.png" alt="대한은행 로고"></a>
</h1>
<nav class="nav"></nav>
</div>
</header>
<!-- //header -->
CSS 코딩
#header .container .logo {
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
브라우저 화면
A영역(헤더) 메뉴 코딩하기
시험문제에 출제된 사이트맵을 참고하여 HTML 코딩을 진행한다:
HTML
<nav class="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>
CSS
#header .container .nav {
width: 1000px;
height: 100px;
}
#header .container .nav > ul {
display: flex;
justify-content: right;
margin-top: 30px;
margin-right: 30px;
}
#header .container .nav > ul > li {
position: relative;
}
#header .container .nav > ul > li > a {
display: inline-block;
padding: 10px 50px;
background-color: #fff;
}
#header .container .nav > ul > li > a:hover {
background-color: #b1b1b1;
}
#header .container .nav > ul > li > ul {
/* display: none; */
}
#header .container .nav > ul > li > ul > li > a {
display: inline-block;
padding: 10px;
box-sizing: border-box;
width: 100%;
background-color: #d6d6d6;
text-align: center;
}
#header .container .nav > ul > li > ul > li > a:hover {
background-color: #e1e1e1;
}
웹브라우저 화면
코딩작업을 완료한 뒤에, 서브메뉴(.nav > ul > li > ul)는 숨김처리(display:none) 처리한다.
B영역 슬라이드 코딩
주어진 이미지 3개를 사용해서 슬라이드 영역을 코딩한다.
HTML
A유형과 거의 동일하지만, sliderwrap 클래스를 container 클래스 하단에 생성한다:
<article id="slider">
<div class="container">
<div class="sliderWrap">
<div class="slider s1">
<a href="#">
<img src="images/slider01.jpg" alt="같지만 다른 은행, 대한은행">
</a>
<div class="text">
<h2>같지만 다른 은행, 대한은행</h2>
</div>
</div>
<div class="slider s2">
<a href="#">
<img src="images/slider02.jpg" alt="일상에서 더 쉽게, 더 자주">
</a>
<div class="text">
<h2>일상에서 더 쉽게, 더 자주</h2>
</div>
</div>
<div class="slider s3">
<a href="#">
<img src="images/slider03.jpg" alt="나만의 은행, 대한은행">
</a>
<div class="text">
<h2>나만의 은행, 대한은행</h2>
</div>
</div>
</div>
</div>
</article>
<!-- //slider -->
CSS
먼저 슬라이드 이미지 3개를 삽입한 뒤에, 각각의 문구가 중앙에 위치하도록 코딩한다:
/* slider */
#slider {
width: 100%;
height: 300px;
}
#slider .container {}
#slider .container .sliderWrap {}
#slider .container .slider {
position: relative;
width: 1200px;
}
#slider .container .slider .text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: rgba(0, 0, 0, 0.4);
padding: 20px 30px;
}
#slider .container .slider .text h2 {
color: #fff;
font-size: 30px;
}
브라우저 화면
여기까지 코딩이 완료되면, 추후 가로로 움직이는 슬라이드 애니메이션을 자바스크립트로 구현할 수 있도록 아래와 같은 코딩을 추가한다:
#slider .container .sliderWrap {
display: flex;
width: 400%;
}
브라우저 화면
이후 아래와 같이 .container 클래스를 overflow:hidden 처리한다:
#slider .container {
overflow: hidden;
}
브라우저 화면
C영역(공지사항/갤러리) 탭메뉴 코딩
HTML
<main id="contents">
<div class="container">
<section class="info">
<h3 class="info-menu">
<a href="#" class="active">공지사항</a>
<a href="#">갤러리</a>
</h3>
<div class="info-cont">
<div class="notice">
<ul>
<li><a href="#">편리함과 혜택을 더한 대한은행 개선 안내</a><span>2020.11.24</span></li>
<li><a href="#">해외송금서비스 점검 공지</a><span>2020.11.24</span></li>
<li><a href="#">고객센터 전화상담서비스 시간 변경 안내</a><span>2020.11.24</span></li>
<li><a href="#">개인정보처리방침 변경 안내</a><span>2020.11.24</span></li>
</ul>
</div>
<div class="gallery">
<ul>
<li><a href="#"><img src="images/gallery01.jpg" alt="갤러리1"></a></li>
<li><a href="#"><img src="images/gallery02.jpg" alt="갤러리2"></a></li>
<li><a href="#"><img src="images/gallery03.jpg" alt="갤러리3"></a></li>
</ul>
</div>
</div>
</section>
<!-- //info -->
CSS
먼저 공지사항 영역을 정의한다:
/* contents : info */
#contents .container .info {
width: 400px;
height: 200px;
background-color: #636363;
padding: 20px;
box-sizing: border-box;
}
#contents .container .info .info-menu {
margin-bottom: 10px;
}
#contents .container .info .info-menu a {
font-size: 24px;
}
#contents .container .info .info-menu a::after{
content: '|';
margin-left: 5px;
}
#contents .container .info .info-menu a:last-child::after {
content: '';
}
#contents .container .info .info-menu a.active {
text-decoration: underline;
}
#contents .container .info .info-cont .notice {
/* display: none; */
}
#contents .container .info .info-cont .notice li {
display: flex;
}
#contents .container .info .info-cont .notice li a {
width: 75%;
font-size: 16px;
line-height: 1.6;
}
#contents .container .info .info-cont .notice li span {
width: 25%;
font-size: 16px;
text-align: right;
line-height: 1.6;
}
#contents .container .info .info-cont .gallery {
display: none;
}
브라우저
이후 공지사항 영역을 숨김처리하고 갤러리 영역을 아래와 같이 정의한다:
/* contents : info */
#contents .container .info {
width: 400px;
height: 200px;
background-color: #636363;
padding: 20px;
box-sizing: border-box;
}
#contents .container .info .info-menu {
margin-bottom: 10px;
}
#contents .container .info .info-menu a {
font-size: 24px;
}
#contents .container .info .info-menu a::after{
content: '|';
margin-left: 5px;
}
#contents .container .info .info-menu a:last-child::after {
content: '';
}
#contents .container .info .info-menu a.active {
text-decoration: underline;
}
#contents .container .info .info-cont .notice {
display: none;
}
#contents .container .info .info-cont .notice li {
display: flex;
}
#contents .container .info .info-cont .notice li a {
width: 75%;
font-size: 16px;
line-height: 1.6;
}
#contents .container .info .info-cont .notice li span {
width: 25%;
font-size: 16px;
text-align: right;
line-height: 1.6;
}
#contents .container .info .info-cont .gallery {
/* display: none; */
padding: 20px;
box-sizing: border-box;
}
#contents .container .info .info-cont .gallery ul {
display: flex;
justify-content: space-between;
}
#contents .container .info .info-cont .gallery li a {
border: 4px solid transparent;
display: block;
}
#contents .container .info .info-cont .gallery li a:hover {
border-color: #333;
}
브라우저
C영역(배너) 코딩
HTML
<section class="banner">
<h3>배너</h3>
<a href="#">더 알아보기</a>
</section>
<!-- //banner -->
CSS
/* contents : banner */
#contents .container .banner {
width: 400px;
height: 200px;
background-image: url(../images/banner.jpg);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#contents .container .banner h3 {
font-size: 26px;
color: #fff;
margin-bottom: 10px;
}
#contents .container .banner a {
background-color: rgba(0, 0, 0, 0.4);
padding: 10px 20px;
color: #fff;
border-radius: 50px;
}
#contents .container .banner a:hover {
background-color: #8a8a8a;
}C영역(바로가기) 코딩
HTML
<section class="link">
<h3>해외송금서비스</h3>
<a href="#">더 알아보기</a>
</section>
<!-- //link -->
CSS
/* contents : link */
#contents .container .link {
width: 400px;
height: 200px;
background-image: url(../images/link.jpg);
}
#contents .container .link h3 {
color: #fff;
padding: 20px;
text-align: center;
box-sizing: border-box;
}
#contents .container .link a {
display: block;
width: 100px;
height: 100px;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 50%;
text-align: center;
color: #fff;
line-height: 100px;
margin: 0 auto;
}
브라우저 화면
D영역(바로가기) 코딩
HTML
<footer id="footer">
<div class="container">
<div class="footer1">
<a href="#"><img src="images/logo_f.png" alt="대한은행 푸터 로고"></a>
</div>
<div class="footer2">
<div class="footer2-1">
<ul>
<li><a href="#">하단메뉴1</a></li>
<li><a href="#">하단메뉴2</a></li>
<li><a href="#">하단메뉴3</a></li>
</ul>
</div>
<div class="footer2-2">
COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED
</div>
</div>
</div>
</footer>
<!-- //footer -->
CSS
*푸터 영역의 비율을 기존 20:80에서 15:85로 조정하였음
/* footer */
#footer {
width: 100%;
background-color: #dddddd;
}
#footer .container {
display: flex;
}
#footer .container .footer1 {
width: 15%;
height: 100px;
background-color: #cecdcd;
}
#footer .container .footer1 a {
display: flex;
align-items: center;
justify-content: center;
height: 100px;
}
#footer .container .footer2 {
width: 85%;
}
#footer .container .footer2 .footer2-1 {
width: 100%;
height: 50px;
}
#footer .container .footer2 .footer2-1 ul {
display: flex;
height: 50px;
justify-content: center;
align-items: center;
}
#footer .container .footer2 .footer2-1 ul li::after {
content: '|';
margin-left: 20px;
}
#footer .container .footer2 .footer2-1 ul li:last-child::after{
content: '';
}
#footer .container .footer2 .footer2-1 ul li a {
padding: 10px 20px;
}
#footer .container .footer2 .footer2-1 ul li a:hover {
text-decoration: underline;
}
#footer .container .footer2 .footer2-2 {
width: 100%;
height: 50px;
background-color: #aaaaaa;
display: flex;
align-items: center;
justify-content: center;
}
브라우저
여기까지 진행하면 와이어프레임 HTML과 CSS 코딩은 모두 완료된다. 컨테이너(container) 클래스에 지정되어 있던 rgba 값을 삭제하고, 영역별로 컬러값을 넣어서 꾸며준다.
레이어팝업 코딩
이제 마지막으로 레이어팝업을 코딩한다.
HTML
<div class="popup-view">
<h2>편리함과 혜택을 더한 대한은행 개선 안내</h2>
<p>
안녕하세요. 대한은행 입니다. 편리해진 홈, 상품, 메뉴와 새로운 서비스 추가로 혜택을 더한 대한은행 개선 내용을 확인해보세요. 홈이 입출금계좌, 편의서비스 중심으로 정리되었어요. 홈에서 다른은행 조회 하기가 더 쉬워졌고, 더 나은 혜택을 제공하기 위해 플러스박스, 행운상자 서비스가 추가되었어요. 잔액 숨기기 기능을 설정한 경우 홈에서 일시적으로 잔액확인을 눌러 쉽게 잔액 확인이 가능 해졌어요.
</p>
<a href="#" class="popup-close">닫기</a>
</div>
<!-- //popup -->
CSS
/* popup */
.popup-view {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
width: 390px;
height: 390px;
background-color: #97d0fb;
border: 4px solid #0e8ae9;
padding: 20px;
}
.popup-view h2 {
font-size: 24px;
margin-bottom: 15px;
border-bottom: 2px solid #0e8ae9;
padding-bottom: 5px;
}
.popup-view a {
display: inline-block;
padding: 8px 20px;
background-color: #0e8ae9;
color: #fff;
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
}
브라우저
여기까지 진행한 뒤, 크롬 브라우저의 Web Developer 플러그인을 이용해 W3C 유효성 검사를 진행한다. 이상이 없다면 바로 자바스크립트로 넘어간다.
자바스크립트 코딩
A영역(메뉴) 코딩
메인메뉴에 마우스를 올리면 서브메뉴 전체가 부드럽게 나타나도록 애니메이션을 구현한다.
Javascript
window.onload = function(){
//메뉴
let navList = document.querySelector(".nav > ul");
//자바스크립트 CSS
let submenus = document.querySelectorAll(".nav > ul > li > ul");
submenus.forEach(function (submenu){
submenu.style.display = "block";
submenu.style.overflow = "hidden";
submenu.style.height = "0";
submenu.style.transition = "all 600ms";
});
navList.addEventListener("mouseover", function(){
navList.querySelectorAll(".submenu").forEach(sub => {
sub.style.height = "155px";
})
});
navList.addEventListener("mouseout", function(){
navList.querySelectorAll(".submenu").forEach(sub => {
sub.style.height = "0px";
})
});
}B영역(슬라이드) 코딩
가로로 움직이는 형태의 애니메이션을 구현한다.
Javascript
//이미지 슬라이드
let currentIndex = 0;
const sliderWrap = document.querySelector(".sliderWrap");
const slider = document.querySelectorAll(".slider");
const sliderClone = sliderWrap.firstElementChild.cloneNode(true);
sliderWrap.appendChild(sliderClone);
setInterval(()=> {
currentIndex++;
sliderWrap.style.transition = 'all 0.6s';
sliderWrap.style.marginLeft = -currentIndex * 100 + "%";
if(currentIndex == slider.length){
setTimeout(()=>{
sliderWrap.style.transition = "0s";
sliderWrap.style.marginLeft = "0s";
currentIndex = 0;
},600);
}
},3000);C영역(탭메뉴) 코딩
공지사항과 갤러리 메뉴를 클릭하면 하단의 콘텐츠가 바뀌도록 코딩한다
Javascript
//탭메뉴
const tabBtn = document.querySelectorAll(".info-menu > a");
const tabCont = document.querySelectorAll(".info-cont > div");
tabCont.forEach(el => el.style.display = "none");
tabCont[0].style.display = "block";
tabBtn.forEach((tab, index)=> {
tab.addEventListener("click", ()=> {
tabBtn.forEach(tab => tab.classList.remove("active"));
tab.classList.add("active");
tabCont.forEach(cont => cont.style.display = "none");
tabCont[index].style.display = "block";
});
});
레이어팝업 코딩
공지사항의 첫 번째 콘텐츠를 클릭하면 팝업창이 활성화되도록 코딩한다. 먼저 HTML로 공지사항의 첫 번째 콘텐츠에 클래스를 추가한다:
<div class="notice">
<ul>
<li class="popup-btn"><a href="#">편리함과 혜택을 더한 대한은행 개선 안내</a><span>2020.11.24</span></li>
<li><a href="#">해외송금서비스 점검 공지</a><span>2020.11.24</span></li>
<li><a href="#">고객센터 전화상담서비스 시간 변경 안내</a><span>2020.11.24</span></li>
<li><a href="#">개인정보처리방침 변경 안내</a><span>2020.11.24</span></li>
</ul>
</div>
이후 자바스크립트를 코딩한다:
Javascript
//팝업
document.querySelector(".popup-btn").addEventListener("click",function(){
document.querySelector(".popup-view").style.display = "block";
});
document.querySelector(".popup-close").addEventListener("click",function(){
document.querySelector(".popup-view").style.display = "none";
});
여기까지 작업하면 모든 코딩이 완료된다
최종완성 코드 & 화면
완성된 최종코드:
https://github.com/saejunahn/Craftsman-Web-Design/tree/main/B1
완성된 최종화면:
반응형
'디자인 자격증 > 웹디자인기능사' 카테고리의 다른 글
| D-1: 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (1) | 2023.11.21 |
|---|---|
| C-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (1) | 2023.11.20 |
| A-4 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (1) | 2023.11.14 |
| A-3 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (1) | 2023.11.13 |
| A-2 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (0) | 2023.11.11 |