HTML/CSS

XHTML

세로형 메뉴(네비게이션) 만들기

WEBSP2012.02.08 14:28

조회 : 9,861

세로형 메뉴(네비게이션) 만들기
웹 사이트의 서브페이지에서 흔히 볼 수 있는 메뉴(네비게이션) 구조를 만들어 볼 것입니다.
먼저 메뉴 구성을 어떻게 만들것인지를  생각해 봅니다.
 
    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으로 넣어 주는 것입니다.
 
 
이렇게되면 모든 작업이 완료 된것 입니다. ^^
직접 작성하여 만들어 보세요 ^^
 
 

1개의 댓글이 있습니다.

  • 미스조2012.02.26

    가로형 css 소스보단 덜 이쁘네용.ㅋ

select count(*) as cnt from g4_login where lo_ip = '3.91.249.156'

1194 : Table 'g4_login' is marked as crashed and should be repaired

error file : /bbs/board.php