웹디자인 기능사 실기 전체메뉴 슬라이드 다운 / html css jQuery

웹디자인 기능사 실기 전체 메뉴 슬라이드 다운 / html css jQuery

 

웹디자인 기능사 실기를 앞두고 개인적으로 학원을 다니는 사람들, 국비 지원을 받아서 학원을 다니는 사람들 혹은 혼자 독학을 하고 있는 사람들이 있을 거예요!

오늘은 혼자 독학을 하고 있는 분들을 위해 기본적인 설명부터 자세하게 다뤄 볼까 합니다!

오늘 배워 볼 코드 소스는 html과 css, jQuery를 이용해서 만들어 볼 거예요.

jQuery 소스는 head부분에 아래 소스 넣고 js 파일 연결해서 사용하시면 됩니다

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

 

html 소스

 

<div id="header">
            <h1><a href="#"><img src="img/Untitled-1.jpg" alt="로고"></a></h1>
            <div class="gnb">
                <ul>
                    <li><a href="#">탑</a>
                        <ul>
                            <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>
                            <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>
                            <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>
                            <li><a href="#">귀걸이</a></li>
                            <li><a href="#">목걸이</a></li>
                            <li><a href="#">반지</a></li>
                            <li><a href="#">팔찌</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

 

이번엔 시멘틱 태그를 사용하지 않고 div를 사용했습니다

 

시멘틱 태그를 사용하는게 남들이 알아보기에 더욱 좋고 간단하기 때문에 시멘틱 태그를 사용하는 것이 더 좋습니다.

 

저번 내용과 html은 비슷하죠? 

 

h1태그로 로고 영역을 잡아주고 div.gnb로 서브 메뉴 영역을 감싸주었습니다.

 

왼쪽으로 간격을 맞춰서 정렬할 것이기 때문에 <ul> , <li>를 사용해 메뉴와 서브 메뉴를 넣어주었습니다.

 

 

css 소스

 

div#header {
    width: 1200px;
    margin: 0 auto;
    padding: 30px 0;
    outline: 1px solid black;
}
div#header:after {
    content: "";
    display: block;
    clear: both;
}
div#header h1{
    width: 200px;
    height:40px;
    float: left;
    outline: 1px solid black;
}
div#header div.gnb {
    width: 1000px;
    float: left;
    outline: 1px solid black;
}
div#header div.gnb > ul {
    width: 600px;
    float: right;
    outline: 1px solid black;
}
div#header div.gnb > ul > li {
    width: 150px;
    height: 40px;
    text-align:center;
    line-height: 40px;
    float: left;
    position: relative;
    outline: 1px solid black;
    background-color: rgba(169,203,215,.8);
}
div#header div.gnb > ul > li > ul {
    display: none;
    position: absolute;
    top:40px;
    left:0;
    width: 100%;
    z-index: 100;
    color: white;
    background-color: rgba(169,203,215,.8);
}

div로 잡으니까 앞에 태그의 시작이 전부 div. 혹은 div#으로 보여서 구분하기가 좀 더 불편하겠죠?

 

다음부터는 시멘틱 태그를 사용해 줍시다!

 

 

크기 값에 대해 쭉 설명 하다보니 너무 기초이고, 매번 설명하기에 가독성이 떨어진다고 생각하여 크기 값을 정한 이유는 저번 내용 링크를 맨 밑에 첨부하겠습니다.

 

 

저번 내용을 통해 위치 값, 크기 값을 정한 이유에 대해서 알고 있다고 가정하고 중요한 내용 설명만 하겠습니다.

 

 

<li>에 position : relative 를 잡아서 기준을 잡아주었고, 메뉴에 마우스가 올라왔을 때 서브 전체 메뉴가 내려와야 하기 때문에 <ul>에 position: absolute를 잡아주었습니다

 

position: absolute 를 잡으면 필수로 위치 값과 크기 값을 정해줘야 합니다.

 

위치 값과 크기 값을 정해주고 z-index를 사용한 이유는 나중에 sldie banner가 들어가면 그 안으로 들어가서 보이지 않을 수도 있기 때문에 z-index : 100을 주어 앞으로 화면 앞으로 나오게 해 주었습니다.

 

 

jQuery 소스

 

$(document).ready(function(){

    $('div.gnb > ul > li').mouseenter(function(){
        $('div.gnb > ul > li > ul').stop().slideDown();
    })

    $('div.gnb > ul > li').mouseleave(function(){
        $('div.gnb > ul > li > ul').stop().slideUp();
    })
})

 

제이쿼리의 시작을 알리고

 

선택자. mouseenter(할 일

     선택자. stop(). slideDown();

선택자. mouseleave(할 일

     선택자. stop(). slideUp();

 

이렇게 생각하면 너무 쉽지 않나요?

 

선택자 1에 마우스가 올라갔을 때

       선택자 2는 모든 것을 멈추고 슬라이드 다운이 되어라.

선택자 1에서 마우스가 떠났을 때

       선택자 2는 모든 것을 멈추고 슬라이드 업이 되어라.

 

이게 전부입니다.

 

여기서 선택자를 고르는 방법은 기준이 되는 <li>에 마우스가 올라갔을 때, 서브 메뉴 <ul>이 슬라이드 다운이 될 것이기 때문에 선택자 1에는 'div.gnb ul li'가 들어오고 선택자 2에는 'div.gnb ul li ul' 이 들어와 주는 것입니다.

 

천천히 풀어나가면 생각보다 이해하기 쉽지 않나요?

 

 

영상이 지금 올라가지 않아서 오후에 영상 첨부 후 수정 업로드하겠습니다.

 

 

 

웹디자인 기능사 실기 개별 메뉴 slideDown html css js

웹디자인 기능사 실기 개별 메뉴 slideDown html css js