디자인 자격증/웹디자인기능사

E-1:웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

saejun 2023. 11. 22. 00:00
반응형

E-1: 김치이야기 와이어프레임 살펴보기

E유형은 가로만 반응형인 D형과 다르게 가로&세로 모두 반응형으로 제작해야 한다.

 

영역별 애니메이션:

  • 서브메뉴: 개별 세로 슬라이드
  • 이미지: 좌우 슬라이드
  • 레이어 팝업

E-1: 김치이야기 와이어프레임 구성하기

Visual Studio Code를 실행하고, 아래와 같은 구조로 파일을 생성한다:

 

 

HTML을 사용해서 와이어프레임의 기본구조를 만든다. 먼저 Main과 Footer 두 영역으로 구분한다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>김치이야기</title>

    <!-- css -->
    <link rel="stylesheet" href="style.css">

    <!-- script -->
    <script src="script/script.js"></script>

</head>
<body>
    <div id="wrap">
        <main id="main"></main>
        <footer id="footer"></footer>
    </div>
</body>
</html>

 

CSS

reset 작업을 하고 기본 구조를 정의한다:

*세로(Height)는 %를 인식하지 못하므로 대신 vh 값을 사용한다.

@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 {
    width: 100%;
}

#main {
    width: 100%;
    height: calc(100vh - 120px);
    background-color: #cecece;
}

#footer {
    width: 100%;
    height: 120px;
    background-color: #b2b2b2;
}

 

브라우저

이어서 세부 와이어프레임 영역을 구성한다:

 

HTML

<body>
    <div id="wrap">
        <main id="main">
            <header id="header">

            </header>
            <!-- //header -->

            <div id="contents">

            </div>
            <!-- //contents -->

            <article id="slider">

            </article>
            <!-- //slider -->
        </main>
        <footer id="footer">

        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
</html>

 

CSS

/* wrap */
#wrap {
    width: 100%;
}

/* main */
#main {
    width: 100%;
    height: calc(100vh - 120px);
    display: flex;
}

/* header */
#header {
    width: 200px;
    height: 100%;
    background-color: #a7a7a7;
}

/* contents */
#contents {
    width: 400px;
    height: 100%;
    background-color: #5e5e5e;
}

/* slider */
#slider {
    width: calc(100% - 600px);
    height: 100%;
    background-color: #8e8e8e;
}

/* footer */
#footer {
    width: 100%;
    height: 120px;
    background-color: #b2b2b2;
}

 

브라우저

계속 와이어프레임 구조를 잡아나간다:

 

HTML

<body>
    <div id="wrap">
        <main id="main">
            <header id="header">
                <h1 class="logo"></h1>
                <nav class="nav"></nav>
            </header>
            <!-- //header -->

            <div id="contents">
                <div class="banner"></div>
                <div class="notice"></div>
                <div class="gallery"></div>
                <div class="shortcut"></div>
            </div>
            <!-- //contents -->

            <article id="slider">

            </article>
            <!-- //slider -->
        </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>
</html>

 

CSS

/* wrap */
#wrap {
    width: 100%;
}

/* main */
#main {
    width: 100%;
    height: calc(100vh - 120px);
    display: flex;
}

/* header */
#header {
    width: 200px;
}

#header .logo {
    width: 100%;
    height: 10%;
    background-color: #a7a7a7;
}
#header .nav {
    width: 100%;
    height: 90%;
    background-color: #b8b8b8;
}

/* contents */
#contents {
    width: 400px;
}
#contents .banner {
    width: 100%;
    height: 15%;
    background-color: #5e5e5e;
}
#contents .notice {
    width: 100%;
    height: 35%;
    background-color: #c6c6c6;
}
#contents .gallery {
    width: 100%;
    height: 35%;
    background-color: #4f4f4f;
}
#contents .shortcut {
    width: 100%;
    height: 15%;
    background-color: #e6e6e6;
}

/* slider */
#slider {
    width: calc(100% - 600px);
    height: 100%;
    background-color: #6a6a6a;
}

/* footer */
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 200px;
    height: 120px;
    background-color: #b2b2b2;
}
#footer .footer2 {
    width: calc(100% - 200px);
}
#footer .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #959595;
}
#footer .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #c4c4c4;
}

 

브라우저

A영역(헤더) 로고 코딩

제공된 로고 파일을 삽입한다. 문제풀이에서는 제공된 파일이 없으므로 아래와 같이 포토샵에서 2개의 로고(헤더, 푸터)를 임의로 만들어서 작업을 진행하였다:

사이즈(200x40)픽셀, PNG포맷

 

HTML

 <div id="wrap">
        <main id="main">
            <header id="header">
                <h1 class="logo">
                    <a href="#"><img src="images/logo.png" alt="김치이야기 로고"></a>
                </h1>
                <nav class="nav"></nav>
            </header>
            <!-- //header -->

 

CSS

#header .logo {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

브라우저

A영역(헤더) 메뉴 코딩

시험지의 사이트맵을 참고하여 메뉴 영역을 구성한다:

 

HTML

<body>
    <div id="wrap">
        <main id="main">
            <header id="header">
                <h1 class="logo">
                    <a href="#"><img src="images/logo.png" alt="김치이야기 로고"></a>
                </h1>
                <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>
                                <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>
                    <p class="spot">
                        <a href="#">SPOTMENU1</a>
                        <a href="#">SPOTMENU2</a>
                    </p>
                </nav>
            </header>
            <!-- //header -->

 

CSS

먼저 메인메뉴를 코딩한다

 

/* header */
#header {
    width: 200px;
}
#header .logo {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header .nav {
    width: 100%;
    height: 90%;
}
#header .nav > ul {
    margin: 5px;
}
#header .nav > ul > li {
    text-align: center;
}
#header .nav > ul > li > a {
    display: block;
    padding: 20px 40px;
    box-sizing: border-box;
    width: 100%;
    background-color: #d01111;
    color: #fff;
    border: 1px solid #000000;
}
#header .nav > ul > li > a:hover {
    background-color: rgba(0, 0, 0, 0.4);
}
#header .nav > ul > li > ul {
    display: none;
}

 

브라우저

 

이어서 서브메뉴를 코딩한다:

/* header */
#header {
    width: 200px;
}
#header .logo {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#header .nav {
    width: 100%;
    height: 90%;
}
#header .nav > ul {
    margin: 5px;
}
#header .nav > ul > li {
    text-align: center;
}
#header .nav > ul > li > a {
    display: block;
    padding: 20px 40px;
    box-sizing: border-box;
    width: 100%;
    background-color: #d01111;
    color: #fff;
    border: 1px solid #000000;
}
#header .nav > ul > li > a:hover {
    background-color: rgba(0, 0, 0, 0.4);
}
#header .nav > ul > li > ul {
    /* display: none; */
}
#header .nav > ul > li > ul > li > a {
    display: block;
    padding: 10px 40px;
    background-color: #e87777;
    color: #000;
}
#header .nav > ul > li > ul > li > a:hover {
    background-color: #cb4c4c;
}

 

브라우저

 

서브메뉴를 숨김처리하고 메뉴 하단의 SPOTMENU를 꾸며준다:

#header .nav .spot {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}
#header .nav .spot a {
    font-size: 14px;
    text-decoration: underline;
}
#header .nav .spot a:hover {
    color: #cb4c4c;
}
#header .nav .spot a::after {
    content: '|';
    margin: 0px 5px;
}
#header .nav .spot a:last-child::after {
    content: '';
    margin-right: -5px;
}

 

브라우저

B영역(슬라이드) 코딩

반응형 슬라이드를 코딩한다. D유형과 동일하게 이미지소스는 CSS 사용해서 배경형태로 삽입한다:

 

HTML

<article id="slider">
                <div class="sliderWrap">
                    <div class="slider s1">
                        <div class="text">
                            <h2>김치이야기 1</h2>
                        </div>
                    </div>
                    <div class="slider s2">
                        <div class="text">
                            <h2>김치이야기 2</h2>
                        </div>
                    </div>
                    <div class="slider s3">
                        <div class="text">
                            <h2>김치이야기 3</h2>
                        </div>
                    </div>
                </div>
            </article>
            <!-- //slider -->

 

CSS

/* slider */
#slider {
    width: calc(100% - 600px);
    height: 100%;
    overflow: hidden;
}
#slider .sliderWrap {
    width: 300%;
    height: 100%;
    display: flex;
}
#slider .sliderWrap .slider {
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: relative;
}
#slider .sliderWrap .slider.s1 {
    background-image: url(../images/slider01.png);
}
#slider .sliderWrap .slider.s2 {
    background-image: url(../images/slider02.png);
}
#slider .sliderWrap .slider.s3 {
    background-image: url(../images/slider03.png);
}
#slider .sliderWrap .slider .text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    background-color: rgba(0, 0, 0, 0.4);
}
#slider .sliderWrap .slider .text h2 {
    font-size: 40px;
    color: #fff;
}

 

