Tutorial/webd

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

by @webs 2023. 05. 01.

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

난이도 중급

소스 다운로드

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

소개

안녕하세요! 웹스토리보이입니다. 이번에는 B유형에서 하나 해보겠습니다. B유형도 업데이트 되기 전이랑 같은 유형이지만 전체 메뉴가 생긴것이 다릅니다. 그부분만 신경쓰면 다른 부분은 동일합니다. 너무 어렵지 않으니 포기하지 말고 끝까지 완수하길 바랍니다. 😵‍💫

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

전체 적인 구조는 header, slider, contents, footer로 구성합니다. 전체 영역과 가운데 영역이 나누어지 구조이기 때문에 container도 가운데 오도록 설정합니다.

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

        <aside id="slider">
            <div class="container"></div>
        </aside>
        <!-- //slider -->

        <main id="contents">
            <div class="container"></div>
        </main>
        <!-- //main -->

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

@charset "UTF-8";를 설정한 후 기본 리셋 CSS를 설정합니다. 기본 컬러는 color: #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: 100%;
}

/* container */
.container {
    width: 1200px;
    margin: 0 auto;
    height: inherit;
    background-color: rgba(0,0,0,0.3);
}

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

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

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

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

1-3. 각 섹션 작업하기

헤더 영역은 로고와 네비게이션, 콘텐츠 영역은 게시판, 갤러리, 배너, 푸터 영역은 두개의 영역으로 작업했습니다. 기존과 다른 점은 container안에 들어가 있습니다. 가운데 영역을 설정하기 위함입니다.

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

        <aside id="slider">
            <div class="container"></div>
        </aside>
        <!-- //slider -->

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

        <footer id="footer">  
            <div class="container">
                <div class="footer1">
                    <div class="footer1-1"></div>
                    <div class="footer1-2"></div>
                </div>
                <div class="footer2"></div>
            </div>
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>

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

/* container */
.container {
    width: 1200px;
    margin: 0 auto;
    height: inherit;
    background-color: rgba(0,0,0,0.3);
}

/* header */
#header {
    width: 100%;
    background-color: #efefef;
}
#header .container {
    display: flex;
}
#header .container .logo {
    width: 20%;
    height: 100px;
    background-color: #e3e3e3;
}
#header .container .nav {
    width: 80%;
    height: 100px;
    background-color: #d9d9d9;
}

/* slider */
#slider {
    width: 100%;
    height: 300px;
}

/* contents */
#contents {
    width: 100%;
}
#contents .container {
    display: flex;
}
#contents .container .notice {
    width: 400px;
    height: 200px;
    background-color: #d1d1d1;
}
#contents .container .gallery {
    width: 400px;
    height: 200px;
    background-color: #c7c7c7;
}
#contents .container .banner {
    width: 400px;
    height: 200px;
    background-color: #bcbcbc;
}

/* footer */
#footer {
    width: 100%;
    background-color: #b1b1b1;
}
#footer .container {
    display: flex;
}
#footer .container .footer1 {
    width: 80%;
}
#footer .container .footer1 .footer1-1 {
    width: 100%;
    height: 50px;
    background-color: #a3a3a3;
}
#footer .container .footer1 .footer1-2 {
    width: 100%;
    height: 50px;
    background-color: #9d9d9d;
}
#footer .container .footer2 {
    width: 20%;
    height: 100px;
    background-color: #888888;
}

2. 각 섹션 작업하기

2-1. 헤더 작업하기

헤더 영역은 로고와 메뉴로 설정되어 있습니다. 메뉴로 2단 구조로 되어 있습니다. li안에 li가 있는 구조입니다.

<header id="header">
    <div class="container">
        <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>
                    </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>
    </div>
</header>
<!-- //header -->

메뉴를 오른쪽으로 정렬하고, 오버 효과를 설정했습니다. 틀만 잡고 디테일한 부분은 스크립트 영역에서 마무리 하겠습니다.

/* header */
#header {
    width: 100%;
    background-color: #f3f3f3;
}
#header .container {
    display: flex;
    align-items: end;
    position: relative;
}
#header .container .logo {
    width: 20%;
}
#header .container .logo a {
    display: flex;
    padding: 30px 0;
}
#header .container .nav {
    width: 80%;
}
#header .container .nav > ul {
    display: flex;
    justify-content: right;
}
#header .container .nav > ul > li {
    position: relative;
}
#header .container .nav > ul > li > a {
    display: block;
    padding: 15px 40px;
    font-weight: bold;
    /* background-color: #ccc; */
}
#header .container .nav > ul > li > a:hover {
    background-color: #ffe39c;
}
#header .container .nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 50px;
    width: 100%;
    display: none;
}
#header .container .nav > ul > li > ul > li > a {
    padding: 10px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    color: #fff;
}
#header .container .nav > ul > li > ul > li > a:hover {
    background-color: #ffe090;
    color: #000;
}

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

