본문 바로가기
CSS HTML JAVASCRIPT 웹디자인기능사 GSAP 포트폴리오 유튜브
Tutorial/WebD

2023년 웹디자인 기능사 실전 사이트 연습5 - E유형

by @webstoryboy 2023. 5. 15.
Tutorial/webd

2023년 웹디자인 기능사 실전 사이트 : E유형

by @webs 2023. 05. 01.
39
웹디자인 기능사 실전 사이트 : E유형
난이도 중급
소스 다운로드
완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기

소개

안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사에서 가장 어려운 부분인 E유형입니다. 반응형도 신경써야 하고 스크립트까지 접목시켜야 완성할 수 있습니다. 그럼 마지막까지 화이팅해봅시다.

1. 구조 잡기

1-1. 준비하기

우선 폴더를 먼저 셋팅하겠습니다. 폴더를 만들고, 그 안에 css, images, script를 폴더를 만들고 index.html페이지를 만들겠습니다. !를 쓰고 tab 버튼을 누르고, 언어와 타이들을 수정합니다. css와 script를 연동합니다. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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/jquery.min.js"></script>
    <script src="script/script.js"></script>
</head>
<body>
    
</body>
</html>

1-2. 전체 레이아웃 잡기

전체적인 레이아웃은 메인과 푸터로 잡았습니다. 메인에는 헤더와 콘텐츠, 슬라이드로 구성되어 있습니다. 

<body>
    <div id="wrap">
        <main id="main">
            <header id="header">
            </header>
            <!-- //header -->

            <section id="contents">
            </section>
            <!-- //contents -->

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

        <footer id="footer">
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>

css도 언어설정을 해주어야 합니다. @charset "UTF-8"를 설정하고 기본 색상은 #333으로 설정합니다. 

@charset "UTF-8";=
/* reset */
* {
    margin: 0;
    padding: 0;
    color: #333;
}
a {
    text-decoration: none;
    color: #333;
}
li {
    list-style: none;
}
img {
    width: 100%;
    display: block;
}

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

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

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

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

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

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

1-3. 세부적인 레이아웃 작업하기

헤더 영역은 로고와 네비로 구성되어 있고, 콘텐츠 영역은 4개의 섹션으로 구성되어 있습니다. 푸터는 3개의 영역으로 나누고 가운데 영역은 두개의 영역으로 분리됩니다. 

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

            <section id="contents">
                <article class="banner"></article>
                <article class="notice"></article>
                <article class="gallery"></article>
                <article class="link"></article>
            </section>
            <!-- //contents -->

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

        <footer id="footer">
            <div class="footer1"></div>
            <div class="footer2">
                <div class="footer2-1"></div>
                <div class="footer2-2"></div>
            </div>
            <div class="footer3"></div>
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
/* 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: #efefef;
}
#header .nav {
    width: 100%;
    height: 90%;
    background-color: #e3e3e3;
}

/* contents */
#contents {
    width: 400px;
}
#contents .banner {
    width: 100%;
    height: 15%;
    background-color: #d9d9d9;
}
#contents .notice {
    width: 100%;
    height: 35%;
    background-color: #d1d1d1;
}
#contents .gallery {
    width: 100%;
    height: 35%;
    background-color: #c7c7c7;
}
#contents .link {
    width: 100%;
    height: 15%;
    background-color: #bcbcbc;
}

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

/* footer */
#footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
#footer .footer1 {
    width: 200px;
    height: 120px;
    background-color: #a3a3a3;
}
#footer .footer2 {
    width: calc(100% - 400px);
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    background-color: #9d9d9d;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    background-color: #929292;
}
#footer .footer3 {
    width: 200px;
    height: 120px;
    background-color: #838383;
}

2. 각 섹션 작업하기

2-1. 헤더 영역 작업하기

헤더 영역은 로고와 메뉴로 구성되어 있습니다. 

<header id="header">
    <h1 class="logo">
        <a href="#">철길 마을</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>
                    <li><a href="#">자료마당</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>
<!-- //header -->

