Tutorial/webd

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

by @webs 2023. 05. 01.

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

난이도 중급

소스 다운로드

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

소개

안녕하세요! 웹스토리보이입니다. 이번에는 C유형 연습니다. 샘플은 C-4 유형을 참고하시면 됩니다. 이번 레이아웃은 약간 옛날 스타일 레이아웃입니다. 이런 레이아웃을 아직까지 쓰고 잇는 회사가 있을까 싶은데.. 그래도 시험이니까 한번 만들어보죠! 고고 😫

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>Vallery Festival</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">
        <aside id="aside">
            <h1 class="logo"></h1>
            <nav class="nav"></nav>
        </aside>
        <!-- //asdile -->

        <main id="main">
            <article id="slider"></article>
            <section id="contents"></section>
            <footer id="footer"></footer>
        </main>
        <!-- //main -->
    </div>
</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%;
    vertical-align: top;
}

/* wrap */
#wrap {
    width: 1000px;
    display: flex;
}

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

/* main */
#main {
    width: 800px;
    height: 650px;
}

/* slider */
#slider {
    width: 800px;
    height: 350px;
    background-color: #d9d9d9;
}

/* contents */
#contents {
    width: 800px;
    height: 200px;
    background-color: #d1d1d1;
}

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

1-3. 각 섹션 작업하기

콘텐츠 영역과 푸터 영역을 작업하겠습니다. 콘텐츠 영역은 3개의 박스로 푸터 영역도 3개의 박스로 구성되어 있습니다. 해당 영역에 width와 height를 설정하고 백그라운드 색을 추가하였습니다.

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

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

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

/* wrap */
#wrap {
    width: 1000px;
    display: flex;
}

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

/* main */
#main {
    width: 800px;
    height: 650px;
}

/* slider */
#slider {
    width: 800px;
    height: 350px;
    background-color: #d9d9d9;
}

/* contents */
#contents {
    width: 800px;
    display: flex;
}

/* notice */
#contents .notice {
    width: 300px;
    height: 200px;
    background-color: #d1d1d1;
}

/* gallery */
#contents .gallery {
    width: 300px;
    height: 200px;
    background-color: #c7c7c7;
}

/* banner */
#contents .banner {
    width: 200px;
    height: 200px;
    background-color: #bcbcbc;
}

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

2. 각 섹션 작업하기

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

사이드 영역은 로고와 메뉴로 설정되어 있습니다. 메뉴는 서브메뉴가 있는 구조입니다.

<aside id="aside">
    <h1 class="logo">
        <a href="#">Vallery Festival</a>
    </h1>
    <nav class="nav">
        <ul>
            <li><a href="#">축제소개</a>
                <ul class="submenu">
                    <li><a href="#">Festival소개</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>
                    <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 -->

서브메뉴는 오른쪽에 나오는 구조이기 때문에 absolute를 통해 위치를 설정했습니다.

/* aside */
#aside {
    width: 200px;
    background-color: #ebe1ff;
}
#aside .logo {
    width: 200px;
    height: 100px;
    text-align: center;
}
#aside .logo a {
    display: inline-block;
    padding: 20px;
    font-size: 26px;
}
#aside .nav {
    width: 200px;
    height: 550px;
    position: relative;
    z-index: 1000;
}
#aside .nav > ul > li {
    position: relative;
}
#aside .nav > ul > li > a {
    display: inline-block;
    background-color: #58339e;
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}
#aside .nav > ul > li > a:hover {
    background-color: #7243c9;
}
#aside .nav > ul > li > ul {
    background-color: #fff;
    text-align: center;
    position: absolute;
    right: -200px;
    top: 0;
    width: 200px;
    display: none;
}
#aside .nav > ul > li > ul > li > a {
    padding: 10px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}
#aside .nav > ul > li > ul > li > a:hover {
    background-color: #8558d1;
    color: #fff;
}

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

이미지는 총 3장이 들어가며, 이미지마다 제목과 설명글을 적었습니다. 슬라이드 구조는 아래에서 위로 올라가는 구조입니다. 설명글은 이미지위에 올리는 방법을 적용하였습니다.

<article id="slider">
    <div class="sliderWrap">
        <div class="slider s1">
            <img src="images/slider01.jpg" alt="Vallery Festival1">
            <div class="text">
                <h2>Vallery <em>Festival</em></h2>
                <p>신나는 축제 놀아봅시다!</p>
            </div>
        </div>
        <div class="slider s2">
            <img src="images/slider02.jpg" alt="Vallery Festival1">
            <div class="text">
                <h2>Vallery <em>Festival</em></h2>
                <p>신나는 축제 놀아봅시다!</p>
            </div>
        </div>
        <div class="slider s3">
            <img src="images/slider03.jpg" alt="Vallery Festival1">
            <div class="text">
                <h2>Vallery <em>Festival</em></h2>
                <p>신나는 축제 놀아봅시다!</p>
            </div>
        </div>
    </div>
