세로형 메뉴(네비게이션) 만들기
웹 사이트의 서브페이지에서 흔히 볼 수 있는 메뉴(네비게이션) 구조를 만들어 볼 것입니다.
먼저 메뉴 구성을 어떻게 만들것인지를 생각해 봅니다.
1. 메뉴는 리스트 구조 이기 때문에 Li 태그가 포함된 리스트 형 태그를 선택 해야 겠네요.
2. 메뉴는 순서가 없는 리스트형 구조이기 때문에 UL 태그를 선택합니다.
[HTML 소스]
<div>
<ul>
<li><a href="#">메뉴_01</a></li>
<li><a href="#">메뉴_02</a></li>
<li><a href="#">메뉴_03</a></li>
<li><a href="#">메뉴_04</a></li>
<li><a href="#">메뉴_05</a></li>
</ul>
</div>
HTML 코딩은 이렇게 하고, 저장 후 브라우저를 확인해보면
이런 결과물을 보실 수 있으실 것입니다. 물론 어떠한 웹 브라우저에서 확인 했는지에 따라,
차이는 생길 수 있으니 참고하세요 ^^
코딩이 완료된 이후에 CSS를 작성하여 마무리를 합니다.
CSS 작성시 적용되어진것들을 원하는대로 잘 만들어 지고있는지 수시로 확인해가며,
작성해 보세요 ~
[CSS 소스]
<style type="text/css">
div { width: 200px; }
div ul { margin: 0; padding: 0; list-style: none; }
div ul li { padding: 10px 5px; border-bottom: 1px solid #DDD; }
div ul li a { color: #333; text-decoration: none; }
div ul li a:hover { color: #F00; text-decoration: underline; }
</style>
CSS 소스중 붉은색으로 표시된 부분은 메뉴의 크기 를 설정한 부분입니다.
넓이를 제어할때에는 Width 를 높이를 제어할 때에는 Height 를 사용합니다.
잊지 마세요 ^^
CSS 소스중 굵은색으로 표시된 부분을 체크 하시기 바랍니다.
해당 속성은 리스트 구조의 형태 즉, UL 태그와 OL 태그가 가지고 있는 기본적으로 보여주는
리스트 형태의 구조를 없애 주는 속성 입니다.
저 부분이 있을 때와 없을때의 차이를 확인 해보세요 .
또한 UL 속성에 Margin 과 Padding의 값을 0씩 넣어주는 이유는
모든 태그들은 태그 고유의 Margin 값과 Padding 값을 가지고 있습니다.
그 값이 존재 할경우 원하는 결과물을 얻기가 힘들어 제어할 수 있도록 변경하기위해
Margin 과 Padding의 값을 0으로 넣어 주는 것입니다.
이렇게되면 모든 작업이 완료 된것 입니다. ^^
직접 작성하여 만들어 보세요 ^^
미스조2012.02.26