Tutorial/webd

2023년 웹디자인 기능사 메뉴 : M-1

by @webs 2023. 05. 01.

웹디자인 기능사 메뉴 유형 : M-1

난이도 중급

소스 다운로드

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

소개

안녕하세요! 웹스토리보이입니다. 이번에는 웹디기의 하이라이트 스크립트 유형입니다. 코딩을 처음 해본 분들은 가장 어렵게 느낄 수 있는 부분인데요! 저도 처음엔 어떻게 하면 스크립트를 가장 짧고, 간단하게 외울 수 있을까 고민을 많이 했는데요! '중요한건 실무에서 어떻게 활용할 수 있을까?'가 가장 중요하지 않을까 싶습니다. 그래서 소스를 짧고 간단하게 구현하는 것보단, 논리적인 순서에 맞게, 흐름에 맞게 코드를 이해하기 쉽게 만드는 것이 가장 중요하다고 생각합니다. 그래서 소스가 조금 길 수는 있지만, 흐름에 맞게 이해하기 쉽도록 작성하였습니다. 단순하게 외우기보다는 이해하면서 외우면, 시험장에서도 까먹는 일이 줄어들지 않을까 싶습니다. 웹디기의 스크립트는 메뉴, 슬라이드, 탭 메뉴, 팝업이 나옵니다. 그 중 가장 간단한 메뉴 유형부터 시작하겠습니다. 메뉴 유형은 가로 레이아웃에서 쓰는 메뉴, 세로 레이아웃에서 쓰는 메뉴 유형을 나눌 수 있으며, 코드는 동일하기 때문에 쉽게 따라할 수 있는 스크립트입니다.

현재 웹디기는 실무에서 사용하는 코딩보다 많이 뒤쳐져 있는 상태이긴 합니다. 실무에서는 정적인 사이트보다는 동적인 패럴랙스 사이트나 애니메이션이 많습니다. 하지만 웹디기에서 그런 부분까지 테스트하기에는 많이 힘들거라고 생각이 듭니다. 최대한 실무에서 도움이 될 수 있는 코딩을 하는 것이 자격증을 따는 의미가 있다는 생각에 스크립트는 두가지 버전으로 준비했습니다. 웹디기는 제이쿼리를 통해 스크립트를 작성합니다. 실무에서도 제이쿼리를 통해 새로운 사이트를 만들진 않을 것입니다. 하지만 기존에 만들어져 있는 사이트들이 제이쿼리로 대부분 만들어져 있기 때문에 제이쿼리를 안할 순 없습니다. 시간이 흐르면 제이쿼리 사용률은 많이 낮아 질 것이고 그 자리를 자바스크립트가 차지하게 될 것입니다. 지금도 그러고 있구요! 그래서 제이쿼리와 자바스크립트 두 버전으로 스크립트 설명이 이루어지고, 편한걸로 작업하시면 됩니다. 만약 제이쿼리를 처음해본다면 그냥 자바스크립트로 작업하는게 실무에서 더 도움이 되지 않을까 쉽습니다. 물론 어떤걸 해도 거기서 거기이기 때문에 크게 상관은 없습니다.

잔소리가 많았네요^^ 😇 그럼 이제 스크립트 시작해볼까요!

1. 구조 잡기

미리보기 화면을 확인해 보시면 메뉴에 마우스를 오버하면 서브 메뉴가 나오는 구조입니다. 우선 이 유형을 만들어 보기 전에 A-1 레이아웃 유형의 소스를 가져와서 메뉴 위치와 CSS를 먼저 작업하겠습니다. 스크립트를 작업하기 전에 CSS를 먼저 셋팅하는 것이 가장 중요합니다. 레이아웃을 공부를 하지 않았다면 레이아웃 유형을 꼭 공부하고 오셔야 합니다.

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

        <div id="slider">
        </div>
        <!-- //slider -->

        <div id="contents">
            <div class="content1"></div>
            <div class="content2"></div>
            <div class="content3"></div>
        </div>
        <!-- //contents -->

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

* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000;
}
#wrap {
    width: 1200px;
    margin: 0 auto;
}
#header {
    width: 100%;
    display: flex;
}
#header .logo {
    width: 20%;
    height: 100px;
    background-color: #efefef;
}
#header .nav {
    width: 80%;
    background-color: #e3e3e3;
}
#slider {
    width: 100%;
    height: 300px;
    background-color: #d9d9d9;
}
#contents {
    width: 100%;
    display: flex;
}
#contents .content1 {
    width: 33.3333%;
    height: 200px;
    background-color: #d1d1d1;
}
#contents .content2 {
    width: 33.3333%;
    height: 200px;
    background-color: #c7c7c7;
}
#contents .content3 {
    width: 33.3333%;
    height: 200px;
    background-color: #bcbcbc;
}
#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;
}

여기까지 셋팅이 완료되었다면, 메뉴 레이아웃을 작업해보겠습니다. 메뉴 레이아웃은 li안에 li가 들어간 구조입니다. 이렇게 작업하면 구조가 깨지기 때문에 두번째 ul은 position: absolute를 이용하여 절대적인 위치값을 설정하였고, 부모 박스 li 속성에 position: relative;를 설정하였습니다. 또한 li 안에 li가 있는 구조이기 때문에 >를 사용하여 바로 밑에 있는 자식만 선택하도록 설정하였습니다. 만약 >가 없다면 자식에 자식도 선택이 되어서 코드를 짜는데 불편하기 때문에 >를 설정하였습니다.

<nav class="nav">
    <ul>
        <li>
            <a href="#">메뉴1</a>
            <ul class="submenu">
                <li><a href="#">서브메뉴1-1</a></li>
                <li><a href="#">서브메뉴1-2</a></li>
                <li><a href="#">서브메뉴1-3</a></li>
                <li><a href="#">서브메뉴1-4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">메뉴2</a>
            <ul class="submenu">
                <li><a href="#">서브메뉴2-1</a></li>
                <li><a href="#">서브메뉴2-2</a></li>
                <li><a href="#">서브메뉴2-3</a></li>
                <li><a href="#">서브메뉴2-4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">메뉴3</a>
            <ul class="submenu">
                <li><a href="#">서브메뉴3-1</a></li>
                <li><a href="#">서브메뉴3-2</a></li>
                <li><a href="#">서브메뉴3-3</a></li>
                <li><a href="#">서브메뉴3-4</a></li>
            </ul>
        </li>
        <li>
            <a href="#">메뉴4</a>
            <ul class="submenu">
                <li><a href="#">서브메뉴4-1</a></li>
                <li><a href="#">서브메뉴4-2</a></li>
                <li><a href="#">서브메뉴4-3</a></li>
                <li><a href="#">서브메뉴4-4</a></li>
            </ul>
        </li>
    </ul>
</nav>

/* nav */
.nav > ul {
    display: flex;
    justify-content: right;
    margin-top: 30px;
}
.nav > ul > li {
    position: relative;
}
.nav > ul > li > a {
    display: inline-block;
    padding: 10px 50px;
    background-color: #b0b0b0;
}
.nav > ul > li > a:hover {
    background-color: #696969;
}
.nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 38px;
    background-color: #c7c7c7;
    width: 100%;
    text-align: center;
    display: none;
}
.nav > ul > li > ul > li > a {
    display: inline-block;
    padding: 10px;
    background-color: #c1c1c1;
    width: 100%;
    box-sizing: border-box;
}
.nav > ul > li > ul > li > a:hover {
    background-color: #8f8f8f;
}

2. 스크립트 작업 : 제이쿼리

제이쿼리를 작업하기 전에는 반드시 필요한 것이 있습니다. 제이쿼리는 자바스크립트로 만들었습니다. 브라우저에서는 자바스크립트만 작동되기 때문에 자바스크립트를 이용하여 제이쿼리를 만든 것입니다. 자바스크립트는 초보자가 작업하기에는 어려운 부분들이 있기 때문에 이 부분을 제이쿼리로 쉽게 만들 수 있습니다. 그래서 제이쿼리는 자바스크립트로 만든 파일을 연동해야 합니다. 아마 시험장에서 폴더 속에 제공을 할 것입니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