/* header */
#header {
    width: 200px;
    height: 100%;
    background-color: #ffe5e5;
}
#header .logo {
    width: 100%;
    text-align: center;
}
#header .logo a {
    padding: 24px;
    display: block;
    color: #b40000;
}
#header .nav {
    width: 100%;
    height: 90%;
    position: relative;
    z-index: 1000;
}
#header .nav > ul > li {
    text-align: center;
    position: relative;
}
#header .nav > ul > li > a {
    padding: 10px;
    display: inline-block;
    background-color: #ff6d6d;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
}
#header .nav > ul > li > a:hover {
    background-color: #ff8888;
}
#header .nav > ul > li > ul {
    position: absolute;
    right: -200px;
    top: 0;
    width: 200px;
    display: none;
}
#header .nav > ul > li > ul > li a {
    padding: 10px;
    display: inline-block;
    background-color: #ff6d6d;
    width: 100%;
    color: #fff;
    box-sizing: border-box;
}
#header .nav > ul > li > ul > li a:hover {
    background-color: #ffa9a9;
}

2-2. 콘텐츠 배너 작업하기

콘텐츠 영역의 배너입니다. 배너 이미지는 백그라운드로 넣고 버튼을 작업하였습니다. 

<article class="banner">
    <h3>기차 여행</h3>
    <a href="#">떠나기!</a>
</article>
<!-- //banner -->
/* contents : banner */
#contents .banner {
    width: 100%;
    height: 15%;
    background: url(../images/banner.jpg) no-repeat center;
    display: flex;
    align-items: center;
    justify-content: center;
}
#contents .banner h3 {
    color: #ffefef;
    font-size: 24px;
}
#contents .banner a {
    color: #fff;
    background-color: #ff6d6dc1;
    padding: 10px 20px;
    border-radius: 40px;
    margin-left: 10px;
}
#contents .banner a:hover {
    background-color: #ff6d6d;
}

2-3. 콘텐츠 게시판 작업하기

목록과 더보기가 있는 게시판 유형입니다. 

<article class="notice">
    <h3>철길 마을 공지사항</h3>
    <ul>
        <li><a href="#">철길 마을 축제 일정 변경 안내</a><span>2023.03.04</span></li>
        <li><a href="#">철길 마을 도서관 임시 폐쇄 안내</a><span>2023.05.04</span></li>
        <li><a href="#">철길 마을 자원봉사자 모집 공고</a><span>2023.04.04</span></li>
        <li><a href="#">철길 마을 청소 캠페인 안내</a><span>2023.05.04</span></li>
        <li><a href="#">철길 마을의 최신 소식</a><span>2023.04.04</span></li>
    </ul>
    <a href="#" class="more">더보기+</a>
</article>
<!-- //notice -->
/* contents : notice */
#contents .notice {
    width: 100%;
    height: 35%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
#contents .notice h3 {
    background-color: #ff6d6d;
    color: #fff;
    padding: 4px 10px;
    margin-bottom: 10px;
}
#contents .notice li {
    display: flex;
    position: relative;
    padding-left: 10px;
    line-height: 1.6;
}
#contents .notice li::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #ff6d6d;
    position: absolute;
    left: 0;
    top: 8px;
    border-radius: 50%;
}
#contents .notice li a {
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#contents .notice li a:hover {
    text-decoration: underline;
}
#contents .notice li span {
    width: 30%;
    text-align: right;
}
#contents .notice .more {
    position: absolute;
    right: 26px; 
    top: 26px;
    color: #fff;
}

2-4. 콘텐츠 갤러리 작업하기

갤러리 형태의 유형입니다. 이미지는 백그라운드로 들어가고 마우스 오버 효과를 추가하였습니다. 

<article class="gallery">
    <h3>철길 마을 갤러리</h3>
    <ul>
        <li><a href="#">최고의 뷰</a></li>
        <li><a href="#">위험한 뷰</a></li>
        <li><a href="#">아름다운 뷰</a></li>
    </ul>
    <a href="#" class="more">더보기+</a>
</article>
<!-- //gallery -->
/* contents : gallery */
#contents .gallery {
    width: 100%;
    height: 35%;
    background-color: #ffecec;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
#contents .gallery h3 {
    background-color: #ff6d6d;
    color: #fff;
    padding: 4px 10px;
    margin-bottom: 10px;
}
#contents .gallery ul {
    display: flex;
    justify-content: space-between;
}
#contents .gallery li {
    width: 110px;
    height: 150px;
    background-size: cover;
}
#contents .gallery li:nth-child(1){
    background-image: url(../images/gallery01.jpg);
}
#contents .gallery li:nth-child(2){
    background-image: url(../images/gallery02.jpg);
}
#contents .gallery li:nth-child(3){
    background-image: url(../images/gallery03.jpg);
}
#contents .gallery li a {
    display: block;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