이미지는 총 3장이 들어가며, 이미지마다 제목과 설명글을 적었습니다. 이번 이미지 슬라우드는 좌우로 움직이는 슬라이기 때문에 이미지를 가로로 정렬해야 합니다. 텍스트는 이미지 슬라이드 왼쪽으로 나오도록 설정했습니다.

<aside id="slider">
    <div class="container">
        <div class="sliderWrap">
            <div class="slider s1">
                <img src="images/slider01.jpg" alt="미래를 이끄는 열정">
                <div class="text">
                    <h2>미래를 이끄는 <strong>열정</strong></h2>
                    <p>산업대학교</p>
                </div>
            </div>
            <div class="slider s2">
                <img src="images/slider02.jpg" alt="당신이 원하는 교육">
                <div class="text">
                    <h2>당신이 원하는 <strong>교육</strong></h2>
                    <p>산업대학교</p>
                </div>
            </div>
            <div class="slider s3">
                <img src="images/slider03.jpg" alt="미래를 향한 우리의 도전">
                <div class="text">
                    <h2>미래를 향한 우리의 <strong>도전</strong></h2>
                    <p>산업대학교</p>
                </div>
            </div>
        </div>
    </div>
</aside>
<!-- //slider -->

이미지를 가로로 정렬하기 위해 display: flex를 사용하고 전체 가로 값을 width: 300%;로 설정했습니다. 스크립트에 이미지를 하나 더 만들기 때문에 그때는 400%로 변경할 것입니다. 이미지 안에 텍스트는 position: absolute;를 통해 설정합니다.

/* slider */
#slider {
    width: 100%;
    height: 300px;
}
#slider .container {
    overflow: hidden;
}
#slider .sliderWrap {
    display: flex;
    width: 300%;
}
#slider .sliderWrap .slider {
    position: relative;
    width: 1200px;
}
#slider .sliderWrap .slider a {
    display: block;
}
#slider .sliderWrap .slider .text {
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,.4);
    padding: 20px 50px;
}
#slider .sliderWrap .slider .text h2 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 3px;
}
#slider .sliderWrap .slider .text h2 strong {
    color: orange;
}
#slider .sliderWrap .slider .text p {
    color: #fff;
    font-size: 18px;
}

2-3. 게시판 작업하기

이번에는 탭 메뉴가 아닌 게시판만 보이는 유형입니다. 시멘틱 태그를 사용했으니 제목을 설정해야 합니다. 게시판은 제목과 날짜가 분리되어 있어야 합니다. 그래서 a태그와 span 태그로 설정했습니다.

<section class="notice">
    <h3>산업대학교 새로운 소식</h3>
    <ul>
        <li><a href="#">2023년 신입생 모집중</a><span>2023.05.01</span></li>
        <li><a href="#">융합 전공 멘토링 및 튜터링 학생 모집</a><span>2023.05.02</span></li>
        <li><a href="#">학과 및 학년별 장기자랑 대회</a><span>2023.05.03</span></li>
        <li><a href="#">미래 직업 워크숍 및 박람회</a><span>2023.05.04</span></li>
    </ul>
</section>
<!-- //notice -->

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

/* contents : notice */
#contents .container .notice {
    width: 400px;
    height: 200px;
    padding: 25px 20px;
    background-color: #fff4e0;
    box-sizing: border-box;
}
#contents .container .notice h3 {
    font-size: 24px;
    margin-bottom: 10px;
}
#contents .container .notice li {
    display: flex;
    line-height: 1.8;
    position: relative;
    padding-left: 14px;
}
#contents .container .notice li::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: #333;
    position: absolute;
    left: 0;
    top: 11px;
    border-radius: 50%;
}
#contents .container .notice li a {
    width: 70%;
}
#contents .container .notice li a:hover {
    text-decoration: underline;
}
#contents .container .notice li span {
    width: 30%;
    text-align: right;
}

2-4. 갤러리 작업하기

갤러리 부분은 이미지가 3장이 들어갑니다. 이미지에 width: 114px;을 설정하고 부모 박스에 justify-content: space-between;를 설정하면 여백이 자동으로 맞추어집니다. 오버효과를 주기 위해서 살짝 투명도를 주었습니다.

