HTML/CSS

XHTML

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

WEBSP2012.02.09 15:05

조회 : 5,586

가로형 메뉴(네비게이션) 만들기
가로형 메뉴 사이트의 메인메뉴(GNB)를 생성할때 가장 많이 사용하고 있습니다.
그 메뉴를 작성 하는 방법을 알아보겠습니다.
 
항상 모든 퍼블리싱(코딩) 작업 이전에는 내가 만들고자 하는 구조를 생각하고,
그 의미에 맞는 적절한 태그를 선택하여 작업한다는 점은 절대로 잊어서는 안됩니다.
 
가로형 네비게이션에서 사용될 태그와 CSS 속성
가로 형을 만들때 사용할 수 있는 태그는 무엇이 있을까요?
세로형 네비게이션 만들었을때와 동일한 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>
 
이와 같이 작성하면, 항상 결과물은 세로형 네비게이션에서 봤던거와 같은 결과가 나오게 됩니다.

그리고 항상 원하는 구조를 생각하며 적절한 태그를 사용하신 후,
원하는 부분의 작업이 다 끝났다면 CSS를 작성하세요.
CSS 작성시 적용되어진것들을 원하는대로 잘 만들어 지고있는지 수시로 확인해가며,
작성해 보세요.
 
[CSS 소스]
 
<style type="text/css">       
 div ul { margin: 0; padding: 0; height: 30px; list-style: none; border-top: 1px solid #DDD; border-bottom: 2px solid #999; }
 div ul li { width: 19.97%; border-right: 1px solid #DDD; float: left;  }
 div ul li a { display: block; padding-top: 7px; height: 30px; font: bold 12px dotum; color: #666; text-align: center; text-decoration: none;  background: #EEE; }
 div ul li a:hover { color: #FFF; background: #9C0;  }
</style>
 
 
    width: 19.97%; / height: 30px; 넓이를 제어할때에는 Width높이를 제어할 때에는 Height 를 사용합니다.
 
    CSS 소스중 굵은색으로 표시된 부분을 체크 하시기 바랍니다.
    속성은 리스트 구조의 형태 즉, UL 태그와 OL 태그가 가지고 있는 기본적으로 보여주는
    트 형태의 구조를 없애 주는 속성 입니다.
 
    UL 속성에 Margin 과 Padding의 값을 0씩 넣어주는 이유는
    태그들은 태그 고유의 Margin 값과 Padding 값을 가지고 있습니다.
    그 값이 존재 할경우 원하는 결과물을 얻기가 힘들어 제어할 수 있도록 변경하기위해
    margin 과 Padding의 값을 0으로 넣어 주는 것입니다.
    네비게이션 작성 글을 보셨다면 이 내용은 꼭 기억해 두세요 .^^
 
    display: block;  해당 속성은 Inline 요소의 태그를 Block 형으로 바꿔 주는 것입니다.
  
   쉽게 말해 Inline 요소 태그는 개행(줄바꿈)이 되지 않는 것을 말하고,
   Block 형 태그는 개행(줄바꿈)이 되는 태그를 말합니다.
   즉, A 태그는 개행(줄바꿈)이 일어나지 않는 Inline  속성 태그이면서 링크 속성을 가지고 있습니다.
   이것을 Block 형으로 바꾸게 되면 A 링크의 지정된 위치까지가 하나의 A링크 영역이 되는 것이지요.
   이것에 대한 개념을 잘 모르시겠다면, 글 남겨주세요 ^^;
   해보시면 이해 하실 수 있으 실꺼라 생각듭니다.
 

 결과물 화면 입니다 ^^
 
  이해가 안거나 잘 모르시는 것이 있다면 항상 질문을!!! ^^    >> 질문하러가기

1개의 댓글이 있습니다.

  • 미스조2012.02.26

    고맙습니다.
    이렇게 간단한 소스로 멋진 가로형 네비게이션 메뉴가 나오다니 신기하네용.
    홈페이지가 더욱 예뻐질 것 같습니다.

    p.s. 태그 자체에 고유 마진 패딩 값이 존재한다는 거 이번에 새롭게 알게되네요.ㅋㅋ

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

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

error file : /bbs/board.php