[html/CSS] 웹페이지 드롭다운 메뉴 만들기 <li>,<ol>,<ul>

 

<!--잡소리 시작-->

얼마 전부터 계속해서 html, CSS 예제를 나가고 있는데.... 이거원 구구단 가르쳐주다가 갑자기 미분,적분하라는 꼴이다. ul안에 li가 들어갑니다, ol안에 li가 들어갑니다 뭐 이런거만 하다가 갑자기 웹사이트 일부를 구현하라니............ 

적잖게 당황해서 와 처음부터 구조를 어케 짜더라.... 하면서 멍때렸다.

그리고 당황했는지 clss값이랑 id값을 CSS선언할 때 헷갈려하기도 하고 #대신 .을 찍기도하고 그반대도하고.... 또 생각이 드네..... 이게..실무에서...된다고? 날 뽑아준다고? 허윽.

오늘의 삽질. 쩔었다.

<--!잡소리 끝-->

 

완성되었을때 드롭다운메뉴

 

먼저 큰 구조는 <nav> 안에 <ul>, <li>, 를 사용해서 큰 헤더메뉴를 만들어주고 그다음에 각 해당하는 <li> 태그 메뉴 안에 드롭다운 메뉴를 <ol>안에 <li>로 구성하여 배치해준다. 여기서 또 삽질이 나왔다.

한참을 해도 도대체 ol로 만든 드롭다운 메뉴가 둥둥 떠다녀서 왜 이건 자꾸 따로놀지... 라고 생각했는데, 알고 보니 해당하는 메뉴 <li>태그 안에 넣지 않고 걍 닫아 버렸다. 즉,

<li><<a href="#">웹개발</a></li> <ol>  　　<li><a href="#"></a></li> 　　<li><a href="#"></a></li> </ol>

오늘 희대의 삽질 되시겠다. 후..... 저 빨간 </li>안에 ol 드롭다운 메뉴를 넣어줘야 그쪽으로 붙은가 말든가하지....뭐하니...

 

무튼, 전체적인 html 구조는 위와 같다. 드롭다운 메뉴의 상위 메뉴인 '웹개발'메뉴에 <ol>태그로 드롭다운 메뉴를 넣어주고, 나머지 게시판 메뉴에도 <ol>태그로 드롭다운 메뉴2를 넣어주었다. 그리고 나는 ul,li,ol의 늪에 갇혀버렸다.;;;

다음은 CSS로 넘어가자. 

일단 core.css 외부 css를 만들어서 import url을 걸어주었는데, core에는 ul,ol,lo 리스트 스타일을 없에고 자식 요소인 li의 float를 일단 해제했다. 그리고 display로 블럭처리를 해주고,

각 링크 태그인 a 태그에는 기본으로 들어가 있는 색상이나 글자 데코레이션을 상속하거나 없애주었다. 마찬가지로 display역시 블록처리함.  

 

그리고 다시 해당 html의 CSS를 짜주었는데, 먼저 상위 메뉴를 살펴보자. 상위메뉴는 header, h1의 id인 #logo, nav의 id 값인 #gnbBox 등에 CSS를 입혀주었다. 일단 header의 경우 전체 상위메뉴를 뜻하기 때문에 반응형구현을 위해서 너비 값을 100%로 주고 z-index를 주어서 가장 상위로 올라가서 스크롤에도 영향을 받지 않도록 했다.

h1인 logo의 경우 width값을 픽셀로 고정해주고 float:left;를 주어서 왼쪽부터 옆으로 흐르게 하였다. 그리고 나머지 메뉴들인 #gnb>li 역시 float:left로 하여 왼쪽부터 옆으로 흐르게 주었다. (core에서 li를 블록처리하였기 때문에 플롯 값으로 왼쪽배열 가능함) 

그리고 너비와 높이값을 대강 어림잡아서 줌. 퍼센트니깐 머.....ㅎ.... 

또또 중요한 것은 #gnb 안에 있는 li 포지션을 relative로 주어서 나중에 나올 드롭다운 메뉴들의 부모로 설정해 주었다. 위치값을 조정해야 하므로..........

모니터 중간배열을 위해서 #gnbBox 값에 margin-left값을 주었다. 

그리고 목록에 있는 링크에 font 설정을 해주고 색상도 설정해주고 margin-top을 주어서 너무 위로 딱 붙지 않도록 넓혀주었음... text는 가운데 정렬!

또 드롭다운메뉴들이 마우스오버가 아닐 시에는 보이지 않아야 하므로 display:none; 처리를 해주었다. 

cf) opcitiy 값과 visibility:hidden;으로 해보려고 했는데, display의 경우 해당 콘텐츠는 사라지나 공간은 남아 있는데, visibility는 공간도 아예 사라지는 것이라고 해서 그냥 display로 하였음. 어차피 태그가 먹히지도 않더라;;;;; 머가 문제징.

 

대망의 드롭다운메뉴 CSS 설정이다. 일단  둘다 position을 absolute로 주어서 위에 #gnb안에 있는 li 부모 위치를 기준으로 맞추어 지도록 설정해 주었다. 상위에 있는 li가 부모이기 때문에 이를 기점으로 top을 맞추어 주면 되겠다. width값도 100%로 줘서 상위 li와 너비가 같도록 해주었음. 

드롭다운메뉴 2도 머...똑같당. 

그리고 "마우스 오버 시 어떻게 해야하니"에 대한 설정을 해주었다. 

일단 #gnb>li:hover>a 의 경우 #gnb안에 있는 li를 hover하였을 때 드롭다운메뉴 1(.submenu1),2를 블록처리를 해준다. 그래야 밑으로 줄줄 흐를꺼니깐,,,,,,

또 #gnb>li:hover>a 의 경우 #gnb안에 있는 li를 hover하였을 때 a에게 주는 값이므로, color을 노란색으로 주어라고 했다. 마우스 올리면 글자가 노란색으로 변함. 

 

ㅎ ㅏ ㅇ ㅏ..... 끗나따아.

아니 메뉴 하나 만드는게 쉽지 않은데 웹사를 도대체 어케 만들지 큰일이다 하하핳ㅎ하하ㅏ하하하하하ㅏㅎ핳하 점점 미쳐가는중.