Tutorial/webd

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

by @webs 2023. 05. 01.

웹디자인 기능사 실전 사이트 : D유형

난이도 중급

소스 다운로드

완성 화면 완성 코드 미리보기 소스 다운로드 영상보기 디자인 보기

소개

안녕하세요! 웹스토리보이입니다. 이번에는 웹디자인 기능사 D-2 유형을 해보겠습니다. 천천히 잘 따라오세요!

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. 전체 레이아웃 잡기

전체적인 레이아웃은 3단 구조로 작업할 것이고, 사이드와 메인이 가로로 정렬하고, 하단은 푸터로 영역을 구성합니다.

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

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

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

@charset "UTF-8"를 설정하고 기본 색상은 #333으로 설정합니다. display: flex를 사용하여, 가로로 정렬하고, 해당 자식들의 값을 정확하게 작동할 수 있도록 flex-wrap: wrap을 추가하였습니다. 이렇게 하면 3단 구조가 완성됩니다.

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

/* wrap */
#wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

/* aside */
#aside {
    width: 200px;
    height: 650px;
    background-color: #efefef;
}

/* main */
#main {
    width: calc(100% - 200px);
    height: 650px;
    background-color: #e3e3e3;
}

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

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

사이드 영역은 로고와 메뉴로 구성되고 메인은 슬라이드와 콘텐츠로 구성됩니다. 슬라이드는 이미지와 배너 영역으로 다시 구성이 되고, 콘텐츠도 두개의 영역으로 설정합니다.

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

        <main id="main">
            <article id="slider">
                <div class="image"></div>
                <div class="banner"></div>
            </article>
            <!-- //article -->

            <section id="contents">
                <div class="notice"></div>
                <div class="gallery"></div>
            </section>
            <!-- //contents -->
        </main>
        <!-- //main -->

        <footer id="footer">
            <div class="footer1"></div>
            <div class="footer2"></div>
            <div class="footer3"></div>
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>

/* wrap */
#wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

/* aside */
#aside {
    width: 200px;
}
#aside .logo {
    width: 100%;
    height: 100px;
    background-color: #efefef;
}
#aside .nav {
    height: 550px;
    background-color: #e3e3e3;
}

/* main */
#main {
    width: calc(100% - 200px);
}

/* slider */
#slider {
    width: 100%;
    display: flex;
}
#slider .image {
    width: calc(100% - 230px);
    height: 400px;
    background-color: #d9d9d9;
}
#slider .banner {
    width: 230px;
    height: 400px;
    background-color: #d1d1d1;
}

/* contents */
#contents {
    width: 100%;
    display: flex;
}
#contents .notice {
    width: 50%;
    height: 250px;
    background-color: #c7c7c7;
}
#contents .gallery {
    width: 50%;
    height: 250px;
    background-color: #bcbcbc;
}

/* footer */
#footer {
    width: 100%;
    display: flex;
}
#footer .footer1 {
    width: 20%;
    height: 100px;
    background-color: #b1b1b1;
}
#footer .footer2 {
    width: 60%;
    height: 100px;
    background-color: #a3a3a3;
}
#footer .footer3 {
    width: 20%;
    height: 100px;
    background-color: #9d9d9d;
}

2. 각 섹션 작업하기

2-1. 사이드 영역 작업하기

사이드 영역은 로고와 메뉴로 구성되어 있습니다.

<aside id="aside">
    <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>
                </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>
    </nav>
</aside>
<!-- //aside -->

/* aside */
#aside {
    width: 200px;
    height: 650px;
}
#aside .logo {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#aside .logo a {
    display: block;
    font-size: 26px;
    margin-top: 5px;
}
#aside .nav {
    height: 550px;
}
#aside .nav > ul {
    margin: 5px;
}
#aside .nav > ul > li {
    margin-bottom: 5px;
}
#aside .nav > ul > li > a {
    padding: 10px;
    display: inline-block;
    background-color: #ffd139;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid #dead0c;
}
#aside .nav > ul > li > a:hover {
    text-decoration: underline;
}
#aside .nav > ul > li > ul {
    display: none;
}
#aside .nav > ul > li > ul > li a {
    display: block;
    padding: 10px;
    background-color: #ffebab;
    text-align: center;
    border-bottom: 2px solid #dead0c;
}
#aside .nav > ul > li > ul > li a:hover {
    background-color: #ffe281;;
}

2-2. 슬라이드 영역 작업하기

슬라이드 영역은 이미지와 배너 영역으로 나누어 집니다. 이미지 슬라이드는 위아래 움직이는 애니메이션으로 작업합니다.

