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

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

 

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

 

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

 

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

 

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

 

 

<div id="wrap">
        <header>
            <h1><a href="#"><img src="http://placehold.it/200x40/335566?text=Logo" alt="Logo"></a></h1>
            <nav>
                <ul>
                    <li><a href="#">menu1</a>
                        <ul>
                            <li><a href="#">menu1-1</a></li>
                            <li><a href="#">menu1-2</a></li>
                            <li><a href="#">menu1-3</a></li>
                            <li><a href="#">menu1-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">menu2</a>
                        <ul>
                            <li><a href="#">menu2-1</a></li>
                            <li><a href="#">menu2-2</a></li>
                            <li><a href="#">menu2-3</a></li>
                            <li><a href="#">menu2-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">menu3</a>
                        <ul>
                            <li><a href="#">menu3-1</a></li>
                            <li><a href="#">menu3-2</a></li>
                            <li><a href="#">menu3-3</a></li>
                            <li><a href="#">menu3-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">menu4</a>
                        <ul>
                            <li><a href="#">menu4-1</a></li>
                            <li><a href="#">menu4-2</a></li>
                            <li><a href="#">menu4-3</a></li>
                            <li><a href="#">menu4-4</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
    </div>

 

먼저 html 파일입니다!

 

전체를 wrap으로 감싸고

header라는 시멘틱 태그로 header 영역을 잡아주었습니다.

 

제목을 알리는 h1 태그를 이용해 Logo를 넣었고 실제 시험에서는 로고 이미지를 주는데 200x40이기 때문에 placehold.it을 이용해서 가상의 Logo 사진 이미지를 만들었습니다.

 

nav라는 시멘틱 태그로 로고 옆에 메뉴 부분 영역을 잡아주었고 <ul> <li>를 사용해서 각 메뉴를 넣어주었습니다.

 

실제 시험에서는 menu 이름을 다 정해주기 때문에 menu를 지워주고 메뉴 이름을 넣어주면 됩니다.

 

div#wrap {
    width: 100%;
}
/* 헤더 영역 css 시작 */
header {
    width: 1200px;
    margin: 0 auto;
}
header::after {
    content: "";
    display: block;
    clear: both;
}
header h1 {
    width: 200px;
    height: 100px;
    margin-top: 30px;
    float: left;
}
header nav {
    width: 1000px;
    float: left;
}
header nav > ul {
    width: 600px;
    float: right;
    margin-top: 60px;
}
header nav > ul > li {
    width: 150px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    float: left;
    position: relative;
    background-color: lightblue;
}
header nav > ul > li > ul {
    display: none;
    position: absolute;
    top:40px;
    left: 0;
    width:100%;
    background-color: lightblue;
}
/* header nav > ul > li:hover > ul {
    display: block;
} */

 

두 번째로 css 소스입니다!

 

전체 영역 wrap을 100%로 잡은 후 시작했습니다

 

header부분 넓이 값을 1200으로 잡으라고 나와있고 가운데 정렬을 해줬습니다

 

나중에 float라는 태그 사용으로 영역을 띄워줄 것이기 때문에 after 가상 요소를 사용해서 clear:both로 header 부분 영역 침범을 막아주었습니다.

 

h1 / 로고 부분의 영역을 200/ 100으로 잡아주었고 이미지 크기가 200 / 40이기 때문에 margin-top: 30을 주어 가운데로  위치시켰습니다.

 

nav부분은 header(1200) - nav(200) = 남은 넓이 값 width : 1000을 잡아주었습니다.

 

메뉴 부분을 오른쪽 정렬을 해주기 위해서 <ul>의 값에 width : 600으로 주었습니다.

 

메뉴가 4개 있기 때문에 600 나누기 4 해서 <li> 영역은 150으로 잡아주었고 높이 값은 Logo와 같이 40을 잡아서 이쁘게 만들었고, header 영역 높이 값이 100이기 때문에 <ul>에 margin-top: 60을 주어 밑으로 붙여주었습니다.

 

<li> 영역이 눈에 보여야 이해가 쉬울 거 같아서 background-color : lightblue를 주었습니다

 

<li>를 기준으로 서브 메뉴가 슬라이드 될 것이기 때문에 position: relative를 잡아주었고

 

슬라이드가 되어야 할 서브 메뉴인 <ul>에 position: absolute를 잡았습니다.

 

position: absolute를 잡으면 필수로 위치 값과 크기 값을 잡아줘야 하고 <li> (0, 0) 왼쪽 위 모서리 부분을 기준으로  위치 값이 이동하기 때문에 top: 40 / left: 0 / width: 100% 를 주었습니다.

 

이제 위치와 크기 값을 정했으니, 눈에 보이지 않다가 스르륵 내려오게 만들면 되겠죠?

 

<ul>에 display : none를 써줘서 사라지게 합니다

 

헷갈리지 않기 위해서 기준인 <li>에 hover를 했을 때 display: block을 주어 마우스가 <li>에 올라갔을 때 <ul>이 정상적으로 내려오는지 확인한 후에 jQuery로 이동합니다.

 

 

$(document).ready(function(){
    $('nav ul li').mouseenter(function(){
        $(this).children('ul').stop().slideDown();
    })
    $('nav ul li').mouseleave(function(){
        $(this).children('ul').stop().slideUp();
    })
})

 

마지막으로 jQuery입니다!

 

제이쿼리의 시작을 알리는 $(document). ready(function(){})  를 먼저 쓰고 시작합니다!

 

선택자. mouseenster() 이것은 "선택자 위에 마우스를 올렸을 때"라는 뜻입니다

 

올렸을 때 (function(){  이런 식으로 쓰여있는 것은 ~ 했을 때 "할 일"이라고 생각하시면 됩니다

 

쉽게 말해서 "선택자를 마우스 엔터 했을 때 할 일" 이렇게 풀이하면 쉽죠?

 

선택자. stop(). slideDown();  "선택자는 모든 행동을 멈추고, 슬라이드 다운을 해라"라는 뜻입니다

 

쭉 풀어 보자면 "선택자 1 위에 마우스를 올렸을 때 선택자 2는 모든 것을 멈추고 슬라이드 다운을 해라"입니다.

 

아래도 똑같습니다.

 

여기서 더 알아야 할 것은 this인데 this는 부모 요소 선택자를 그대로 가져오는 것입니다.

 

여기서 부모는 'nav ul li'가 되겠네요. 

 

this의 children() // 디스의 자식 ()이라는 뜻으로  'nav ul li'의 자식 'ul'을 적어주면 됩니다.

 

이렇게 웹디자인 실기 개별 메뉴가 완성됐습니다.

 

 

영상으로 마무리 하겠습니다.

 

 

생각보다 할만하지 않나요? 

 

이렇게 접근하면 slide banner도 충분히 하실 수 있습니다!

 

고생하셨습니다 : )