#contents .gallery li a:hover {
    background-color: rgba(0,0,0,0.1);
}
#contents .gallery .more {
    position: absolute;
    right: 26px; 
    top: 26px;
    color: #fff;
}

2-5. 콘텐츠 링크 작업하기

링크 영역은 4개의 버튼을 만들었습니다. 

<article class="link">
    <h3>도움</h3>
    <ul>
        <li>
            <a href="#">
                <img src="images/icon01.png" alt="사진">
                <span>사진찍기</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/icon02.png" alt="사진">
                <span>분실물</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/icon03.png" alt="사진">
                <span>예약하기</span>
            </a>
        </li>
        <li>
            <a href="#" class="popup-btn">
                <img src="images/icon04.png" alt="사진">
                <span>전화하기</span>
            </a>
        </li>
    </ul>
</article>
<!-- //link -->
/* contents : link */
#contents .link {
    width: 100%;
    height: 15%;
    overflow: hidden;
}
#contents .link h3 {
    width: 1px;
    height: 1px;
    overflow: hidden;
    text-indent: -9999px;
}
#contents .link ul {
    display: flex;
    padding: 0 10px;
}
#contents .link li {
    width: 25%;
    padding: 5%;
    box-sizing: border-box;
    text-align: center;
}
#contents .link li:hover a span {
    color: #ff6d6d;
}

2-6. 슬라이드 작업하기

슬라이드 영역은 3장의 이미지로 구성되어 있습니다. 

<article id="slider">
    <div class="sliderWrap">
        <div class="slider s1">
            <div class="text">
                <h3>추억을 소환하는 철길 마을</h3>
                <p>철길마을</p>
            </div>
        </div>
        <div class="slider s2">
            <div class="text">
                <h3>추억을 소환하는 철길 마을</h3>
                <p>철길마을</p>
            </div>
        </div>
        <div class="slider s3">
            <div class="text">
                <h3>추억을 소환하는 철길 마을</h3>
                <p>철길마을</p>
            </div>
        </div>
    </div>
</article>
<!-- //slider -->
/* slider */
#silder {
    width: calc(100% - 600px);
    height: 100%;
    overflow: hidden;
}
#silder .sliderWrap {
    width: 400%;
    height: 100%;
    display: flex;
}
#silder .sliderWrap .slider {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
#silder .sliderWrap .slider .text {
    background-color: #ff6d6da3;
    width: 300px;
    height: 300px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
}
#silder .sliderWrap .slider .text h3 {
    color: #fff;
    font-size: 20px;
}
#silder .sliderWrap .slider .text p {
    color: #fff;
    margin-top: 5px;
}
#silder .sliderWrap .slider.s1 {
    background-image: url(../images/slider01.jpg);
}
#silder .sliderWrap .slider.s2 {
    background-image: url(../images/slider02.jpg);
}
#silder .sliderWrap .slider.s3 {
    background-image: url(../images/slider03.jpg);
}

2-7. 푸터 작업하기

푸터 영역은 세개의 영역으로 작업합니다. 

<footer id="footer">s
    <div class="footer1">
        <h4>철길 마을</h4>
    </div>
    <div class="footer2">
        <div class="footer2-1">
            <ul>
                <li><a href="#">개인정보처리방침</a></li> |
                <li><a href="#">정보 공개</a></li> |
                <li><a href="#">홈페이지 운영지침</a></li> |
                <li><a href="#">분실물 확인하기</a></li>
            </ul>
        </div>
        <div class="footer2-2">
            15073 전라북도 군산시 군산로 237 (정왕동) 철길 마을 COPYRIGHT(C) ALL RIGHTS RESERVED.
        </div>
    </div>
    <div class="footer3">
        <select name="family" id="family">
            <option value="철길마을1">철길마을1</option>
            <option value="철길마을2">철길마을2</option>
            <option value="철길마을3">철길마을3</option>
        </select>
    </div>