<article id="slider">
    <div class="imageWrap">
        <div class="image i1">
            <div class="text">
                <h2>할인 가득, 설렘 가득!</h2>
                <p>대한민국 숙박세일 페스타’5월 30일(화),‘놀이공원 할인대전’5월 31일(수)부터 실시</p>
            </div>
        </div>
        <div class="image i2">
            <div class="text">
                <h2>할인 가득, 설렘 가득!</h2>
                <p>대한민국 숙박세일 페스타’5월 30일(화),‘놀이공원 할인대전’5월 31일(수)부터 실시</p>
            </div>
        </div>
        <div class="image i3">
            <div class="text">
                <h2>할인 가득, 설렘 가득!</h2>
                <p>대한민국 숙박세일 페스타’5월 30일(화),‘놀이공원 할인대전’5월 31일(수)부터 실시</p>
            </div>
        </div>
    </div>
    <!-- //imageWrap -->

    <div class="banner">
    </div>
    <!-- //banner -->
</article>
<!-- //article -->

/* slider : image */
#slider {
    width: 100%;
    display: flex;
    overflow: hidden;
}
#slider .imageWrap {
    width: calc(100% - 230px);
    height: 400px;
}
#slider .imageWrap .image {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: end;
}
#slider .imageWrap .image.i1 {
    background-image: url(../images/slider01.jpg);
}
#slider .imageWrap .image.i2 {
    background-image: url(../images/slider02.jpg);
}
#slider .imageWrap .image.i3 {
    background-image: url(../images/slider03.jpg);
}
#slider .imageWrap .image .text {
    background-color: #dead0c8f;
    width: 100%;
    padding: 20px;
}
#slider .imageWrap .image .text h2 {
    color: #fff;
    margin-bottom: 5px;
    font-size: 30px;
}
#slider .imageWrap .image .text p {
    color: #fff;
    font-size: 16px;
}

2-3. 배너 영역 작업하기

슬라이드 영역의 배너 영역을 작업하겠습니다.

<div class="banner">
    <h3>6월은 <em>여행가는 달</em></h3>
    <a href="#">알아보기</a>
</div>
<!-- //banner -->

/* slider : banner */
#slider .banner {
    width: 230px;
    height: 400px;
    background-image: url(../images/banner.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 10px solid #ffd139;
    box-sizing: border-box;
    transition: all 0.3s;
}
#slider .banner:hover {
    border: 5px solid #ffd139;
}
#slider .banner h3 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 20px;
}
#slider .banner h3 em {
    color: #ffd139;
    font-style: normal;
    display: block
}
#slider .banner a {
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
}

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

반응형 게시판 유형입니다. 반응형을 신경써야 하기 때문에 가로 값이 줄어들면, 한줄 효과를 넣어줘서 끝 부분을 '...'으로 설정하겠습니다.

<div class="notice">
    <h3>공지사항</h3>
    <ul>
        <li><a href="#">2023 관광산업 디지털혁신 오픈세미나 개최</a><span>2023.05.02</span></li>
        <li><a href="#">여행 지원금 혜택 - 광주 여행 특별하게 떠나보자!</a><span>2023.04.02</span></li>
        <li><a href="#">숙박과 놀이공원 할인쿠폰 받자!</a><span>2023.04.02</span></li>
        <li><a href="#">조선시대 의궤를 실감 콘텐츠로 만나다.</a><span>2023.04.01</span></li>
        <li><a href="#">경복궁 장고에서 만나는 특별한 궁중의 장</a><span>2023.04.01</span></li>
    </ul>
    <a href="#" class="more">더보기+</a>
</div>
<!-- //notice -->

/* contents : notice */
#contents .notice {
    width: 50%;
    height: 250px;
    padding: 30px;
    box-sizing: border-box;
    background-color: #fff6d6;
    position: relative;
}
#contents .notice h3 {
    font-size: 26px;
    margin-bottom: 10px;
}
#contents .notice li {
    display: flex;
    line-height: 1.7;
    position: relative;
    padding-left: 16px;
}
#contents .notice li::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #a58109;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 8px;
}
#contents .notice li a {
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#contents .notice li a:hover {
    text-decoration: underline;
}
#contents .notice li span {
    width: 25%;
    text-align: right;
}
#contents .notice .more {
    position: absolute;
    right: 30px;
    top: 30px;
}
#contents .notice .more:hover {
    text-decoration: underline;
}

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

갤러리 영역은 3개의 이미지와 제목으로 구성하였습니다. 반응형을 처리하려면 이미지를 백그라운드로 넣어야겠지만, 어렵게 코딩하는 것 보단 간단하게 구성하기 위해서 가로 값을 설정하고 구조가 깨지지 않을 정도로 설정했습니다.

<div class="gallery">
    <h3>갤러리</h3>
    <ul>
        <li>
            <a href="#">
                <img src="images/gallery01.jpg" alt="가볼만한 곳">
                <span>동대문</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/gallery02.jpg" alt="가볼만한 곳">
                <span>제주도</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/gallery03.jpg" alt="가볼만한 곳">
                <span>경동시장</span>
            </a>
        </li>
    </ul>
</div>
<!-- //gallery -->