브라우저

C영역(배너) 코딩하기

  <div id="contents">
                <div class="banner">
                    <a href="#">
                       <div class="photo"> <img src="images/banner.jpg" alt="김치 만들기"></div>
                        <div class="text">
                            <h3>가족 김장 행사</h3>
                            <p>아이들에게 추억을 선물해 주세요</p>
                        </div>
                        <div class="arrow"><img src="images/arrow.png" alt="배너 화살표"></div>
                    </a>
                </div>
                <!-- //banner -->

 

CSS

/* contents : banner */
#contents .banner {
    width: 100%;
    height: 15%;
    background-color: #f49c9c;
}
#contents .banner:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}
#contents .banner a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#contents .banner .photo {
    width: 90px;
    height: 70px;
    overflow: hidden;
    margin-right: 20px;
}
#contents .banner .text {
    display: block;
    margin-right: 30px;
}
#contents .banner .text h3 {
    font-size: 18px;
    margin-bottom: 2px;
}
#contents .banner .text p {
    font-size: 14px;
}
#contents .banner .arrow {
    width: 40px;
}

 

브라우저

C영역(공지사항) 코딩하기

HTML

<div class="notice">
                    <div class="notice-menu">
                        <a href="#">공지사항</a>
                    </div>
                    <ul>
                        <li><a href="#">공지사항1</a><span>2023.11.2</span></li>
                        <li><a href="#">공지사항2</a><span>2023.11.2</span></li>
                        <li><a href="#">공지사항3</a><span>2023.11.2</span></li>
                    </ul>
                </div>
                <!-- //notice -->

 

CSS

/* contents : notice */
#contents .notice {
    width: 100%;
    height: 35%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    padding-top: 50px;
}
#contents .notice .notice-menu a {
    font-size: 18px;
    background-color: #f8d0d0;
    padding: 10px;
}
#contents .notice ul {
    background-color: #f8d0d0;
    padding: 10px;
    box-sizing: border-box;
}
#contents .notice ul li {
    display: flex;
    border-bottom: 2px solid #000;
    padding: 5px;
    box-sizing: border-box;
}
#contents .notice ul li:hover {
    text-decoration: underline;
}
#contents .notice ul li a {
    width: 70%;
    font-size: 16px;
    line-height: 1.6;
}
#contents .notice ul li span {
    width: 30%;
    font-size: 16px;
    line-height: 1.6;   
    text-align: right;
}

 

브라우저

C영역(갤러리) 코딩하기

HTML

<div class="gallery">
                    <h3>갤러리</h3>
                    <ul>
                        <li><a href="#"><img src="images/gallery01.png" alt="김장"></a><span>김장</span></li>
                        <li><a href="#"><img src="images/gallery02.png" alt="열무김치"></a><span>열무김치</span></li>
                    </ul>
                </div>
                <!-- //gallery -->

 

CSS

<div class="gallery">
                    <h3>갤러리</h3>
                    <ul>
                        <li><a href="#"><img src="images/gallery01.png" alt="김장"></a><span>김장</span></li>
                        <li><a href="#"><img src="images/gallery02.png" alt="열무김치"></a><span>열무김치</span></li>
                    </ul>
                </div>
                <!-- //gallery -->

 

브라우저

C영역(바로가기) 코딩하기

HTML

   <div class="shortcut">
                    <ul>
                        <li><a href="#"><img src="images/icon01.png" alt="아이콘1"><span>사진</span></a></li>
                        <li><a href="#"><img src="images/icon02.png" alt="아이콘1"><span>사진</span></a></li>
                        <li><a href="#"><img src="images/icon03.png" alt="아이콘1"><span>사진</span></a></li>
                        <li><a href="#"><img src="images/icon04.png" alt="아이콘1"><span>사진</span></a></li>
                    </ul>
                </div>
                <!-- //shortcut -->

 

CSS

/* contents : shortcut */
#contents .shortcut {
    width: 100%;
    height: 15%;
    padding: 10px;
    box-sizing: border-box;
}
#contents .shortcut ul {
    display: flex;
    justify-content: space-between;
}
#contents .shortcut ul li {
    text-align: center;
    width: 70px;
}
#contents .shortcut ul li img {
    padding-bottom: 5px;
}
#contents .shortcut ul li span:hover {
    color: #e87777;
}

 

브라우저

D영역(푸터) 코딩하기

HTML