<section class="gallery">
    <h3>우리학교 풍경</h3>
    <ul>
        <li><a href="#"><img src="images/gallery01.jpg" alt="우리학교 강의실"></a></li>
        <li><a href="#"><img src="images/gallery02.jpg" alt="우리학교 도서관"></a></li>
        <li><a href="#"><img src="images/gallery03.jpg" alt="우리학교 정문 뷰"></a></li>
    </ul>
</section>
<!-- //gallery -->

/* contents : gallery */
#contents .container .gallery {
    width: 400px;
    height: 200px;
    padding: 25px 20px;
    box-sizing: border-box;
}
#contents .container .gallery h3 {
    font-size: 24px;
    margin-bottom: 10px;
}
#contents .container .gallery ul {
    display: flex;
    justify-content: space-between;
}
#contents .container .gallery ul li {
    width: 114px;
}
#contents .container .gallery li a {
    display: block;
}
#contents .container .gallery li a:hover img {
    opacity: 0.8;
}

2-5. 배너 작업하기

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

<section class="banner">
    <h3>산업대학교<br>2023<br>체육대전</h3>
    <a href="#">바로가기</a>
</section>
<!-- //banner -->

/* contents : banner */
#contents .container .banner {
    width: 400px;
    background-image: url(../images/banner.jpg);
    text-align: center;
}
#contents .container .banner h3 {
    padding-top: 40px;
    font-size: 24px;
    color: #fff;
}
#contents .container .banner a {
    background-color: orange;
    color: #fff;
    padding: 10px 30px;
    display: inline-block;
    border-radius: 40px;
    transition: all 0.3s;
    margin-top: 3px;
}
#contents .container .banner a:hover {
    border-radius: 0;
}

2-6. 푸터 작업하기

푸터 영역은 두개의 영역으로 나뉘고, 하위 메뉴와 카피라이터 및 패밀리 사이트를 설정하면 됩니다.

<footer id="footer">  
    <div class="container">
        <div class="footer1">
            <div class="footer1-1">
                <ul>
                    <li><a href="#">개인정보처리방침</a></li>
                    <li><a href="#">정보 공개</a></li>
                    <li><a href="#">홍페이지 운영지침</a></li>
                </ul>
            </div>
            <div class="footer1-2">
                15073 경기도 안산시 산기대학로 237 (정왕동) 산업대학교 COPYRIGHT(C) ALL RIGHTS RESERVED.
            </div>
        </div>
        <div class="footer2">
            <select name="#" id="#">
                <option>패밀리 사이트</option>
                <option value="1">안양 산업대학교</option>
                <option value="2">강원 산업대학교</option>
                <option value="3">부산 산업대학교</option>
            </select>
        </div>
    </div>
</footer>
<!-- //footer -->

/* footer */
#footer {
    width: 100%;
    background-color: #e5e5e5;
}
#footer .container {
    display: flex;
}
#footer .container .footer1 {
    width: 80%;
}
#footer .container .footer1 .footer1-1 {
    width: 100%;
    height: 50px;
}
#footer .container .footer1 .footer1-1 li {
    display: inline;
    border-right: 1px solid #333;
}
#footer .container .footer1 .footer1-1 li:last-child {
    border: 0;
}
#footer .container .footer1 .footer1-1 li a {
    padding: 18px 10px 16px 0px;
    display: inline-block;
}
#footer .container .footer1 .footer1-1 li a:hover {
    text-decoration: underline;
}
#footer .container .footer1 .footer1-2 {
    width: 100%;
    height: 50px;
    padding-top: 15px;
    box-sizing: border-box;
}
#footer .container .footer2 {
    width: 20%;
}
#footer .container .footer2 select {
    margin-top: 34px;
    width: 100%;
    height: 30px;
}

2-7. 팝업 작업하기

게시판 첫번째 글에 popup-btn 클래스를 넣어주고, 팝업 소스는 wrap 태그 제일 마지막에 넣어주었습니다. 나머지는 스크립트에서 처리하겠습니다.

 <section class="notice">
    <h3>산업대학교 새로운 소식</h3>
    <ul>
        <li class="popup-btn"><a href="#">2023년 신입생 모집중</a><span>2023.05.01</span></li>
        <li><a href="#">융합 전공 멘토링 및 튜터링 학생 모집</a><span>2023.05.02</span></li>
        <li><a href="#">학과 및 학년별 장기자랑 대회</a><span>2023.05.03</span></li>
        <li><a href="#">미래 직업 워크숍 및 박람회</a><span>2023.05.04</span></li>
    </ul>
</section>

