기본 메뉴바 만들기

메뉴 / navigation / 내비게이션

메뉴는 콘텐츠를 분리하고 체계화시킨 후 이를 연결시켜서 방문자들이 웹사이트를 이용할 수 있도록 하는 체계이다.
홈페이지에서 제일 중요하고 은근히 어려운 메뉴 부분이다. 

종류도 다양하다. 1단 메뉴 2단메뉴 전체 슬라이드 다운 메뉴 메가 메뉴 메뉴 자체의 종류도 있고, 
배치가 어디되는지에 따라 좌측 메뉴 우측 메뉴 상단 메뉴로 나뉘고 이미지 메뉴 플래시 메뉴 텍스트 메뉴 정말 다양하고 그만큼 방법도 무궁무진하다.

 

이번에는 간단하지만(?) 은근히 어려운 메뉴바를 만들 것이며 처음으로 1단 메뉴바를 만든다.

 

html

<!-- 전체영역 -->
    <div class="wrap">
        <!-- 메뉴전체 영역 시멘틱태그 사용 -->
        <nav class="menu_wrap">
            <!-- 전체를 감싸는 ul -->
            <ul class="menu">
                <!-- li -->
                <li class="menu_list">
                    <!-- li안에 a태그로 링크 생성 -->
                    <a href="#none" class="menu_link">메일</a>
                </li>
                <li class="menu_list active">
                    <a href="#none" class="menu_link">카페</a>
                </li>
                <li class="menu_list">
                    <a href="#none" class="menu_link">소프트웨어</a>
                </li>
                <li class="menu_list">
                    <a href="#none" class="menu_link">지식백과</a>
                </li>
                <li class="menu_list">
                    <a href="#none" class="menu_link">영화</a>
                </li>
            </ul>
        </nav>
    </div>

html은 간단한 편이다. 전체를 감싸는 div를 선언하고 그 안에 ul / li로 메뉴를 작성하였다. 

가끔 ul 안에 li 대신 a링크로 선언하는 분이 있는데, 그러면 마크업 오류이다. ul 다음에는 무조건 li 외우자

li 안에 a태그를 선언하여 링크 마크업 한다.

 

css / 본인 작성

 

@charset "utf-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* reset.css End */

/* 직접 짠 코드 */

.wrap{
    margin-top: 100px;
    min-width: 500px;
}
.menu_wrap{
    max-width: 700px;
    margin: 0 auto;
    height: 36px;
}
.menu{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.menu_list{
    display: table-cell;
    line-height: 36px;
    text-align: center;
    border: 1px solid #ddd;
}
.menu_list:not(:first-child){
    border-left: none;
}
.menu_link{
    display: block;
    color: #333;
    text-decoration: none;
    font-size: 12px;
}
.menu_link:hover {
    font-weight: bold;
    color: green;
}
.menu_list.active .menu_link{
    background-color: gray;
    font-weight: bold;
    color: #fff;
    border: 1px solid #555;
    box-sizing: border-box;
}

구현은 가능했다. 내가 절실히 믿고 쓰던 방법인데 이번 강의를 듣고 정리하면서 이 방법 말고도 더 좋은 방법이 있다는 것을 알게 되었고 나름 많이 깨우친 코드이다. 아래 css를 보자

 

더 깔끔하고 직관적인 css / reset css 제외한 부분

 

/* 좀더 깔끔한 코드 */

/* 전체 크기 조절 */
.menu_wrap{
    max-width: 700px;
    min-width: 500px;
    margin: 50px auto;
}

/* 테이블 속성 선언 부모 */
.menu{
    display: table;
    table-layout: fixed;
    width: 100%;
}

/* 테이블 속성 선언 자식 */
.menu_list{
    display: table-cell;
}

/* a링크에 디자인 요소 작업 */
.menu_link{
    display: block;
    height: 36px;
    border: 1px solid #ddd;
    font-size: 12px;
    line-height: 36px;
    color: #333;
    text-align: center;
    text-decoration: none;
}

/* 보더 겹치는 부분을 위한 -1px 삽입 / 형제선택자를 통해 첫번째 자식의 형제들의 a링크에 마진을 준다 */
.menu_list + .menu_list .menu_link{
    margin-left: -1px;
}

/* li에 hover를 넣는게 확장성에 좋다 / a태그에 적용해도 같은 결과는 나온다. */
.menu_list:hover .menu_link{
    color: green;
    font-weight: bold;
}

/* active 클래스를 가진 리스트 링크에 효과 */
.menu_list.active .menu_link{
    /* 위에 보더 겹치는 부분의 margin-left: -1px;을 하여서 우측의 보더가 좌측에 올라 왔음으로
    포지션이 선언되지 않으면 우측 보더가 보이지 않는다.
    하지만 포지션을 사용하여 재정렬을 해줌으로 우측 보더가 보일 수 있다.
    */
    position: relative;
    border-color: #555;
    font-weight: bold;
    color: #fff;
    background-color: gray;
}

 

주석에 설명을 적어 놓았다. 개인적으로 생각하기에 훨씬 깔끔하고 이해하기 쉽고 직관적인 css인 부분인 것 같다. 역시 남들이 짠 코드를 보고 배워야 한다는 생각이 다시금 든다. 앞으로는 이렇게 짜도록 습관을 들여 봐야겠다.

 

 

 

* 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.