이렇게 연동을 하고 시작해야 합니다. 현재 버전이 1.대 버전이지만 2.대 버전, 3.대 버전을 사용하여도 상관없습니다. 시험장에서 제공한 파일을 사용하면 됩니다. 자바스크립트로 작업할 때에는 이런 부분은 필요가 없습니다.

그리고 중요한게 스크립트의 위치입니다. 사실 어떤 곳에 넣어도 작동은 잘합니다. 하지만 코드를 순서대로 위에서 부터 읽기 때문에 스크립트는 제일 하단에 넣는 것이 제일 좋습니다. HTML 코드를 읽고 스크립트를 읽는 것이 좋겠죠. 만약 순서가 반대로 된다면 사이트는 구조가 깨지거나 완성된 화면이 나오지 않을 수 있습니다. 지금은 연습이니 제일 마지막 body 밑부분에 넣어주겠습니다. 실제 사이트 만들 때에는 상단에 넣어 줄 것입니다. 혹여나 스크립트가 로딩되지 않아서 구조가 깨지는 것을 방지하기 위해서 사이트 로딩이 끝나면 스크립트를 읽어라라고 명령어를 추가하겠습니다.

$(document).ready(function(){

});
//약식
$(function(){ 

});

스크립트가 읽을 준비가 됐다!라는 의미라고 생각하시면 됩니다. 하지만 소스가 너무 길어서 시험장에서 기억 안날 수도 있습니다. 그래서 약식으로 사용하여도 상관없습니다. 만약 약식도 기억 안나면 안써도 되긴 합니다. 만약 순서가 맞지 않으면 작동이 안될 수도 있습니다. 그래도 약식은 기억해주세요! 저것 때문에 스크립트가 작동하지 않아서 떨어진 분들도 많습니다. 원리를 알고 나면 상황이 변경되도 금방 고쳐서 작업할 수 있는데, 단순 암기식으로 하신 분들은 시험장가면 까먹어서 못하는 분들이 많더라구요!

이렇게 제이쿼리를 작업하기 위해서는 이런 준비사항을 꼭 작업하셔야 합니다.

그렇게 준비사항이 끝나면 먼저 선택자를 설정해야 합니다. $(".nav > ul > li")는 메뉴의 항목을 말하며, mouseover는 마우스 오버하면, .find(".submenu")서브메뉴를 찾아서 .slideDown()보여주겠다. 이렇게 하나씩 번역하듯이 작업하면 됩니다. 부가적인 부분들은 외우셔야 합니다. 대신 해석은 할 줄 알아야 합니다. 메뉴의 항목을 찾아서 보여주겠다. 이렇게 한글로 생각하고, 제이쿼리로 번역하면 됩니다. $(this), .stop() 이런것들은 차차 공부하면 됩니다. 처음부터 깊이 들어가면 힘드니, 우선 겉핡기 식으로 외우고 넘어갑시다. 처음 하는 거니까 작동하는지만 잘 검사하기고, 안되면 제 소스랑 잘 비교해보세요! 어째든 이렇게 하면 잘 작동이 됩니다. 잘 되셨나요? 🥹

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

3. 스크립트 작업 : 자바스크립트

이번엔 자바스크립트로 작업을 해보겠습니다. 만약 자바스크립트가 어렵다면 제이쿼리로 해도 무관합니다. 현재는 제이쿼리보단 자바스크립트가 대세이기 때문에 자바스크립트에 관심이 있으시면 이걸로 해도 상관은 없습니다. 자바스크립트는 제이쿼리처럼 라이브러리 소스는 따로 필요없고, 바로 작업하시면 됩니다. 대신 제이쿼리와 동일하게 다음과 같은 소스가 있습니다. 사이트 로딩이 완료되면 자바스크립트를 실행시키는 소스입니다.

