스킨에서 제공하는 상단 메뉴바 수정하기

 

이전 글에서 다룬 내용(CSS를 이용해 블로그 상단 메뉴바 만들기)을 바탕으로 기존에 블로그 스킨에서 제공하고 있는 상단 메뉴바의 모양을 수정하는 방법에 대해서 살펴보겠습니다. 이 포스트에서는 블로그 상단 메뉴가 비교적 평범하게 있는 Life In Mono(Light) 스킨을 기준으로 설명드리겠습니다. 편의상 이 스킨을 기준으로 작성하나 다른 스킨의 경우도 방법적인 측면에서 큰 차이는 없습니다.

 

1. 블로그 메뉴 치환자 찾기

 

 

블로그 메뉴는 [ ##_blog_menu_## ] 라는 치환자로 만들어집니다. 해당 치환자를 찾은 다음에는, 치환자가 들어가 있는 레이어의 이름(div id="blogmenu")이나 클래스 이름(div class="blogmenu")을 확인합니다. 해당 부분을 확인한 후 style.css에서 이와 관련된 스타일 부분을 찾습니다. 아마도 #blogmenu li나 .blogmenu li같은 형식으로 스타일들이 작성되어 있을것입니다.

 

같은 부분에 적용되는 스타일이나 각기 따로 작성되어 있을경우도 있으니 확인을 해줘야 하나, 굳이 안하셔도 상관은 없습니다. 단, 수정을 위해 해당 이름(클래스)으로 정의되어 있는 스타일을 모두 확인하시고 어떤 형태로 스타일이 적용되어 있는지는 확인해주셔야 합니다. 지금 다루고 있는 Life In Mono(Light) 스킨의 경우에는 아래와 같습니다.

 

/* blogMenu라는 이름을 갖는 레이어 내부의 li 태그에 적용되는 스타일 */

#blogMenu li {
 dispaly:inline;
}

 

#blogmenu li {
 list-style-type:none;
}

 

/* blogMenu라는 이름을 갖는 레이어에 적용되는 스타일 */

#blogMenu {
 float:right;
 margin:0 0 3px 5px;
}

 

/* blogMenu라는 레이어 내부의 ul 내부의 li 태그에 적용되는 스타일 */

#blogMenu ul li {
 float:left;

 /* 해당 스킨은 메뉴간 간격 표시를 border가 아닌 이미지를 통해 보여주고 있음 */
 background:url(images/menu_div.gif) no-repeat 0 3px;
}

 

/* li중 첫 번째 요소에 적용되는 스타일 */

#blogMenu li.first {

 /* 해당 스킨은 메뉴간 간격을 이미지를 통해 보여주므로 배경을 없앰으로 좌측 테두리 없앰 */
 background:none;
}

 

/* blogMenu 레이어 내부에 오는 링크에 적용되는 스타일 */

#blogMenu a {
 height : 16px;
 color : #707070;
 font-family : arial;
 font-size : 12px;
 padding: 0 10px;
}

 

/* blogMenu 레이어 내부에 오는 링크에 롤오버시 적용되는 스타일 */

#blogMenu a:hover {

 color:#333;

 text-decoration:none;

}

 

2. 어떻게 수정할 것인지를 확정하기

 

앞선 단락에서 현재 해당 스킨에서 메뉴바가 어떠한 형태로 만들어져 있는지를 확인했습니다. 이를 토대로, 어떤 모양으로 메뉴바를 변경하고 싶은지를 확정한 후 어느 부분을 수정하면 될지를 정하면 됩니다. 여기서는 본래 만들어져 있는 메뉴바를 다음과 같은 형태로 수정하고자 한다고 가정해보겠습니다.

 

a. 상단 메뉴바의 형태를 하단의 검색/방문자가 출력되는 곳과 비슷하게[관련글]

b. 링크에 롤오버시 링크 색과 하단에 노란 바가 생기게[관련글]

 

기존에 있는 메뉴바를 이 두가지 형태에 입각하여 수정하겠습니다.

 

3. 기존의 스타일을 원하는대로 수정하기

 

해당 스킨에서는 기본적으로 메뉴바의 형태는 구성이 되어있기 때문에, 여기서 추가해야 할 것들은 메뉴바의 배경과 테두리 모깎기, 그림자 처리, 링크 색 변경정도로 압축됩니다. 앞선 단락에서 a로 다뤘던 부분은 블로그 메뉴가 담겨있는 레이어에 스타일을 적용해야 하는 경우이고, b의 경우에는 메뉴바에 들어있는 링크 부분의 스타일을 변경해주면 되는 부분입니다.

 

먼저 검색/방문자가 출력되는 곳과 비슷하게 상단 메뉴바의 형태를 만들기 위해서 블로그 메뉴가 담겨있는 레이어에 배경색, 테두리 모깎기, 그리고 그림자를 주도록 하겠습니다. 해당되는 부분을 모두 적용한 결과는 다음과 같습니다.

 

/* 기존의 소스에서... */

#blogMenu {
float:right;

 

/* 배경을 줘야하기 때문에 높이를 지정, 깔끔하게 보이기 위해 margin값을 조정함 */
margin:0 5px 3px 5px;
height:22px;

 

/* 레이어에 그림자를 넣음 */
box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-o-box-shadow: 0px 0px 15px rgba(0,0,0,.3);

 

/* 레이어 테두리를 3px만큼 모깎기 함 */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

 

/* 레이어에 배경색을 넣음 */
background-color:#5c5c5c;
}

 

그 후, 링크 부분의 스타일을 변경하기 위해 a:hover부분을 다음과 같이 수정합니다.

 

/* 기존의 소스에서... */

#blogMenu a:hover {
color:#D4F4FA;

 

/* 하이퍼 링크 하단에 테두리가 생기도록 함 */
border-bottom:3px solid #FAED7D;

text-decoration:none;
}

 

마지막으로 레이어 내부에 위치하는 블로그 메뉴의 위치를 제대로 잡아주기 위해서 기존에 설정되어 있던 #blogmenu a의 padding값과 #blog menu의 margin값을 알맞게(완성된 소스를 확인하시면 됩니다) 다시 설정합니다. 두 값의 변경에 따라 메뉴간의 구분선 역시도 움직여줘야 하기 때문에 background:url(images/menu_div.gif) no-repeat 0 8px; 부분의 마지막에 있는 크기의 값을 알맞게 조정(위 아래로 이동함 관련글 참고)해줌으로써 위치를 설정할 수 있습니다.

 

4. 적용된 예제

 

(http://kakkusourcetest.tistory.com/)

 

/* 블로그메뉴 */ #blogMenu { float:right; margin:0 5px 3px 5px; height:22px; box-shadow: 0px 0px 15px rgba(0,0,0,.3); -moz-box-shadow: 0px 0px 15px rgba(0,0,0,.3); -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.3); -o-box-shadow: 0px 0px 15px rgba(0,0,0,.3); -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color:#5c5c5c; } #blogMenu ul li { float:left; background:url(images/menu_div.gif) no-repeat 0 8px; padding:4px 0 0 0; } #blogMenu li.first { background:none; } #blogMenu a { height:16px; color:#f1f1f1; font-family:arial; font-size:12px; padding:0 10px 0 10px; } #blogMenu a:hover { color:#D4F4FA; border-bottom:3px solid #FAED7D; text-decoration:none; }