반응형
지난번에 풀어본 A1 문제(풀이 링크)에 이은 두 번째 문제 풀이.
A-2: Green복지재단 와이어프레임 살펴보기
기본 와이어프레임 구조는 A1과 동일하고, 아래와 같은 4가지 차이점이 있다:
- 메인메뉴에 마우스를 오버하면 전체배경이 서브메뉴와 함께 내려온다.
- B영역의 슬라이드가 세로가 아닌 가로방향으로 전환된다.
- C영역의 공지사항과 갤러리가 탭메뉴가 아닌 별도 메뉴로 구성되어 있다.
- D영역 오른쪽 하단에 SNS 아이콘 대신 패밀리사이트 메뉴가 들어간다.
A-2: Green복지재단 와이어프레임 구성하기
A1과 마찬가지고 Visual Studio Code를 실행한 뒤, 아래와 같은 폴더 구조로 파일을 생성해 준다:
먼저 아래와 같은 HTML 구조를 작성해서 와이프레임의 기본 구조를 만든다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Green복지재단</title>
</head>
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<!-- script -->
<script src="script/script.js"></script>
<body>
<div id="wrap">
<header id="header"></header>
<article id="slider"></article>
<main id="contents"></section>
<footer id="footer"></footer>
</div>
</body>
</html>
그런 다음 HTML 파일과 연결된 style.css 파일로 넘어가 CSS코드를 이어서 작성한다.
맨 상단에 시험에서 요구하는 캐릭터 셋을 적용하고 텍스트 기본색상을 포함한 초기화(reset)를 진행해 준다:
* {
margin: 0;
padding: 0;
color: #333;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
초기화 설정이 끝나면 아래와 같이 CSS코드를 작성하여 기본 와이어프레임 구조의 기본영역(A-D)을 잡아준다:
/* wrap */
#wrap {
width: 1200px;
height: 700px;
margin: 0 auto;
}
/* header */
#header {
width: 100%;
height: 100px;
background-color: #898989;
}
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #d8d8d8;
}
/* contents */
#contents {
width: 100%;
height: 200px;
background-color: #b1b1b1;
}
/* footer */
#footer {
width: 100%;
height: 100px;
background-color: #e2e2e2;
}
Index.html을 선택한 상태로 마우스 오른쪽 버튼을 눌러 Open with Live Server 메뉴를 선택한다.
*시험장에서는 Open with Live Server가 작동하지 않으므로, 작업폴더의 index.html 파일을 더블클릭하여 실행한다.
웹브라우저에 아래와 같은 구조가 정상적으로 표시되는지 확인하고 이어서 코드를 작성한다.
위와 같이 와이어프레임의 기본영역(A-D)이 설정되었다면 아래와 같은 html을 추가로 작성한다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Green복지재단</title>
</head>
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<!-- script -->
<script src="script/script.js"></script>
<body>
<div id="wrap">
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<!-- header -->
<article id="slider">
</article>
<!-- slider -->
<main id="contents">
<section class="notice"></section>
<section class="gallery"></section>
<section class="banner"></section>
</main>
<!-- contents -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</footer>
<!-- footer -->
</div>
<!-- wrap -->
</body>
</html>
이어서 CSS를 아래와 같이 작성하여 추가된 HTML 구조를 정의해 준다:
*부모한테서 height와 background-color 속성을 자식으로 이동시켜 주고, display: flex를 영역별로 적용해 준다.
/* wrap */
#wrap {
width: 1200px;
height: 700px;
margin: 0 auto;
background-color: #c3c3c3;
}
/* header */
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 200px;
height: 100px;
background-color: #dedede;
}
#header .nav {
width: 1000px;
height: 100px;
background-color: #c9c9c9;
}
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #727272;
}
/* contents */
#contents {
width: 100%;
display: flex;
}
#contents .notice {
width: 400px;
height: 200px;
background-color: #a8a8a8;
}
#contents .gallery {
width: 400px;
height: 200px;
background-color: #888888;
}
#contents .banner {
width: 400px;
height: 200px;
background-color: #6d6d6d;
}
/* footer */
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 200px;
height: 100px;
background-color: #666666;
}
#footer .footer2 {
width: 700px;
height: 100px;
background-color: #818181;
}
#footer .footer3 {
width: 300px;
height: 100px;
background-color: #3e3e3e;
}
웹 브라우저 화면
CSS 작성을 완료화면 아래와 같이 표시된다:
A영역(헤더) 로고 코딩
헤더 영역 코딩을 진행하기에 앞서 토포샵을 사용해 로고를 제작한다. 심벌 없는 워드타입으로 가로(200px) x 세로(40px) 크기의 PNG 포맷으로 저장한다. 무채색(grayscale)으로 변경한 푸터용 로고도 함께 제작한다.
HTML 코딩
*상호작용이 필요한 모든 콘텐츠(로고, 메뉴, 버튼, 바로가기 등)는 임시링크(#)를 적용하여 '탭(Tab)'키로 이동 선택할 수 있어야 한다.
<header id="header">
<h1 class="logo">
<a href="#"><img src="/A2/images/logo.png" alt="Green복지재단 로고"></a>
</h1>
<nav class="nav"></nav>
</header>
<!-- header -->
CSS 코딩
/* header */
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 200px;
height: 100px;
background-color: #fff;
}
#header .logo a{
display: block;
margin-top: 30px;
}
웹 브라우저 화면
A영역(헤더) 메인메뉴 코딩
시험문제에서 제공되는 사이트맵을 참고하여 HTML 코딩을 진행한다.
<nav class="nav">
<ul>
<li><a href="#">재단소개</a>
<ul>
<li><a href="#">설립취지</a></li>
<li><a href="#">연혁</a></li>
<li><a href="#">찾아오시는길</a></li>
</ul>
</li>
<li><a href="#">후원하기</a>
<ul>
<li><a href="#">국내후원</a></li>
<li><a href="#">국외후원</a></li>
<li><a href="#">맞춤후원</a></li>
</ul>
</li>
<li><a href="#">자료실</a>
<ul>
<li><a href="#">서식자료실</a></li>
<li><a href="#">사진자료실</a></li>
<li><a href="#">후원양식</a></li>
</ul>
</li>
<li><a href="#">스토리</a>
<ul>
<li><a href="#">웹진</a></li>
<li><a href="#">보고서</a></li>
<li><a href="#">나의 후원</a></li>
</ul>
</li>
</ul>
</nav>
CSS 코딩
*메인메뉴와 서브메뉴에 마우스 호버시 하이라이트가 될 수 있도록 작업한다.
먼저 아래와 같이 메인과 서브메뉴 구조를 정의해 준다:
/* header */
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 200px;
height: 100px;
background-color: #fff;
}
#header .logo a{
display: block;
margin-top: 30px;
}
#header .nav {
width: 1000px;
height: 100px;
}
#header .nav > ul {
display: flex;
justify-content: right;
margin-top: 61px;
}
#header .nav > ul > li {
position: relative;
}
#header .nav > ul > li > a {
display: inline-block;
padding: 10px 50px;
background-color: #35b752
;
}
#header .nav > ul > li > a:hover {
background-color: #91e7a3;
}
#header .nav > ul > li > ul {
position: absolute;
left: 0;
top: 39px;
width: 100%;
text-align: center;
background-color: #1d632c;
}
#header .nav > ul > li > ul > li > a {
display: inline-block;
padding: 10px;
width: 100%;
box-sizing: border-box;
color: #fff;
}
#header .nav > ul > li > ul > li > a:hover {
background-color: #91e7a3;
}
웹 브라우저
그리고 이어서 서브메뉴와 함께 펼쳐지는 배경화면을 CSS를 이용해 아래와 같이 header의 가상요소(#header::after)로 만들어주고, #header. nav에 z-index 값 1000을 준다:
/* header */
#header {
width: 100%;
display: flex;
position: relative;
}
#header::after {
content: '';
width: 100%;
height: 118px;
background-color: #000000;
position: absolute;
left: 0;
top: 100px;
z-index: 1;
transition: all 600ms;
}
#header .logo {
width: 200px;
height: 100px;
background-color: #fff;
}
#header .logo a{
display: block;
margin-top: 30px;
}
#header .nav {
width: 1000px;
height: 100px;
z-index: 1000;
}
추가로 #header nav > ul > li > ul 라인에서 background-color를 제거한다:
#header .nav > ul > li > ul {
position: absolute;
left: 0;
top: 39px;
width: 100%;
text-align: center;
}
이렇게 코딩하면 아래와 같은 화면이 웹 브라우저에 표시된다:
추후 스크립트로 메뉴를 제어할 수 있도록 아래와 같이 CSS 코드를 변경 및 작성한다:
#header::after {
content: '';
width: 100%;
height: 0px;
background-color: #000000;
position: absolute;
left: 0;
top: 100px;
z-index: 1;
transition: all 600;
}
#header.on::after {
height: 118px;
}
그리고 아래의 CSS 코드도 display:none 처리한다:
#header .nav > ul > li > ul {
position: absolute;
left: 0;
top: 39px;
width: 100%;
text-align: center;
display: none;
}
이렇게 코드를 변경하면 웹브라우저에는 아래와 같은 화면이 나타나고, 추후 스트립트를 사용해 header 태그에 class = "on"을 추가해 주면 서브메뉴가 배경과 함께 나타나는 효과를 줄 수 있다.
B영역(슬라이드) 코딩
header 영역에 이어서 슬라이드 영역의 코딩을 진행한다. HTML과 CSS 코드는 이전의 A1과 동일하다:
HTML
<article id="slider">
<div class="sliderWrap">
<div class="slider">
<a href="#"><img src="images/slider01.jpg" alt="Green 복지재단1"></a>
<div class="text">
<h2>Green 복지재단1</h2>
</div>
</div>
<div class="slider">
<a href="#"><img src="images/slider02.jpg" alt="Green 복지재단2"></a>
<div class="text">
<h2>Green 복지재단2</h2>
</div>
</div>
<div class="slider">
<a href="#"><img src="images/slider03.jpg" alt="Green 복지재단1"></a>
<div class="text">
<h2>Green 복지재단3</h2>
</div>
</div>
</div>
</article>
<!-- slider -->
HTML 코드가 완성되면 아래와 같이 CSS 코드를 작성한다:
/* slider */
#slider {
height: 300px;
overflow: hidden;
}
#slider .sliderWrap {
width: 400%;
display: flex;
}
#slider .sliderWrap .slider {
position: relative;
}
#slider .sliderWrap .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 .sliderWrap .slider .text h2 {
color: #fff;
font-size: 30px;
}
완료되면 아래와 같은 화면이 웹 브라우저에 나타난다(이미지가 가로로 정렬된다):
여기까지 코딩이 완료되었다면 아래와 같이 overflow:hidden을 적용해서 첫 번째 슬라이드 이미지만 표시되도록 한다:
/* slider */
#slider {
height: 300px;
overflow: hidden;
C영역(공지사항) 코딩
이어서 C영역의 공지사항을 코딩한다. 아래와 같이 HTML 구조를 잡는다:
<main id="contents">
<section class="notice">
<h2>공지사항</h2>
<ul>
<li><a href="#">Green 복지재단 공지사항1</a><span>2020.11.23</span></li>
<li><a href="#">Green 복지재단 공지사항2</a><span>2020.11.23</span></li>
<li><a href="#">Green 복지재단 공지사항3</a><span>2020.11.23</span></li>
<li><a href="#">Green 복지재단 공지사항4</a><span>2020.11.23</span></li>
</ul>
</section>
이어서 CSS 작업을 해준다:
/* contents: notice */
#contents .notice {
width: 400px;
height: 200px;
background-color: #91e7a3;
padding: 20px;
box-sizing: border-box;
}
#contents .notice h2 {
font-size: 24px;
margin-bottom: 10px;
}
#contents .notice li {
display: flex;
}
#contents .notice li a {
width: 75%;
font-size: 16px;
line-height: 1.8;
}
#contents .notice li a:hover {
text-decoration: underline;
}
#contents .notice ul li span{
width: 25%;
font-size: 16px;
line-height: 1.8;
text-align: right;
}
그럼 아래와 같은 화면이 나타난다:
C영역(갤러리) 코딩
이어서 갤러리 영역도 코딩을 해준다. 아래처럼 HTML 구조를 짜고:
<section class="gallery">
<h2>갤러리</h2>
<ul>
<li><a href="#"><img src="/A2/images/gallery01.png" alt="갤러리 사진1"></a></li>
<li><a href="#"><img src="/A2/images/gallery02.png" alt="갤러리 사진2"></a></li>
<li><a href="#"><img src="/A2/images/gallery03.png" alt="갤러리 사진3"></a></li>
</ul>
</section>
CSS도 아래와 같이 작성한다:
/* contents: gallery */
#contents .gallery {
width: 400px;
height: 200px;
background-color: #6cbc7d;
padding: 20px;
box-sizing: border-box;
}
#contents .gallery h2 {
font-size: 24px;
margin-bottom: 14px;
}
#contents .gallery ul {
display: flex;
justify-content: space-between;
}
#contents .gallery ul li a {
border: 5px solid transparent;
display: block;
}
#contents .gallery ul li a:hover {
border-color: #19692a;
}
#contents .gallery ul li img {
width: 100px;
height: 100px;
}
그럼 아래와 같이 화면이 구성된다:
C영역(배너) 코딩
마지막으로 배너 영역을 코딩한다. 아래와 같이 HTML 구조를 잡고:
<section class="banner">
<h2>배너</h2>
<a href="#">후원하러 가기</a>
</section>
CSS를 아래와 같이 작성한다:
/* contents:banner */
#contents .banner {
width: 400px;
height: 200px;
background-image: url(/A2/images/banner.jpg);
padding: 20px;
box-sizing: border-box;
position: relative;
}
#contents .banner h2{
font-size: 24px;
margin-bottom: 10px;
display: block;
}
#contents .banner a{
background-color: rgba(23, 177, 41, 0.536);
padding: 10px 20px;
color: #fff;
border-radius: 50px;
margin-top: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#contents .banner a:hover {
background-color: rgba(15, 125, 28, 0.536);
}
그럼 아래와 같이 화면에 배너가 완성된다:
D영역(로고) 코딩
A영역의 로고와 동일한 방식으로 코딩한다. 다만 무채색(grayscale)으로 작업한 파일을 사용한다:.
아래와 같이 HTML 구조를 잡고
<footer id="footer">
<div class="footer1">
<a href="#"><img src="/A2/images/logo_f.png" alt="Green복지재단 푸터 로고"></a>
</div>
CSS 코드를 아래와 같이 작성한다:
/* footer1: logo */
#footer .footer1 {
width: 200px;
height: 100px;
}
#footer .footer1 a {
display: block;
margin-top: 30px;
}
아래와 같이 로고가 삽입된다:
D영역(Copyright) 코딩
아래와 같이 html로 텍스트를 입력하고:
<div class="footer2">
COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED
</div>
CSS로 위치를 잡아준다:
/* footer2 : Copyright */
#footer .footer2 {
width: 700px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
아래와 같이 완성된다:
D영역(패밀리사이트) 코딩
이제 마지막으로 패밀리사이트 영역을 코딩해 준다:
Select와 Option 태그를 사용해서 HTML을 작성하고:
<div class="footer3">
<select name="#" id="#">
<option>패밀리 사이트</option>
<option value="1">패밀리 사이트1</option>
<option value="1">패밀리 사이트2</option>
<option value="1">패밀리 사이트3</option>
</select>
</div>
아래와 같이 CSS로 코딩해준다:
/* footer : Family site */
#footer .footer3 {
width: 300px;
height: 100px;
}
#footer .footer3 select {
margin-top: 35px;
width: 80%;
height: 30px;
}
그럼 아래와 같이 패밀리사이트 부분이 완성된다:
모달 레이어 팝업 코딩
이제 마지막으로 모달 레이어 팝업을 코딩해 준다. 아래와 같이 HTML 구조를 짜고:
<div class="popup-view">
<h3>복지재단 공지사항</h3>
<p>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세.
무궁화 삼천리 화려강 대한 사람 대한으로 길이 보전하세.
남산 위에 저 소나무, 철갑을 두른 듯 바람서리 불변함은 우리 기상일세.
</p>
<a href="#" class="popup-close">닫기</a>
</div>
<!-- pop-up -->
CSS도 아래와 같이 작성한다:
/* popup */
.popup-view {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: #6cbc7d;
border: 4px solid #19692a;
padding: 20px;
}
.popup-view h3 {
font-size: 24px;
margin-bottom: 15px;
border-bottom: 3px solid #19692a;
padding-bottom: 5px;
}
.popup-close {
position: absolute;
left: 50%;
bottom: 20px;
transform: translate(-50%);
background-color: #19692a;
color: #fff;
padding: 8px 20px;
}
그럼 아래와 같이 팝업도 완성된다:
그럼 이제 HTML과 CSS 구조는 모두 완성되었다. 탭을 눌러서 영역 간 이동이 되는지 확인하고 A1과 동일하게 크롬의 Web Developer 플러그인 사용해서 유효성 검사를 진행해 코드상의 오류가 없는지 확인한다:
오류가 없다면 이제 자바스크립트로 넘어간다.
자바스크립트 (Javascript) 코딩
A영역 메뉴 코딩
메인 메뉴에 마우스를 오버할때 전체 배경과 함께 서브메뉴가 내려와야 한다. 이를 구현하기 위한 자바스크립트 코드는 아래와 같다:
window.onload = function (){
//메뉴
let navList = document.querySelector(".nav > ul");
// 자바스크립트용 CSS 구현
let submenus = document.querySelectorAll("#header .nav > ul > li > ul")
submenus.forEach(function (submenu){
submenu.style.display = "block";
submenu.style.height = "0";
submenu.style.overflow = "hidden";
submenu.style.transition = "all 600ms";
});
//마우스 오버 시 전체 배경 나오는 애니메이션
navList.addEventListener("mouseover",() => {
navList.querySelectorAll(".submenu").forEach(sub => {
sub.style.height = "118px";
});
document.getElementById("header").classList.add("on");
});
navList.addEventListener("mouseout",() => {
navList.querySelectorAll(".submenu").forEach(sub => {
sub.style.height = "0px";
});
document.getElementById("header").classList.remove("on");
});
}B영역(슬라이드) 코딩
먼저 슬라이드 영역을 코딩한다. 3초마다 메인배너 이미지가 가로 방향으로 전환되어야 한다. 이를 구현하기 위한 자바스크립트 코드는 아래와 같다:
let currentIndex = 0; //현재 이미지
const sliderWrap = document.querySelector(".sliderWrap"); //전체 이미지
const slider = document.querySelectorAll(".slider"); //각각의 이미지
const sliderClone = sliderWrap.firstElementChild.cloneNode(true); //첫번째 이미지 저장
sliderWrap.appendChild(sliderClone); //복사한 이미지를 마지막에 추가
setInterval(()=> {
currentIndex++; //현재 이미지를 1씩 증가
sliderWrap.style.marginLeft = -currentIndex * 100 + "%"; //애니메이션 추가
sliderWrap.style.transition = "all 0.6s"; //이미지 이동
if(currentIndex == slider.length){ //마지막 이미지
setTimeout(() => {
sliderWrap.style.transition = "0s"; //애니메이션 정지
sliderWrap.style.marginLeft = "0"; // 이미지 위치 초기화
currentIndex = 0; //현재 이미지 초기화
}, 700);
}
},3000);레이어 팝업 코딩
이제 마지막으로 레이어팝업 코딩을 진행한다. 공지사항의 첫 번째 콘텐츠를 클릭할 경우, 레이어 팝업창이 나타나고 팝업창의 닫기 버튼을 누르면 닫히도록 코딩을 해야한다.
먼저 HTML에서 공지사항 첫 번째 콘텐츠에 popup-btn 클래스를 삽입한다:
<main id="contents">
<section class="notice">
<h2>공지사항</h2>
<ul>
<li class="popup-btn"><a href="#" >Green 복지재단 공지사항1</a><span>2020.11.23</span></li>
<li><a href="#">Green 복지재단 공지사항2</a><span>2020.11.23</span></li>
<li><a href="#">Green 복지재단 공지사항3</a><span>2020.11.23</span></li>
<li><a href="#">Green 복지재단 공지사항4</a><span>2020.11.23</span></li>
</ul>
</section>
이후 아래와 같이 자바스크립트 코드를 작성한다:
//팝업
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/blob/main/A2/index.html
애니메이션까지 구현된 최종 웹페이지:
반응형
'디자인 자격증 > 웹디자인기능사' 카테고리의 다른 글
| B-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (1) | 2023.11.20 |
|---|---|
| A-4 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (1) | 2023.11.14 |
| A-3 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (1) | 2023.11.13 |
| A-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (0) | 2023.11.08 |
| 웹디자인기능사 필기시험 벼락치기(7일) & 합격후기 (0) | 2023.06.25 |