두개의 함수는 약간의 차이가 있지만 어떤 것을 사용하여도 시험보는데 크게 문제는 없습니다. onload는 웹 페이지의 모든 컨텐츠가 로드된 후에 실행되는 함수이고, DOMContentLoaded는 웹 페이지의 DOM 트리가 로드되면 실행되는 함수입니다. 무슨 차이인줄 잘 모르겠다 싶으면 짧은거 쓰시면 됩니다!! 😵‍💫 아마 외우기에도 첫번째 소스가 좋을 것 같긴 합니다. 디테일한 부분은 다음에 더 공부하기로 해요!

window.onload = function(){

};
document.addEventListener("DOMContentLoaded", function() {

})

navList 변수를 만들고 li를 선택합니다. 제이쿼리는 여러개를 선택하든 하나를 선택하든 선택자 이름만 써주면 되지만, 자바스크립트는 여러개를 선택할 때 querySelectorAll를 사용하여 작업합니다. 자바스크립트는 여러개를 선택할 때 여러개를 선택했다고 알려줘야 합니다. 그리고 각각의 요소한테 속성값을 설정할 수 있습니다. 여러개를 동시에 선택할 때에는 forEach를 사용하고, 각각의 요소에 mouseover 효과를 설정했습니다. 내가 오버한 요소는 this로 표현하고, 해당 요소에 높이값을 설정하였습니다. 반대로 마우스 아웃 했을 때에는 내가 아웃한 요소 this에게 높이값을 0으로 설정했습니다. 무슨말인지 하나도 모르겠죠? 사실 설명하는 저도 너무 설명을 못하는 것 같아서 답답하긴 하지만, 지금은 아 이렇게 하면 작동되는구나! 정도만 느끼면 됩니다. 조금씩 아주 천천히 다음 튜토리얼에서 더 깊이 깊이 설명드리겠습니다. 우선은 잘 따라하셔서 완성해주세요! ☺️

window.onload = function(){
    let navList = document.querySelectorAll(".nav > ul > li");
    
    navList.forEach(function(navItem){
        navItem.addEventListener("mouseover", function(){
            this.querySelector(".submenu").style.height = "155px";
        });
    });
    navList.forEach(function(navItem){
        navItem.addEventListener("mouseout", function(){
            this.querySelector(".submenu").style.height = "0px";
        });
    });
}

그리고 CSS에 높이값과 트랜지션 효과를 설정해주면 애니메이션이 작동됩니다.

/* 자바스크립트용 CSS */
.nav > ul > li > ul {
    display: block;
    height: 0;
    /* height: 155px; */
    overflow: hidden;
    transition: all 600ms;
}

3. 마무리

이번시간에는 처음으로 스크립트라는 것을 작업해보았습니다. 몇몇 분들의 포기하는 소리가 들리긴 하지만, 반복해서 작업하면 어렵지 않습니다. 제이쿼리는 그나마 괜찮지만, 자바스크립트까지 하신 분들은 많이 힘들어 할거 같네요! 괜찮습니다. 안되면 외우면 되고, 외우다 보면 이해가 되고, 반복하면 시험에 합격하게 됩니다. 이번 시간에는 이런것다! 맛보기로 작업해보았구요! 다음 유형에서 조금더 공부하기로 해요! 수고하셨습니다.! 😁😃

WEBSTORYBOY

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

2023년 웹디자인 기능사 메뉴 : M-1

2023년 웹디자인 기능사 메뉴 : M-1

소개

1. 구조 잡기

2. 스크립트 작업 : 제이쿼리

3. 스크립트 작업 : 자바스크립트

3. 마무리

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

댓글

티스토리툴바

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

2023년 웹디자인 기능사 메뉴 : M-1

2023년 웹디자인 기능사 메뉴 : M-1

소개

1. 구조 잡기

2. 스크립트 작업 : 제이쿼리

3. 스크립트 작업 : 자바스크립트

3. 마무리

PDF 샘플

레이아웃

스크립트 유형

실전 사이트 유형

관련글

댓글

티스토리툴바

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