</article>
<!-- //slider -->

이미지는 따로 정렬할 필요는 없습니다. 글씨만 가운데로 오게 설정해주고, 이미지에 여백이 생겼는지만 확인하면 됩니다. 리셋 css에 설정을 했지만, 혹시 안했으면 이미지에는 vertical-align: top이 설정되어 있어야 여백이 없어집니다. 이 점 주의 바랍니다.

/* slider */
#slider {
    width: 800px;
    height: 350px;
    overflow: hidden;
}
#slider .sliderWrap {
    overflow: hidden;
}
#slider .sliderWrap .slider {
    position: relative;
    height: 350px;
}
#slider .sliderWrap .slider a {
    display: block;
}
#slider .sliderWrap .slider .text {
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.4);
    padding: 20px 40px;
}
#slider .sliderWrap .slider .text h2 {
    color: #fff;
    font-size: 40px;
}
#slider .sliderWrap .slider .text h2 em {
    color: #58339e;
    font-style: normal;
}
#slider .sliderWrap .slider .text p {
    color: #fff;
}

2-3. 게시판 작업하기

목록만 표현되어 있는 게시판 유형입니다. 목록 앞에는 블릿 기호가 표시되어 있습니다.

<article class="notice">
    <h3>Vallery Festival 공지사항</h3>
    <ul>
        <li><a href="#">주차장 안내 및 티켓 수령 장소</a></li>
        <li><a href="#">Vallery Festival 날짜 및 장소 안내</a></li>
        <li><a href="#">아티스트 라인 업 및 티켓팅 하는 방법</a></li>
        <li><a href="#">주의 사항 및 안내사항 참고 필수</a></li>
        <li><a href="#">Vallery Festival 사이트 업데이트 안내</a></li>
    </ul>
</article>
<!-- //notice -->

게시글 앞에 블릿기호가 있습니다. 보통은 li를 사용하면 자동으로 생기지만 우리는 reset에서 지웠습니다. 호환성을 맞추기 위해서 가상요소로 작업을 했습니다. 브라우저마다 블릿기호의 형태가 다르고 위치도 다르기 때문에 보통은 실무에서 이렇게 설정합니다. 기본 블릿 기호를 사용해도 되지만 저희는 가상요소를 설정하겠습니다. 어렵다고 느끼는 분들은 기본 블릿 기호를 사용하셔도 됩니다.

/* contents : notice */
#contents .notice {
    width: 300px;
    height: 200px;
    background-color: #f9ddff;
    padding: 20px;
    box-sizing: border-box;
}
#contents .notice h3 {
    margin-bottom: 10px;
}
#contents .notice li {
    line-height: 1.6;
    position: relative;
    padding-left: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#contents .notice li::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 8px;
}
#contents .notice li a:hover {
    text-decoration: underline;
}

2-4. 갤러리 작업하기

갤러리 형태의 유형입니다. 이미지는 3장이 들어가고 alt 속성도 작성해주어야 합니다.

<article class="gallery">
    <h3>Vallery Festival 현장 사진</h3>
    <ul>
        <li><a href="#"><img src="images/gallery01.jpg" alt="현장 사진1"></a></li>
        <li><a href="#"><img src="images/gallery02.jpg" alt="현장 사진2"></a></li>
        <li><a href="#"><img src="images/gallery03.jpg" alt="현장 사진3"></a></li>
    </ul>
</article>
<!-- //gallery -->

/* contents : gallery */
#contents .gallery {
    width: 300px;
    height: 200px;
    background-color: #e0bfff;
    padding: 20px;
    box-sizing: border-box;
}
#contents .gallery h3 {
    margin-bottom: 10px;
}
#contents .gallery ul {
    display: flex;
}
#contents .gallery li {
    margin-right: 10px;
}
#contents .gallery li img {
    width: 80px;
}
#contents .gallery li a {
    display: block;
}
#contents .gallery li a:hover img {
    opacity: 0.7;
}

2-5. 링크 작업하기

배너이미지는 백그라운드로 처리하고 a 태그로 버튼을 설정했습니다.

<article class="link">
    <h3>Vallery Festival</h3>
    <a href="#" class="popup-btn">티켓 구매</a>
</article>
<!-- //banner -->

