UI / UX 웹 퍼블리셔 & 프론트엔드 [17] - 퀵메뉴 만들기

이번 실습은 주로 네이버나 쇼핑몰을 정리해주는 사이트에서 자주 사용하는 "퀵메뉴" 실습을 진행하였다.

 

inidex17.html

 

○ BODY

 

퀵메뉴의 큰 틀을 담당할 <div> 객체 .quickmenu

 

<a href="">를 추가한 <div> 객체 .imgdiv

: 퀵메뉴를 구성할 요소들에 <img src=""> 상대경로로 이미지를 넣어주고

 이미지를 누를 경우 이동할 사이트와 이동할 방식을 <a href="" target="">을 통해 지정해준다.

 그리고, <div>객체는 세로로 쌓이기 때문에 3개씩 가로로 붙이기 위해 클래스에 별칭을 달아준다.

 

 

 

○ HEAD - <style>

.quickmenu 와 .imgdiv 를 통해 각 객체의 크기와 특성을 지정해 주고,

위로 당길 객체들은 별칭을 통해 당겨준다.

 

 

index17.html - 결과

 

 

 

※ <ul>, <li> 활용하여 적용해보기

index17.html - <ul>, <li>

 

<div>를 쓰는 것과 별 차이 없이,

작은 요소 하나하나에 가로길이와 세로길이를 넣어주고 margin으로 잡아당긴다.

 

 

나중에는 이렇게 노드로 작성 가능하다

           .quickmenu > li {

                width: 110px;

                height: 44px;

                float: left;

                /* border: 1px solid blue; */

            }

 

            .quickmenu > li:nth-child(3) {

                margin: -44px 0 0 220px;

            }

            

            .quickmenu > li:nth-child(6) {

                margin: -44px 0 0 220px;

            }