/* contents : gallery */
#contents .gallery {
    width: 50%;
    height: 250px;
    padding: 30px;
    box-sizing: border-box;
}
#contents .gallery h3 {
    font-size: 26px;
    margin-bottom: 10px;
}
#contents .gallery ul {
    display: flex;
}
#contents .gallery li {
    width: 120px;
    margin-right: 10px;
}
#contents .gallery li a {
    display: block;
}
#contents .gallery li a span {
    padding: 10px 0;
    display: inline-block;
}
#contents .gallery li a span:hover {
    text-decoration: underline;
}

2-6. 푸터 영역 작업하기

푸터 영역은 3개의 박스로 구성되어 있습니다.

<footer id="footer">
    <div class="footer1">
        <h4>서울구석구석</h4>
    </div>
    <div class="footer2">
        26464 강원도 원주시 세계로 10 TEL : 003-738-3000 <br>
        궁금한 정보는 to@korea.com으로 문의주세요.
    </div>
    <div class="footer3">
        <select name="#" id="#">
            <option>관련사이트</option>
            <option value="1">국가 여행 사이트</option>
            <option value="2">제주도 여행 사이트</option>
            <option value="3">경주 여행 사이트</option>
        </select>
    </div>
</footer>
<!-- //footer -->

/* footer */
#footer {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    background-color: #fffbea;
}
#footer .footer1 {
    width: 200px;
    display: flex;
    align-items: center;    
    justify-content: center;
}
#footer .footer1 h4 {
    font-size: 20px;
    color: #858585;
}
#footer .footer2 {
    width: calc(100% - 430px);
    line-height: 1.5;
}
#footer .footer3 {
    width: 230px;
}
#footer .footer3 select {
    width: 90%;
    height: 30px;
}

2-7. 팝업 작업하기

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

<div class="popup-view">
    <h3>서울구석구석 공지사항</h3>
    <p>
        안녕하세요! 서울구석구석 운영팀입니다. 여러분들에게 소식을 전해드릴 공지사항을 안내해드립니다.
        서울구석구석에서는 다양한 이벤트를 진행하고 있습니다. 
        현재는 서울의 명소 중 하나를 방문하여 사진을 찍고, 
        SNS에 게시하는 이벤트가 진행 중입니다. 
        참여하신 분들 중 추첨을 통해 푸짐한 상품을 드립니다
    </p>
    <a href="#" class="popup-close">닫기</a>
</div>
<!-- //popup -->

팝업의 기준점을 wrap으로 하기 위해서 position: relative을 추가하였습니다.

/* wrap */
#wrap {
    position: relative;
}

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

3. 스크립트 작업하기

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

이미지 슬라이드를 작업하겠습니다. 반응형이긴 하지만 높이 값은 400px로 지정이 되어 있기 때문에 margin-top값을 -400px로 설정하였습니다.

$(function(){
    // 이미지 슬라이드
    let currentIndex = 0; //현재 이미지 설정 
    $(".imageWrap").append($(".image").first().clone(true));    //첫 번째 이미지를 복사해서 마지막에 추가

    setInterval(() => { //3초에 한번씩 실행
        currentIndex++;     //현재 이미지를 1씩 증가
        $(".imageWrap").animate({marginTop: -400 * currentIndex+"px"}, 600);

        if(currentIndex == 3){  //마지막 이미지
            setTimeout(() => {  
                $(".imageWrap").animate({marginTop: 0}, 0);     //애니메이션을 정지
                currentIndex = 0;   //현재 이미지 초기화
            }, 600);
        }
    }, 3000);
});

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. 마무리

D유형도 마무리가 되었습니다. 전체적인 디자인을 노란색 계열로 작업을 하였습니다. 주색과 보조색을 정하는 것은 주제와 맞게 또는 이미지와 맞게 설정하는 것이 가장 좋습니다. 시험장에서 주어진 이미지에 따라 주색이 변경될 수 있습니다. 수고하셨습니다.

WEBSTORYBOY

재능은!
노력 끝에서 발견된다

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

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

소개

인덱스

1. 구조 잡기

1-1. 준비하기

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

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

2. 각 섹션 작업하기

2-1. 사이드 영역 작업하기

2-2. 슬라이드 영역 작업하기

2-3. 배너 영역 작업하기

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

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

2-6. 푸터 영역 작업하기

2-7. 팝업 작업하기

3. 스크립트 작업하기

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

3-2. 메뉴 작업하기

3-3. 팝업 작업하기

4. 마무리

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

댓글

티스토리툴바

재능은!노력 끝에서 발견된다

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

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

소개

인덱스

1. 구조 잡기

1-1. 준비하기

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

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

2. 각 섹션 작업하기

2-1. 사이드 영역 작업하기

2-2. 슬라이드 영역 작업하기

2-3. 배너 영역 작업하기

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

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

2-6. 푸터 영역 작업하기

2-7. 팝업 작업하기

3. 스크립트 작업하기

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

3-2. 메뉴 작업하기

3-3. 팝업 작업하기

4. 마무리

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

관련글

댓글

티스토리툴바

재능은!
노력 끝에서 발견된다