</footer>
<!-- //footer -->
/* footer */
#footer {
    width: 100%;
    display: flex;
    background-color: #efefef;
}
#footer .footer1 {
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#footer .footer1 h4 {
    font-size: 24px;
    color: #979797;
}
#footer .footer2 {
    width: calc(100% - 400px);
}
#footer .footer2 .footer2-1 {
    width: 100%;
    height: 60px;
    text-align: center;
}
#footer .footer2 .footer2-1 ul {
    padding-top: 10px;
}
#footer .footer2 .footer2-1 li {
    display: inline-block;
}
#footer .footer2 .footer2-1 li::after {
    content: '|';
}
#footer .footer2 .footer2-1 li:last-child:after {
    content: '';
}
#footer .footer2 .footer2-1 li a {
    padding: 10px;
    display: inline-block;
}
#footer .footer2 .footer2-1 li a:hover {
    text-decoration: underline;
}
#footer .footer2 .footer2-2 {
    width: 100%;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#footer .footer3 {
    width: 200px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#footer .footer3 select {
    width: 90%;
    height: 30px;
}

2-8. 팝업 작업하기

공지사항 첫번째 글에 popup-btn클래스를 추가하고 다음과 같이 팝업을 만들어서 숨겼놓겠습니다. 

<div class="popup-view">
    <h3>철길마을 공지사항</h3>
    <p>
        안녕하세요, 철길마을 주민 여러분!
        철길마을 축제 개최 안내드립니다
        참고 하시고 많은 참여 바랍니다. 
        감사합니다.
    </p>
    <a href="#" class="popup-close">닫기</a>
</div>
<!-- //popup -->

/* popup */
.popup-view {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background-color: #ffcbcb;
    border: 4px solid #ff6d6d;
    padding: 20px;
    display: none;
}
.popup-view h3 {
    font-size: 24px;
    margin-bottom: 15px;
    border-bottom: 2px solid #ff6d6d;
    color: #ff6d6d;
}
.popup-close {
    display: inline-block;
    padding: 8px 20px;
    background-color: #ff6d6d;
    color: #fff;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}

3. 스크립트 작업하기

3-1. 이미지 슬라이드 작업하기

이미지 슬라이드를 작업하겠습니다. 반응형으로 작업해야 하기 때문에 세부적인 부분은 CSS를 통해서 설정해야 합니다. 이미지를 복사하여 추가하는 형태이므로 전체 가로 값은 400%입니다. 이부분을 고쳐야 오류가 없습니다. 

$(function(){
    // 이미지 슬라이드
    let currentIndex = 0;
    $(".sliderWrap").append($(".slider").first().clone(true));

    setInterval(function(){
        currentIndex++;
        $(".sliderWrap").animate({marginLeft: -100 * currentIndex+"%"}, 600);

        if(currentIndex == 3){
            setTimeout(function(){
                $(".sliderWrap").animate({marginLeft: 0}, 0);
                currentIndex = 0;
            }, 600);
        }
    }, 3000);
});
#slider .sliderWrap {
    width: 400%;
}

3-2. 메뉴 작업하기

메뉴는 서브메뉴가 오른쪽으로 나오는 구조입니다. 이미 CSS는 처리가 되어 있기 때문에 해당되는 메뉴에 오버했을 때 해당 자식 메뉴가 나오는 구조입니다. 

// 메뉴
$(".nav > ul > li").mouseover(function(){
    $(this).find(".submenu").stop().slideDown();
});
$(".nav > ul > li").mouseout(function(){
    $(this).find(".submenu").stop().slideUp();
});

3-3. 팝업 작업하기

마지막 스크립트는 팝업입니다. 버튼을 클릭하면 숨겨놨던 팝업을 보여주고, 버튼을 클릭하면 다시 숨기는 구조입니다. 

$(".popup-btn").click(function(){
    $(".popup-view").show();
});
$(".popup-close").click(function(){
    $(".popup-view").hide ();
});

4. 마무리

제일 어렵게 느껴졌던 E유형도 마무리가 되었습니다. 지금까지 5개에 사이트를 만들어 봤습니다. 이 정도 연습했다면 시험을 충분히 합격할 수 있다고 생각합니다. 기타 궁금한 사항이나 질문이 있으면 댓글 부탁드립니다. 그동안 정말 수고하셨습니다. 감사합니다. 🫤🤕🤬🥺😬👻

완성 화면 완성 코드 미리보기 소스 다운로드

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

관련글

댓글

티스토리툴바