/* contents : link */
#contents .link {
    width: 200px;
    height: 200px;
    background-image: url(../images/banner.jpg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
#contents .link h3 {
    color: #fff;
    font-size: 24px;
}
#contents .link a {
    background-color: #58339e;
    color: #fff;
    padding: 10px 20px;
    border-radius: 40px;
}
#contents .link a:hover {
    background-color: #6f2ceb;
}

2-6. 푸터 작업하기

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

<footer id="footer">
    <div class="footer1">
        <h4>Vallery Festival</h4>
    </div>
    <div class="footer2">
        주소 서울시 강남구 삼성로 100 삼성동빌딩 100층<br>
        COPYRIGHT(C) ALL RIGHTS RESERVED.
    </div>
    <div class="footer3">
        <select name="select" id="select">
            <option value="패밀리 사이트">패밀리 사이트</option>
            <option value="패밀리 사이트">패밀리 사이트</option>
            <option value="패밀리 사이트">패밀리 사이트</option>
            <option value="패밀리 사이트">패밀리 사이트</option>
        </select>
    </div>
</footer>
<!-- //footer -->

/* footer */
#footer {
    width: 800px;
    background-color: #ecb8fd;
    display: flex;
    align-items: center;
    height: 100px;
}
#footer .footer1 {
    width: 200px;
    text-align: center;
}
#footer .footer1 h4 {
    font-size: 20px;
    color: #7a7a7a;
}
#footer .footer2 {
    width: 400px;
}
#footer .footer3 {
    width: 200px;
}
#footer .footer3 select {
    width: 90%;
    height: 30px;
}

2-7. 팝업 작업하기

이번에 팝업 버튼은 링크 영역에 넣겠습니다. 시험지를 참고하시면 어디에 넣으라고 명시가 되어 있을 겁니다. 팝업 버튼에 popup-btn을 추가하겠습니다.

<article class="banner">
    <h3>Vallery Festival</h3>
    <a href="#" class="popup-btn">티켓 구매</a>
</article>
<!-- //banner -->

<div class="popup-view">
    <h3>Vallery Festival 2023 티켓 예매 일정 변경 안내</h3>
    <p>
        안녕하세요, Vallery Festival 운영팀입니다. 
        2023년 Vallery Festival 티켓 예매 일정에 변경이 있어 안내드립니다.
        기존 예매 일정에 따르면 6월 1일부터 6월 30일까지 티켓 예매가 가능하였으나, 
        운영상의 문제로 인해 일정이 변경되었습니다.
    </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: #d0aef0;
    padding: 20px;
    border: 4px solid #7243c9;
    display: none;
}
.popup-view h3 {
    font-size: 24px;
    margin-bottom: 10px;
}
.popup-close {
    display: inline-block;
    padding: 8px 20px;
    background-color: #7243c9;
    color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}

3. 스크립트 작업하기

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

스크립트에서 가장 어려운 이미지 슬라이드부터 시작해보겠습니다. 이미지 슬라이드를 못하면 바로 탈락이기 때문에 이것부터 신경써서 작업하겠습니다. 많이 해봤기 때문에 이제는 익숙할거라고 생각이 듭니다. 주석표시를 보면서 하나씩 해석해 보면 되겠습니다.

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

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

        if(currentIndex == 3){  //마지막 이미지가 됐을 때
            setTimeout(function(){  //한번만 실행
                $(".sliderWrap").animate({marginTop:0}, 0); //애니메이션을 정지
                currentIndex = 0;   //현재 이미지를 초기화
            }, 700);
        }
    }, 3000);
});

3-2. 메뉴 작업하기

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

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

#aside .nav {
    position: relative;
    z-index: 100;
}

3-3. 팝업 작업하기

마지막 스크립트는 팝업입니다. 여기도 어려운 부분은 없으니 살짝 보시면 되겠습니다.

// 팝업
$(".popup-btn").click(function(){   //팝업 버튼 클릭
    $(".popup-view").show();    //팝업 나타나기
});
$(".popup-close").click(function(){     //팝업 닫기 버튼 클릭
    $(".popup-view").hide ();   //팝업 숨기기
});

4. 마무리

C유형도 마무리가 되었습니다. 점점 시간이 단축이 되는지요? 전체적인 코딩에 시간이 많이 소요되고, 스크립트는 의외로 금방합니다. 중요한건 안되는 부분이 있을 때 그것을 스스로 해결하는 능력이 중요합니다. 그런 부분은 반복적으로 많이 하셔야 생기게 됩니다. 화이팅 😲

WEBSTORYBOY

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

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

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

소개

인덱스

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년 웹디자인 기능사 실전 사이트 연습3 - C유형

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

소개

인덱스

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 샘플

레이아웃

스크립트 유형

실전 사이트 유형

관련글

댓글

티스토리툴바

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