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

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

출처 : 2013.02.21 06:00 << 클릭 >> 

   Posted in Blog Tip :/Design by 카쿠覺 

CSS를 이용해 블로그 상단 메뉴바를 만드는 방법에 대한 두 번째 글입니다. 지난 시간에는 기본적인 내용들에 대해서 다루어봤고, 이번 글에서는 보다 세부적인 사항들에 대해서 설명드리겠습니다. 지난 글에서 이어지는 글로, 이전 글을 확인하지 않을 경우 진행에 어려움이 있을 수 있습니다.

 

source : nav_menu.txt

 

1. 메뉴의 배경 색 / 글자 색 / 크기 변경하기

 

현재까지 완성된 메뉴바는 실제로 이용하기에는 너무 밋밋합니다. 이 메뉴바의 배경과 글자를 꾸밈으로써 변화를 주도록 하겠습니다. 배경 색은 background-color라는 스타일을 ul에 적용함으로써 변경할 수 있으며, 레이어에도 적용하면 보다 다양한 효과를 낼 수 있습니다. 글자 색은 color 스타일을 ul이나 li에 사용할 수 있고, 크기는 font-size 스타일을 적용하여 변경할 수 있습니다.

 

<style>

#nav_menu ul {
list-style-type:none;

 

/* 검은 배경색을 입히고, 보다 넓은 범위에 배경색을 넣기 위해 margin값을 약간 크게 잡아줌 */
background-color:#000000;
padding:1px 5px 5px 1px;

 

float:right;
}

 

#nav_menu ul li {
display:inline;
border-left: 1px solid #c0c0c0;
padding: 0px 10px 0px 10px;
margin: 5px 0px 5px 0px;

 

/*흰 글씨와 9포인트의 글자로 변경함 */
color:#ffffff;
font-size:9pt;
}

 

#nav_menu ul li:first-child {
border-left: none;
}

</style>

 

 

2. 메뉴에 링크 달기

 

각각의 메뉴를 선택할 때 이동할 수 있도록 링크를 삽입해야합니다. 링크를 넣는 방법은, "<a href="이동하고자 하는 url">메뉴 1</a>"의 형태가 기본 형태입니다.

 

<div id="nav_menu">
<ul>
<li><a href="http://kakku.tistory.com/menu1">메뉴 1</a></li>
<li><a href="http://kakku.tistory.com/menu2">메뉴 2</a></li>
<li><a href="http://kakku.tistory.com/menu3">메뉴 3</a></li>
<li><a href="http://kakku.tistory.com/menu4">메뉴 4</a></li>
<li><a href="http://kakku.tistory.com/menu5">메뉴 5</a></li>
</ul>
</div>

 

 

3. 링크 모양 변경하기

 

기본적으로 하이퍼링크는 하단에 밑줄과 파란색 글씨가 기본입니다. 그렇다 보니 검은색의 배경에 올라가 있는 메뉴이기 때문에 읽을수가 없습니다. 이를 위해 하이퍼링크 되어있는 부분의 글자 색과, 밑줄을 변경하는 법에 대해서 살펴보겠습니다.

 

하이퍼링크는 세가지로 구분되어 있습니다. 각각 a:link, a:visited, a:hover로 나타납니다. 첫번째, a:link는 아직 열어보지 않은 링크를 의미합니다. 두번째의 a:visited는 이미 방문한 링크를 나타내며, a:hover는 링크에 마우스가 올라갈 경우를 나타냅니다. 하이퍼링크를 꾸미는 것들은 이미 소개한 글자색, 크기 변경방법과 같고, text-decoration의 값을 none으로 줌으로써 링크에 생기는 밑줄을 없앨 수 있습니다.

 

<style>

#nav_menu ul {
 list-style-type:none;
 background-color:#000000;
 padding:1px 5px 5px 1px;
 float:right;
}

 

#nav_menu ul li {
 display:inline;
 border-left: 1px solid #c0c0c0;
 padding: 0px 10px 0px 10px;
 margin: 5px 0px 5px 0px;
 color:#ffffff;
 font-size:9pt;
}

 

#nav_menu ul li:first-child {
 border-left: none;
}

 

/* 특별하게 정해지지 않은 링크 속성에 모두 적용할 스타일 : 흰글씨 / 밑줄없앰 */
#nav_menu a {
 text-decoration:none;
 color:#ffffff
}

 

/* 링크에 마우스 롤오버시 적용되는 스타일 : 하단에 노란 밑줄이(border-bottom) 생김 */
#nav_menu a:hover {
 color:#D4F4FA;
 border-bottom:3px solid yellow;
}

</style>

 

------------------------------------------------------------------------

본인이 사용을 하기 위하여, 원문의 내용을 스크랩 및 내용을 추가 하였습니다.  

원문 작성자의 삭제 요구가 있을 경우, 즉시 삭제 조치를 하겠습니다.

------------------------------------------------------------------------

<< Yuotube : Click >>

TiStory blog : https://sosmt.tistory.com

Afreeca TV : http://bj.afreecatv.com/sosmt1004/vods

문제의 소지가 될 수 있는 부분에 대해 

말씀을 주시면 바로 시정하도록 하겠습니다.