nav 태그를 이용하여 메뉴바를 구현(네이버 서비스 링크)

Posted by 드린
2017. 12. 1. 22:22 IT

구현해 볼 메뉴바는 바로 네이버에서 제공하는 서비스들로 이동이 가능한 메뉴바를 만들어 보려 합니다.

다음과 같이 말이죠.

HTML5로 올라가면서 다양한 태그가 나왔는데

이번에 적용할 태그는 nav 태그예요.


nav태그는 보통 메뉴바를 구현할 때 사용되는 태그예요.

먼저 HTML코드는 다음과 같습니다.

본체인 BODY태그만 보여드리죠.

<body>

     <nav>

         <ol>

             <li><a href="http://mail.naver.com/">메일</a></li>

             <li><a href="http://cafe.naver.com/">카페</a></li>

             <li><a href="http://section.blog.naver.com/">블로그</a></li>

             <li><a href="http://kin.naver.com/">지식iN</a></li>

             <li><a href="http://shopping.naver.com/">쇼핑</a></li>

             <li><a href="http://dic.naver.com/">사전</a></li>

             <li><a href="http://news.naver.com/">뉴스</a></li>

             <li><a href="http://stock.naver.com/">증권</a></li>

             <li><a href="http://land.naver.com/">부동산</a></li>

             <li><a href="http://map.naver.com/">지도</a></li>

         </ol>

     </nav>

</body>

nav 태그의 자식 태그로 ol 태그가 들어갔고,

ol 태그의 자식 태그로 li 태그가 들어갔습니다.

li 태그에는 a 태그들이 들어있구요.


이렇게만 돌려보면 어떻게 될까요?

다음과 같이 리스트 형태로만 나오게 됩니다.

이래서 CSS가 필요한거죠.

그럼 이제 CSS 코드를 보여드리죠.

<style>

        * { 

            margin: 0;  

            padding: 0; 

        }


        nav {

            font-family:  "Lucida Grande", Tahoma, Verdana, Arial, Helvetica, sans-serif;

            font-size: 0.8em;

            font-weight: bold;

        }


        nav ol { 

            background-color: #44b316;   

            padding: 6px; 

        }


        nav li {

            display: inline;

            margin: 0 10px;

        }


        nav a { 

            color: #FFFFFF;    

            text-decoration: none; 

        }


        nav a:hover { 

            color: #0000FF; 

        }

    </style>


*는 모든 요소에 적용되는 것이며,

nav에 보시면 font-family에 여러 폰트가 적용되어있는데,

이것은 앞에서부터 해당 폰트가 없을 경우 차례대로 적용해보며 적용되는 폰트를 사용하게 되는 것입니다.


다음으로 nav li를 보시면 display: inline으로 되어있습니다.

이것은 한줄에 보여주기 위함입니다.

display에는 여러가지가 있는데, 

block은 리스트 앞에 1,2,3...만 없어지게 되고 CSS를 적용하지 않은 것처럼 한줄이 아니라 여러줄에 걸쳐 나오게됩니다.

inline은 제일 처음에 보여드렸던 것처럼 한줄에 나타나긴하지만,

화면이 줄어들게 되면

다음과 같이 글자가 잘리며 다음 줄로 개행이 이루어집니다.

그럼 증권을 차라리 아래로 내려버리고 싶을 때는 어떻게 해야할까요?

바로 inline-block을 사용해야합니다.

inline-block을 적용하게되면

다음과 같이 증권이라는 단어가 아래로 개행이 되는 것을 보실 수 있습니다.

웹을 개발하시다보면 이런 자잘한 요소들이 큰 영향을 끼칩니다.

요즘 같은 반응형 웹에서는 저러한 요소들도 중요하죠.


직접 적용해보시길 바래요.

메뉴 하나 하나에 링크를 걸었기에 각 해당하는 네이버 서비스로 이동이 가능합니다.

이 댓글을 비밀 댓글로