<footer id="footer">
            <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>
                        <li><a href="#">하단메뉴4</a></li>
                        <li><a href="#">하단메뉴5</a></li>
                        <li><a href="#">하단메뉴6</a></li>
                    </ul>
                </div>
                <div class="footer2-2">
                    COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED
                </div>
            </div>
        </footer>
        <!-- //footer -->

 

CSS

/* footer */
#footer {
    width: 100%;
    display: flex;
    background-color: #dfdfdf;
}
#footer .footer1 {
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;   
}
#footer .footer1 img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
#footer .footer2 {
    width: calc(100% - 200px);
}
#footer .footer2-1 {
    width: 100%;
    height: 60px;
}
#footer .footer2-1 ul {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
#footer .footer2-1 ul li {
    text-decoration: underline;
    font-size: 14px;
}
#footer .footer2-1 ul li:hover {
    color: #d01111;
}
#footer .footer2-1 ul li::after {
    content:'|';
    margin: 30px;
}
#footer .footer2-1 ul li:last-child::after {
    content: '';
}
#footer .footer2-2 {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

 

브라우저

레이어팝업

마지막으로 레이어 팝업 코딩을 진행한다.

 

HTML

<div class="popup-view">
            <h2>김치 페이벡 이벤트</h2>
            <p>
                구매금액에 상관없이! <br> 김치이야기에서 김치를 구매하시면 현금처럼 쓸 수 있는 적립금을 드립니다!
            </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: #f8d0d0;
    border: 4px solid #d01111;
    padding: 20px;
}
.popup-view h2 {
    border-bottom: 2px solid #d01111;
    padding-bottom: 5px;
    margin-bottom: 20px;
}
.popup-view p {
    line-height: 1.2;
}
.popup-close {
    padding: 10px 20px;
    background-color: #d01111;
    color: #fff;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

 

브라우저

 

여기까지 코딩을 완료하면 W3C 유효성 검사를 진행한다. 이상이 없다면 자바스크립트로 넘어간다.

자바스크립트

메뉴 Javascript

세로로 펼쳐지는 세부메뉴 애니메이션을 구현한다:

//메뉴
    let navList = document.querySelectorAll(".nav > ul > li");

    //자바스크립트 CSS
    let submenus = document.querySelectorAll(".nav > ul > li > ul");
    submenus.forEach(submenu => {
        submenu.style.display = "block";
        submenu.style.overflow = "hidden";
        submenu.style.height = "0";
        submenu.style.transition = "all 600ms";
    });


    navList.forEach(navItem => {
        navItem.addEventListener("mouseover", function(){
            let subMenu = this.querySelector(".submenu");
            subMenu.style.height = subMenu.scrollHeight + "px"
        });
    });

    navList.forEach(navItem => {
        navItem.addEventListener("mouseout", function(){
            this.querySelector(".submenu").style.height = "0px";
        });
    });

슬라이드 Javascript

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++;
        sliderWrap.style.transition = "all 0.6s";
        sliderWrap.style.marginLeft = -currentIndex * 100 + "%";

        if(currentIndex == slider.length){
            setTimeout(()=>{
                sliderWrap.style.transition = "0s";
                sliderWrap.style.marginLeft = "0";
                currentIndex = 0;
            },600);
        }
    },3000);

레이어팝업 Javascript

 

자바스크립트 코딩을 하기 전에 HTML에서 공지사항 첫 번째 리스트에 Class를 추가한다:

<div class="notice">
                    <div class="notice-menu">
                        <a href="#">공지사항</a>
                    </div>
                    <ul>
                        <li class="popup-btn"><a href="#">공지사항1</a><span>2023.11.2</span></li>
                        <li><a href="#">공지사항2</a><span>2023.11.2</span></li>
                        <li><a href="#">공지사항3</a><span>2023.11.2</span></li>
                    </ul>
                </div>
                <!-- //notice -->

 

자바스크립트

// 레이어 팝업
    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/E1

 

최종화면

https://saejunahn.github.io/Craftsman-Web-Design/E1/

반응형
저작자표시 비영리 변경금지

'디자인 자격증 > 웹디자인기능사' 카테고리의 다른 글

웹디자인기능사 실기시험 합격 & 독학 후기(3개월 - 자바스크립트)  (3) 2023.11.25
D-1: 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)  (1) 2023.11.21
C-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)  (1) 2023.11.20
B-1 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)  (1) 2023.11.20
A-4 웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)  (1) 2023.11.14

'디자인 자격증/웹디자인기능사'의 다른글

  • 현재글E-1:웹디자인기능사 실기시험 공개문제 풀이(자바스크립트)

관련글

댓글

티스토리툴바