반응형
A유형 3번째 문제 풀이.
A-3: 강원천문대 와이어프레임 살펴보기
와이어프레임 구조는 앞서 풀었던(A1, A2)와 동일하고, 아래와 같은 효과를 적용해야 한다:
- A영역의 메뉴 애니메이션: A1과 동일한 애니메이션 효과지만, 각각의 메뉴에 효과가 별도로 적용돼야 한다.
- B영역 슬라이드 애니메이션: 이미지가 서서히 사라지고 나타나는 Fade-in, Fade-out 효과가 적용되어야 한다.
- C영역: A1과 동일한 탭메뉴를 적용해야 한다.
A-3: 강원천문대 와이어프레임 구성하기
기존과 동일하게 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>강원천문대</title>
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<!-- script -->
<script src="/A3/script/script.js"></script>
</head>
<body>
<div id="wrap">
<header id="header">
</header>
<!-- //header -->
<article id="slider">
</article>
<!-- //article -->
<main id="contents">
</main>
<!-- //main -->
<footer id="footer">
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>
CSS로 넘어가서 리셋(reset)을 먼저 적용한 뒤에, ID별로 코드를 작성해 준다. 배경색을 적용해서 브라우저 화면에서 코드가 올바르게 작성되었는지 확인한다:
/* 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: 1200px;
height: 700px;
margin: 0 auto;
background-color: #a3a3a3;
}
/* header */
#header {
width: 100%;
height: 100px;
background-color: #d7d7d7;
}
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #9b9b9b;
}
/* contents */
#contents {
width: 100%;
height: 200px;
background-color: #a9a9a9;
}
/* footer */
#footer {
width: 100%;
height: 100px;
background-color: #7d7d7d;
}
브라우저 화면
이어서 영역을 세분화해 준다. 먼저 HTML 코드를 아래와 같이 작성한다:
<body>
<div id="wrap">
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<!-- //header -->
<article id="slider">
</article>
<!-- //article -->
<main id="contents">
<section class="info"></section>
<section class="banner"></section>
<section class="link"></section>
</main>
<!-- //main -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
이어서 아래와 같이 CSS 코드를 작성한다:
/* header */
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 200px;
height: 100px;
background-color: #d7d7d7;
}
#header .nav {
width: 1000px;
height: 100px;
background-color: #646464;
}
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #9b9b9b;
}
/* contents */
#contents {
width: 100%;
display: flex;
}
#contents .info {
width: 400px;
height: 200px;
background-color: #434343;
}
#contents .banner {
width: 400px;
height: 200px;
background-color: #949494;
}
#contents .link {
width: 400px;
height: 200px;
background-color: #c0c0c0;
}
/* footer */
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 200px;
height: 100px;
background-color: #7d7d7d;
}
#footer .footer2 {
width: 1000px;
height: 100px;
}
#footer .footer2 .footer2-1{
width: 100%;
height: 50px;
background-color: #585858;
}
#footer .footer2 .footer2-2{
width: 100%;
height: 50px;
background-color: #c4c4c4;
}
여기까지 코드 작성을 완료하고 웹 브라우저로 확인하면 아래와 같은 화면이 표시된다:
A영역(헤더) 로고 코딩하기
포토샵을 이용해 로고를 먼저 제작한다. 심벌 없는 워드타입으로 크기는 가로(200px) & 세로(40px) 크기의 PNG 포맷으로 저장한다. 무채색(grayscale)으로 변경한 푸터용 로고도 함께 제작한다:
HTML 코딩
*상호작용이 필요한 모든 콘텐츠(로고, 메뉴, 버튼, 바로가기 등)는 임시링크(#)를 적용하여 '탭(Tab)'키로 이동 선택할 수 있어야 한다.
div id="wrap">
<header id="header">
<h1 class="logo">
<a href="#"><img src="/A3/images/logo.png" alt="강원천문대 로고"></a>
</h1>
<nav class="nav"></nav>
</header>
이어서 아래와 같이 CSS 코딩을 해준다:
#header .logo {
width: 200px;
height: 100px;
}
#header .logo img {
margin-top: 30px;
}
이렇게 하면 아래와 같이 로고 영역이 완성된다:
A영역(헤더) 메뉴 코딩하기
시험문제에서 제공되는 사이트맵을 참고하여 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>
</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>
<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 .nav {
width: 1000px;
height: 100px;
position: relative;
}
#header .nav > ul {
display: flex;
justify-content: right;
align-items: center;
height: 100%;
}
#header .nav > ul > li > a {
color: #fff;
padding: 10px 50px;
background-color: #0f7ac7;
}
#header .nav > ul > li > a:hover {
background-color: #2e97e2;
}
#header .nav > ul > li > ul {
display: none;
}
브라우저 화면
이어서 서브메뉴 영역을 CSS로 작업한다:
#header .nav {
width: 1000px;
height: 100px;
position: relative;
}
#header .nav > ul {
display: flex;
justify-content: right;
align-items: center;
height: 100%;
}
#header .nav > ul > li {
position: relative;
}
#header .nav > ul > li > a {
color: #fff;
padding: 10px 50px;
background-color: #0f7ac7;
display: block;
}
#header .nav > ul > li > a:hover {
background-color: #2e97e2;
}
#header .nav > ul > li > ul {
position: absolute;
left: 0;
background-color: #46a8ee;
width: 100%;
text-align: center;
}
#header .nav > ul > li > ul > li > a {
padding: 10px 20px;
display: block;
}
#header .nav > ul > li > ul > li > a:hover {
background-color: #57b0ef;
}
브라우저 화면
여기까지 완료되었다면 아래와 같이 CSS 변경하여 서브메뉴를 숨김처리해 준다:
#header .nav > ul > li > ul {
position: absolute;
left: 0;
background-color: #46a8ee;
width: 100%;
text-align: center;
display: none;
}B영역(슬라이드) 코딩하기
제공된 3개의 이미지를 사용해 슬라이드 영역을 코딩한다. 추후 자바스크립트로 애니메이션을 구현해야 하므로, 이를 위한 기본 코딩을 하는 단계.
HTML 코딩
<article id="slider">
<div class="sliderWrap">
<div class="slider s1">
<img src="/A3/images/slider01.jpg" alt="강원천문대 홈페이지 새단장">
<div class="text">
<h2>강원천문대 홈페이지 새단장</h2>
</div>
</div>
<div class="slider s2">
<img src="/A3/images/slider02.jpg" alt="이달의 별자리 특강">
<div class="text">
<h2>이달의 별자리 특강</h2>
</div>
</div>
<div class="slider s1">
<img src="/A3/images/slider03.jpg" alt="별사진 공모전 개최">
<div class="text">
<h2>별사진 공모전 개최</h2>
</div>
</div>
</div>
</article>
<!-- //article -->
이어서 CSS 코딩을 진행한다:
/* slider */
#slider {
width: 100%;
height: 300px;
background-color: #9b9b9b;
}
#slider .sliderWrap {
}
#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;
}
브라우저 화면
추후 페이드인&아웃 애니메이션을 구현하기 위해 아래와 같이 CSS 코딩을 추가 작업하여, 모든 슬라이드 이미지를 같은 영역으로 모은다:
}
#slider .sliderWrap {
position: relative;
}
#slider .sliderWrap .slider {
position: absolute;
left: 0;
top: 0;
}
브라우저 화면:
C영역(공지사항/갤러리) 탭메뉴 코딩하기
먼저 아래와 같이 HTML을 작성한다:
<main id="contents">
<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.19</span></li>
<li><a href="#">하계기간 야간 연장운영합니다</a><span>2020.11.19</span></li>
<li><a href="#">청소년 대상 천문교실 안내</a><span>2020.11.19</span></li>
<li><a href="#">제1회 별사진 공모전 개회됩니다</a><span>2020.11.19</span></li>
</ul>
</div>
<div class="gallery">
<ul>
<li><a href="#"><img src="/A3/images/gallery1.jpg" alt="갤러리 이미지 1"></a></li>
<li><a href="#"><img src="/A3/images/gallery2.jpg" alt="갤러리 이미지 2"></a></li>
<li><a href="#"><img src="/A3/images/gallery3.jpg" alt="갤러리 이미지 3"></a></li>
</ul>
</div>
</div>
</section>
<!-- info -->
이어서 CSS를 작성한다. 먼저 공지사항 영역의 스타일을 정의한다:
/* contents : info */
#contents .info {
width: 400px;
height: 200px;
background-color: #9dd0f4;
padding: 20px;
box-sizing: border-box;
}
#contents .info .info-menu {
margin-bottom: 10px;
}
#contents .info .info-menu a {
font-size: 24px;
}
#contents .info .info-cont .notice li {
display: flex;
}
#contents .info .info-cont .notice li a {
width: 75%;
font-size: 18px;
line-height: 1.8;
}
#contents .info .info-cont .notice li span{
width: 25%;
font-size: 18px;
line-height: 1.8;
text-align: right;
}
#contents .info .info-cont .gallery {
display: none;
}
브라우저
이어서 갤러리 영역의 CSS 작성한다:
/* contents : info */
#contents .info {
width: 400px;
height: 200px;
background-color: #9dd0f4;
padding: 20px;
box-sizing: border-box;
}
#contents .info .info-menu {
margin-bottom: 10px;
}
#contents .info .info-menu a {
font-size: 24px;
}
#contents .info .info-menu a::after {
content: '|';
margin-left: 5px;
}
#contents .info .info-menu a:last-child::after {
content: '';
}
#contents .info .info-menu a.active {
text-decoration: underline;
}
#contents .info .info-cont .notice {
display: none;
}
#contents .info .info-cont .notice li {
display: flex;
}
#contents .info .info-cont .notice li a {
width: 75%;
font-size: 18px;
line-height: 1.8;
}
#contents .info .info-cont .notice li a:hover {
text-decoration: underline;
}
#contents .info .info-cont .notice li span{
width: 25%;
font-size: 18px;
line-height: 1.8;
text-align: right;
}
#contents .info .info-cont .gallery ul {
display: flex;
justify-content: space-between;
}
#contents .info .info-cont .gallery ul li img {
width: 100px;
height: 100px;
}
#contents .info .info-cont .gallery ul li a {
border: 4px solid transparent;
display: block;
}
#contents .info .info-cont .gallery ul li a:hover {
border-color: #0f7ac7;
}
브라우저 화면
갤러리와 공지사항 코딩이 완료되었다면, 마지막으로 CSS 가상요소를 활용해 '공지사항'과 '갤러리'사이에 구분선(|)을 넣어준다:
#contents .info .info-menu a::after {
content: '|';
margin-left: 5px;
}
#contents .info .info-menu a:last-child::after {
content: '';
}
브라우저 화면
C영역 배너 코딩하기
중간의 배너 영역을 코딩할 차례. 먼저 HTML을 아래와 같이 작성한다:
<section class="banner">
<h3>강원천문대 온라인 얘매하기</h3>
<a href="#">얘매하러 가기</a>
</section>
<!-- banner -->
이어서 CSS 코드를 작성한다:
/* contents : banner */
#contents .banner {
width: 400px;
height: 200px;
background-image: url(/A3/images/banner.jpg);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#contents .banner h3 {
color: #000000;
font-size: 24px;
}
#contents .banner a {
background-color: rgba(0, 0, 0, 0.4);
padding: 10px 20px;
color: #fff;
border-radius: 50px;
margin-top: 10px;
}
#contents .banner a:hover {
background-color: rgba(0, 0, 0, 1);
}
브라우저 화면
C영역 바로가기 코딩하기
중간 배너 영역과 동일한 HTML 구조를 사용한다:
<section class="link">
<h3>이달의 별자리 구경하기</h3>
<a href="#">바로가기</a>
</section>
<!-- link -->
마찬가지로 CCS로 스타일을 정의해 준다:
/* contents: link */
#contents .link {
width: 400px;
height: 200px;
background-image: url(/A3/images/link.jpg);
}
#contents .link h3 {
color: #fff;
font-size: 24px;
padding: 20px;
}
#contents .link a {
width: 100px;
height: 100px;
background-color: #0f7ac7c7;
display: block;
border-radius: 50%;
text-align: center;
color: #fff;
line-height: 100px;
margin: 0 auto;
}
#contents .link a:hover {
background-color: rgba(0, 0, 0, 0.4);
}
브라우저 화면
D영역(푸터) 로고
상단 헤더와 동일한 방식으로 하단에 위치한 푸터에 무채색(grayscale) 로고를 삽입해 준다.
HTML
<footer id="footer">
<div class="footer1">
<h4 class="logo">
<a href="#"></a><img src="/A3/images/logo_f.png" alt="강원천문대 푸터영역 로고">
</h4>
</div>
CSS
#footer {
width: 100%;
display: flex;
background-color: #e9e9e9;
}
#footer .footer1 {
width: 150px;
}
#footer .footer1 .logo {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
#footer .footer1 .logo img {
width: 80%;
}
브라우저 화면
D영역(푸터) 하단 메뉴 & Copyright 코딩
아래와 같이 HTML을 작성한다:
<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>
CSS 코드:
#footer .footer2 {
width: 1050px;
height: 100px;
}
#footer .footer2 .footer2-1{
width: 100%;
height: 50px;
text-align: center;
}
#footer .footer2 .footer2-1 ul {
padding-top: 24px;
}
#footer .footer2 .footer2-1 li {
display: inline-block;
}
#footer .footer2 .footer2-1 li a {
padding: 10px;
}
#footer .footer2 .footer2-1 li a:hover {
text-decoration: underline;
}
#footer .footer2 .footer2-2{
width: 100%;
height: 50px;
text-align: center;
padding-top: 10px;
box-sizing: border-box;
}
브라우저 화면
마지막으로 하단메뉴 사이에 가상요소로 구분자(|)를 삽입하여 작업을 마무리한다:
#footer .footer2 .footer2-1 li::after {
content: '|';
margin-left: 5px;
}
#footer .footer2 .footer2-1 li:last-child::after {
content: '';
}
브라우저 화면
레이어 팝업 코딩
HTML
푸터 영역 하단에 아래와 같이 레이어 팝업 코드를 작성한다:
<div class="popup-view">
<h3>하늘과 바람과 별과 詩 사생대회</h3>
<p>
윤동주 시인의 시집 <하늘과 바람과 별과 詩> 출간 72주년을 맞이하여 천문대에서 개최하는 사생대회가 열립니다. 별 하나에 추억, 사랑, 쓸쓸함, 동경 그리고 시와, 어머니를 그렸던 시인처럼 별같은 마음을 가진 분들은 참여해주세요.
</p>
<a href="#" class="popup-close">닫기</a>
</div>
<!-- popup -->
CSS
/* popup */
.popup-view {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: #6cbcf5;
border: 4px solid #0f7ac7;
padding: 20px;
}
.popup-view h3 {
font-size: 24px;
margin-bottom: 15px;
border-bottom: 2px soild #0f7ac7;
padding-bottom: 5px;
}
.popup-close{
position: absolute;
left: 50%;
bottom: 20px;
transform: translate(-50%);
background-color: #0f7ac7;
color: #fff;
padding: 8px 20px;
}
아래와 같이 CSS를 수정하여 팝업창이 화면 중앙에 정렬될 수 있도록 처리한다:
/* wrap */
#wrap {
width: 1200px;
height: 700px;
margin: 0 auto;
position: relative;
}
브라우저 화면
여기까지 진행하면 HTML과 CSS 코딩은 모두 완료된다. 구글 크롬 Web Develper 플러그인을 사용해 W3C 유효성 검사를 진행하고 이상이 없다면 자바스크립트로 넘어간다.
자바스크립트(Javascript) 코딩
A영역(메뉴) 애니메이션 코딩
먼저 헤더 영역의 메뉴를 코딩한다. 자바스크립트 코드는 아래와 같다:
window.onload = function(){
//메뉴
let navList = document.querySelectorAll(".nav > ul > li");
//자바스크립트용 CSS 구현
let submenus = document.querySelectorAll(".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.forEach(function(navItem){
navItem.addEventListener("mouseover", function(){
let subMenu = this.querySelector(".submenu");
subMenu.style.height = subMenu.scrollHeight + "px";
});
});
navList.forEach(function(navItem){
navItem.addEventListener("mouseout", function(){
this.querySelector(".submenu").style.height = "0px";
});
});
}
아래와 같이 z-index 코드를 CSS에 추가하여 메뉴가 슬라이드 상단에 위치하도록 처리한다:
#header .nav {
width: 1000px;
height: 100px;
position: relative;
z-index: 1;
}B영역(슬라이드) 애니메이션 코딩
이미지가 사라졌다가 다음 이미지가 나타나는 페이드인&아웃 애니메이션 효과를 구현해야 한다. 다음과 같은 자바스크립트 코드를 작성한다:
//슬라이드
let currentIndex = 0; //현재 이미지
const slider = document.querySelectorAll(".slider"); //모든 이미지를 변수에 저장
slider.forEach(img => img.style.opacity = "0"); //모든 이미지를 투명하게 처리
slider[0].style.opacity = "1"; //첫번째 이미지만 보이게
setInterval(()=> { //3초에 한번씩 실행
let nextIndex = (currentIndex + 1) % slider.length; //1 2 0 1 2 무한반복
slider[currentIndex].style.opacity = "0"; //첫번째 이미지 사라짐
slider[nextIndex].style.opacity = "1"; //두번째 이미지 나타남
slider.forEach(img => img.style.transition = "all 1s"); //이미지 애니메이션 추가
currentIndex = nextIndex; //두번째 인덱스값을 현재 인덱스값에 저장
},3000);C영역(공지사항/갤러리) 탭메뉴 코딩
아래 자바스크립트를 작성한다:
//탭메뉴
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에서 공지사항 첫 번째 콘텐츠에 popup-btn 클래스를 삽입해 준다:
<div class="notice">
<ul>
<li class="popup-btn"><a href="#">하늘과 바람과 별과 詩 사생대회</a><span>2020.11.19</span></li>
<li><a href="#">하계기간 야간 연장운영합니다</a><span>2020.11.19</span></li>
<li><a href="#">청소년 대상 천문교실 안내</a><span>2020.11.19</span></li>
<li><a href="#">제1회 별사진 공모전 개회됩니다</a><span>2020.11.19</span></li>
</ul>
</div>
HTML 코드를 수정한 뒤 아래의 자바스크립트 코드를 작성한다:
//레이어 팝업
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/A3
최종 화면
반응형
'디자인 자격증 > 웹디자인기능사' 카테고리의 다른 글
| B-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (1) | 2023.11.20 |
|---|---|
| A-4 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (1) | 2023.11.14 |
| A-2 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (0) | 2023.11.11 |
| A-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트) (0) | 2023.11.08 |
| 웹디자인기능사 필기시험 벼락치기(7일) & 합격후기 (0) | 2023.06.25 |