<div class="popup-view">
    <h3>산업대학교 공지사항</h3>
    <p>
        2023년도 1학기  일정 변경 안내
        안녕하세요, 산업대학교 교무처입니다. 2023년도 1학기 수업 일정에 변경이 있어 안내드립니다.
        기존 수업 일정에 따르면 3월 2일부터 6월 16일까지 총 15주 동안 수업이 진행되었으나, 교내 사정으로 인해 수업 일정이 변경되었습니다.
        참고해주세요!
    </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: #FFE4B5;
    border: 4px solid orange;
    padding: 20px;
    /* display: none; */
}
.popup-view h3 {
    font-size: 24px;
    margin-bottom: 15px;
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}
.popup-view a {
    display: inline-block;
    padding: 8px 20px;
    color: #fff;
    background-color: orange;
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%);
}

3. 스크립트 작업하기

코딩이 완료가 되었으니 스크립트를 해볼까요?

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

외부 페이지로 연동했기 때문에 $(function(){})를 처리해주고 작업하시면 됩니다. 이미지는 가로로 정렬해놨기 때문에 이미지의 부모 $(".sliderWrap")을 움직이게 작업하면 됩니다. 이미지의 가로값이 1200px이기 때문에 1200으로 설정했지만 100%로도 가능합니다. 나중에 반응형에서는 퍼센트로 작업할거예요! 이미지를 움직이게 작업하고 마지막 사진에 왔을 때, 순간 애니메이션을 정지하고, 이미지를 초기화하면 무한 반복이 됩니다. 이미지를 자연스럽게 연출하기 위해서 이미지를 복사하여 끝에 추가하였습니다. 그래서 CSS에 width: 400%;으로 설정해야 합니다.

$(function(){
    //이미지 슬라이드
    let currentIndex = 0;   
    $(".sliderWrap").append($(".slider").first().clone(true));   
 
    setInterval(function(){
        currentIndex++;    
        $(".sliderWrap").animate({marginLeft: -1200 * currentIndex}, 600);

        if(currentIndex == 3){
            setTimeout(function(){
                $(".sliderWrap").animate({ marginLeft: 0},0);
                currentIndex = 0;
            }, 700);
        }
    }, 3000)
});

#slider .sliderWrap {
    display: flex;
    width: 400%;
}

3-2. 메뉴 작업하기

이번 메뉴는 전체 영역이 나오는 메뉴를 설정하겠습니다. 서브메뉴가 나오는 것은 동일하지만, 전체 배경이 나올 수 있도록 header에 설정해야 합니다. 그리고 클래스를 추가하는 코드를 작성하면 됩니다. 헤더 영역이 슬라이드 영역에 가려서 안나올 수도 있습니다. 그때는 z-index를 설정하면 됩니다. 대신 z-index는 position: relative와 같이 사용합니다. 그리고 전체 배경이 나오는 CSS를 추가하면 됩니다. 그리고 ul의 배경을 삭제하면 자연스럽게 연출할 수 있습니다.

$(".nav > ul > li").mouseover(function(){
    $(".nav > ul > li > ul").stop().fadeIn(400);
    $("#header .container").addClass("on");
});
$(".nav > ul > li").mouseout(function(){
    $(".nav > ul > li > ul").stop().fadeOut(100);
    $("#header .container").removeClass("on");
});

#header {
    position: relative;
    z-index: 1000;  /* 메뉴 위로 올라오게 */
}
/* 메뉴 전체 배경 */
#header .container::after {
    content: '';
    width: 100%;
    height: 0px;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    left: 0; 
    top: 99px;
    z-index: -1;
    transition: all 400ms;
}
#header .container.on::after {
    height: 160px;
}

3-3. 팝업 작업하기

마지막으로 팝업만 하면 됩니다. 이 부분은 이제 여러분들도 그냥 해석이 될거라고 생각이 듭니다.

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

4. 마무리

B유형도 마무리가 되었습니다. 어떻게 잘 따라하셨는지요? 궁금하네요! 댓글 부탁드립니다. 이번 유형도 어려울 수 있지만, 반복 연습하시면 쉽다고 느낄 수 있을거예요! 스크립트에서 실수가 없으려면 HTML 코딩을 잘하셔야. 스크립트에서도 당황하지 않습니다. 학생들이 스크립트에서 많이 당황에서 떨어지는 경우가 많더라구요! 생각보다 괜찮은게 스크립트 소스를 보면 30줄은 넘지 않는 것 같습니다. 10번만 써도 자동으로 외워질것 같습니다. 모르겠으면 외우세요! 그럼 이해가 점점 됩니다. 그리고 포토샵과 관련된 부분은 정리되지 않은 점 양해바랍니다. 그럼 오늘도 수고하셨습니다. 😫

WEBSTORYBOY

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

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

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

소개

인덱스

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

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

소개

인덱스

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

레이아웃

스크립트 유형

실전 사이트 유형

관련글

댓글

티스토리툴바

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