CSS를 이용해 블로그 상단 메뉴바 만들기(1)

 

대부분의 블로그들의 상단을 살펴보면 메인이나 특정 카테고리로 이동할 수 있는 메뉴바가 있음을 살펴볼 수 있습니다. 대개의 티스토리 스킨에서는 이를 기본적으로 지원해서, 화면 설정 > 메뉴로 접속하게 되면 편집을 할 수 있으나 그 모양을 다르게 꾸밀수는 없다는 단점이 있습니다. 이번 글에서는 먼저 CSS를 이용하여 메뉴바를 만드는 방법에 대하여 자세히 살펴보고난 후, 특정 스킨에서 기본으로 제공하는 메뉴바를 편집하는 법에 대해서 살펴보도록 하겠습니다.

 

source : nav_menu.txt

 

1. 메뉴 리스트 작성하기

 

먼저 어떤 것들을 메뉴로 만들것인지를 정합니다. 편의상 메뉴1 ~ 메뉴5로 정하고, <ul>과 <li>를 이용하여 리스트를 만들어 보겠습니다. - ul태그는 순서가 없는 블릿 리스트이며 li는 ul 아래의 항목들을 의미합니다.

 

<div id="nav_menu">

<ul>

<li>메뉴 1</li>

<li>메뉴 2</li>

<li>메뉴 3</li>

<li>메뉴 4</li>

<li>메뉴 5</li>

</ul>

</div>

 

이와 같이 메뉴를 작성하게 되면 다음과 같이 출력됩니다.

 

 

2. 메뉴 모양 갖추기

 

지금 만들어보려고 하는 메뉴는 블로그의 상단에 위치할 메뉴로, 한 줄에 모든 리스트가 위치해야 하고, 각각의 항목 앞에 있는 마크가 없어져야 합니다. 이를 위해서는 ul 아래에 스타일로 list-style-type:none을 추가하고, 각각의 li 아래에 display:inline라는 스타일을 추가하면 됩니다.

 

<div id="nav_menu">
<ul style="list-style-type:none">
<li style="display:inline">메뉴 1</li>
<li style="display:inline">메뉴 2</li>
<li style="display:inline">메뉴 3</li>
<li style="display:inline">메뉴 4</li>
<li style="display:inline">메뉴 5</li>
</ul>
</div>

 

 

원하는 모양대로는 나왔지만 지저분해 보이기 때문에 스타일시트로 따로 작성을 하면,

 

<style>

#nav_menu ul {

list-style-type:none;

}

#nav_menu ul li {

display:inline;

}

</style>

 

<div id="nav_menu">
<ul>
<li>메뉴 1</li>
<li>메뉴 2</li>
<li>메뉴 3</li>
<li>메뉴 4</li>
<li>메뉴 5</li>
</ul>
</div>

 

로 간단하게 정리할 수 있습니다.

 

3. 각각의 메뉴 사이에 구분선 넣기

 

앞서서 스타일을 따로 빼내어 냈기 때문에 스타일시트 부분만 편집하시면 됩니다. 각각의 메뉴 사이에 구분선을 넣으려면, li의 좌측편에 선을 만들어준 후, 첫 번째에 위치하는 메뉴 부분의 테두리만 제거해주면 됩니다. 이는 border-left 스타일을 이용하여 만들 수 있습니다.

 

<style>

#nav_menu ul {

list-style-type:none;

}

#nav_menu ul li {

display:inline;

/* li요소의 좌측에 1px의 테두리 만들기 */

border-left: 1px solid #c0c0c0;

}

#nav_menu ul li:first-child {

/* li의 첫번째 요소의 좌측에는 테두리 없애기 */

border-left: none;

}

</style>

 

li뒤의 first-child는 ul아래에 위치하는 li요소들 중 첫번째 요소에만 다음의 스타일을 적용한다는 의미입니다.

 

 

4. 메뉴 사이 여백 / 위치 / 간격 조정

 

지금까지 만들어진 파일을 살펴보시면 메뉴가 좌측과 이유없이 떨어져 있음을 확인할 수 있습니다. 이 좌측 여백을 없애기 위해서는 padding-left라는 스타일 값을 ul에 0으로 주시면 됩니다. 메뉴의 위치는 float라는 스타일을 이용해 좌측이나 우측정렬을 할 수 있으며, margin과 padding이라는 스타일을 li에 이용, 메뉴간의 간격을 조절할 수 있습니다.

 

※ padding값은 기준으로부터의 내부의 간격이고, margin은 기준으로부터 외부의 간격입니다.

 

<style>

#nav_menu ul {

list-style-type:none;

/* 좌측 여백 없애기 */

padding-left:0px;

/* 우측 정렬 하기 */

float:right;

}

#nav_menu ul li {

display:inline;

border-left: 1px solid #c0c0c0;

/* 테두리와 메뉴 간격 벌리기. padding: 위 오른쪽 아래 왼쪽; */

padding: 0px 10px 0px 10px;

/* 메뉴와 테두리 사이 간격 벌리기. margin: 위 오른쪽 아래 왼쪽; */

margin: 5px 0px 5px 0px;

}

#nav_menu ul li:first-child {

border-left: none;

}

</style>

 

 

다음번 글에서는 각각의 메뉴에 링크를 삽입하고, 메뉴의 모양을 보기좋게 변경하는 법에 대해서 다루겠습니다.