HTML/CSS기초_drop down 메뉴 만들기 1 



 

안녕하세요. 그림젤입니다...

웹 세상은 정말 수시로 변하고 있어요....

 

그러니 옛날에 배웠던 CSS를 잊어버리면

안 될 거 같아서 계속 블로그에 정리를 합니다.;;

 

요번에 만들어 볼 작업은 드롭다운 메뉴입니다.

예전에 List 요소로 간단한 가로 메뉴를

포스팅했었는데요... 잊어버리기 전에

드롭다운 가능한 메뉴를 만들어 봅니다.

 

간단한 드롭다운 메뉴는 CSS로도 작성이 되요.

그래서 일단 아래와 같이 Menu와 sub-menu를

list 요소로 작성했습니다.

 

물론 CSS 작성자마다 다르지만

저는 아이디 선택자로 메인 메뉴와 서브 메뉴를

구분지어서 찾기 쉽게 작성했습니다.

 

#main-menu : 메인 메뉴(부모 UL 요소)

#sub-menu : 서브 메뉴(자손 UL 요소)

 

 

 

 

 

자... 일단 기본적으로 브라우저가 가지고 있는

각 요소의 스타일을 초기화하도록 합니다.

 

초기화 CSS를 많이 작성하지 말라는 얘기를 들어서...

마진과 여백, 불릿 스타일 제거만 했습니다.

전체에 사용할 폰트는 Roboto를 사용했어요.

 

마진과 여백을 제거하고 불릿 스타일도 없앴습니다.

텍스트 장식은 아직 남겼습니다...

 

가로 메뉴를 만들어야 하기 때문에....

#main-menu의 자식인 List 요소에게

float: left; 속성을 적용했습니다.

 

그리고 잘 모를 때는 임시로 border를 주곤 합니다...

빨간 선을 만들었더니 공간이 보이네요.;;

 

역시나 사람마다 다르지만... 

저는 처음 공부할 때는 List 요소에

높이와 너비를 설정했었는데요...

 

이렇게 되면 List 요소의 공간이 딱 정해져서 좋지만

메뉴의 내용이 다를 때는 안 좋더라구요...

 

그래서 요즘에는 Anchor 요소에게

패딩을 주는 방식으로 작업을 합니다.

 

그러나 이것도 정해진 것은 아닙니다...;;

 

 

글자만 덩그러니 있으므로 스타일을

적용해보도록 하겠습니다.

 

여러분만의 디자인 감각을 발휘할 시간이죠...

메뉴의 색상, 글자 색상, 여백 등을 지정합니다.

 

메뉴 좌우에 선이 없어서 구분이 안 되므로

border-right를 모든 Anchor 요소에게 넣었습니다.

 

 

 

 

그런데 제일 처음의 List 요소의

Anchor에게만 선이 없어서 여기에만 따로

border-left 속성을 적용한 겁니다.

 

 

 

 

이젠 #sub-menu 녀석에게도 스타일을

적용할 차례이므로 스타일 부여합니다.

 

마찬가지로 말씀드리지만 다른 곳을 보면

#menu li ul li 혹은

#menu li ul li a 이런 식으로... 코드를

작성하는 걸 보실 거에요... 이해할 수는 있지만

개인적으로는 헛갈리기 때문에...

 

#sub-menu > li > a 혹은

#main-menu > li #sub-menu 이렇게

자식 선택자를 자주 사용합니다.

(이러면 좀 더 명확하게 구조가 보이거든요.)

 

자... 이제 서브 메뉴도 스타일을 줬으니...

드롭 다운을 만들어보도록 하죠...

일단 서브 메뉴를 숨겨야 하기 때문에...

#sub-menu에다가 opacity: 0 과

visibility: hidden 속성을 줬습니다.

 

display: none을 적용할 수도 있지만

최근 CSS 기술인 transition이 먹히지 않는데요..

그래서 위와 같이 속성을 준 겁니다.

(W3C에서 visibility를 권장한다고도 들었구요.)

 

 

#sub-menu를 안 보이게 설정했으므로...

그 상위에 있는 #main-menu > li 에

:hover(마우스 오버)했을 때 보이도록 설정합니다.

 

#main-menu에게 hover하면 숨겨진

서브 메뉴들이 한번에 다 보이기 때문에...

서브 메뉴가 한 칸씩 보이도록

 

#main-menu > li:hover #sub-menu(ul)

로 선택자를 지정해서 스타일을 적용해준 것입니다.

 

마찬가지로 opacity: 1과 

visibility: visible을 적용합니다.

 

 

 

 

이렇게 되면... 각 메뉴 마다 서브 메뉴가 뜹니다.

물론 transition을 적용한다면 서서히 나오게

만들 수도 있습니다... (애니메이션 효과가 대세니까요.)

 

 

 

전체 메뉴바의 색상이 단조롭다면

그라데이션을 적용할 수도 있습니다.

 

위의 코드 전체가 보고 싶으시다면

아래의 링크를 참조하시면 됩니다.

 

[ 완성 링크 참조 ]