반응형

자신만의 메뉴바를 만들어보기



'로그의 검색창을 사이드바로 옮기기'를 통하여 상단의 검색 바에 위치하던 검색창이 옮겨지고 나면 검색바의 좌측에 공백이 발생하게 됩니다. 당연히 허전합니다. 검색창의 빈자리가 크기만 하군요, 흑. (응?)

저번 포스트에서 검색 창을 사이드바로 이전한 이유는 이 빈 공간에 블로그 메뉴를 구성하기 위해서입니다. 'Life in Mono'와 같이 상단의 검색 바에 검색창과 카운터가 위치한 스킨의 경우에는 블로그 메뉴가 다른 공간에 위치하게 됩니다. 하지만, 자주 쓰는 메뉴의 경우는 상단의 메뉴바에 있는 것이 일반적이죠. 이것은 블로그 뿐만 아니라 홈페이지나 어플리케이션에도 대게 기본적으로 보여지는 구성입니다.

각설하고 이 빈공간을 메뉴바로 채워보겠습니다. 메뉴바를 만들기 위한 방법은 크게 두가지로 나눌 수 있습니다.

1) 이미지 버튼을 만들어 메뉴바를 구성하는 방법.
2) 텍스트로 메뉴바를 구성하는 방법.

이미지를 만들어 메뉴바를 구성하는 방법은 다음 포스트를 참고로 하시면 됩니다.

Step.02 티스토리 스킨 Life in Mono, 검색창과 메뉴변경 by 티비, 티비의 세상구경

텍스트로 메뉴바를 구성하는 방법은 다음 포스트를 참고하시면 되겠구요.

☞ [CSS 예제] 마우스오버 효과 메뉴 만들기(가로) by 용의자, BLOG*SUSPECT

두가지 방법 모두 기본은 같습니다. 일단, skin.html에서 기존의 메뉴바를 삭제하고 새로운 메뉴바를 구성한 다음, 메뉴바의 스타일을 style.css에서 지정해주는 것이죠. 먼저 skin.html을 편집하러 가시죠. 물론, 이번에도 skin.html 백업을 받아두시는 것이 좋습니다.

  <div id="header">
    <div class="head-container">
      <!-- 블로그제목 -->
      <h1><a href="https://elros.tistory.com/" title="별바다의 서고">별바다의 서고</a></h1>
      <!-- 블로그메뉴 -->
      <div id="blogMenu">
        <ul>
          <!-- 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. -->
          <li class="tab_home"><a href="https://elros.tistory.com/" title="Home">Home</a></li>
          <li class="tab_tag"><a href="https://elros.tistory.com/tag" title="Tag">Tag</a></li>
          <li class="tab_media"><a href="https://elros.tistory.com/media" title="MediaLog">MediaLog</a></li>
          <!-- <li class="tab_location"><a href="https://elros.tistory.com/location" title="LocationLog">LocationLog</a></li> -->
          <!-- <li class="tab_key"><a href="https://elros.tistory.com/keylog" title="KeyLog">KeyLog</a></li> -->
          <li class="tab_guestbook"><a href="https://elros.tistory.com/guestbook" title="Guestbook">Guestbook</a></li>
          <li class="tab_admin"><a href="https://elros.tistory.com/manage" title="Admin">Admin</a></li>
          <li class="tab_write"><a href="https://elros.tistory.com/manage/entry/post" title="Write">Write</a></li>

        </ul>
      </div>
      <div id="searchbar">
        <div class="searchbar-left"></div>
        <div class="searchbar-container">
          <!-- 검색바에서 블로그 메뉴가 위치할 부분 -->

          <!-- 카운터 모듈 -->
          ...(중략)

진한 청색으로 표시된 부분이 현재 메뉴바를 정의한 부분입니다. 새롭게 검색바에 메뉴바를 넣게 되면 이 부분은 필요하지 않게 되겠죠. '<!--'과 '-->'를 사용하여 한 라인씩 주석처리를 해줍니다.(지워도 무방하지만 후일 필요할지도 모르니 일단 주석처리) 검색창을 사이드바로 옮기고 상단 좌측의 메뉴바 탭을 주석처리하면 다음과 같이 됩니다.


searchbar div 태그가 검색바에 해당하는 곳입니다. 이곳에 새로운 메뉴바를 구성하면 됩니다. 얼마전 '블로그의 검색창을 사이드바로 옮기기'에서 설명했던 검색창이 위치했던 곳이죠. 메뉴바를 다음과 같이 구성합니다.

<!-- 블로그 메뉴 -->
<div id="menuBar">
  <a href="https://elros.tistory.com/" title="메인 페이지로 이동">HOME</a>
  <a href="https://elros.tistory.com/tag" title="태그 페이지로 이동">TAG</a>
  <a href="https://elros.tistory.com/media" title="미디어 로그로 이동">MEDIA LOG</a>
  <a href="https://elros.tistory.com/guestbook" title="방명록으로 이동">GUEST BOOK</a>
  <a href="https://elros.tistory.com/manage" title="관리자 페이지로 이동">ADMIN</a>
  <a href="https://elros.tistory.com/manage/entry/post" title="포스팅 하기">WRITE</a>
</div>

일단은 각각의 메뉴를 이동하기 위해서 <a href...></a> 태그를 사용했습니다. 일단은 기본 텍스트로 메뉴를 구성했는데요. 메뉴에 맞는 이미지를 만들어 각각의 메뉴로 구성하기 위해서는 <img src="이미지 경로"> 태그를 사용하시면 되겠습니다. 만들어진 이미지는 자신의 블로그에 비공개 포스트 등으로 저장하신 다음, 마우스 우클릭으로 이미지 경로를 복사해주시면 되구요.

좀 더 발전된 메뉴를 만들기 위해서는 위에서 말씀 드린 티비님의 포스트를 참조하시도록 하구요. 제 경우에는 용의자님의 마우스 오버효과를 주는 텍스트 메뉴로 구성을 해보았습니다. 자세한 내용은 위에 링크한 용의자님의 포스트를 참조하시면 되겠습니다. skin.html의 구성은 위의 내용과 동일합니다. 스타일을 지정해주는 style.css의 경우에는 다음과 같습니다.

/* 메뉴바 */
#menuBar a{
                display:block;
                margin: 5px 0px 0px 0px;
                padding:5px 10px 5px 10px;
                margin-right:0px;
                background-color:#515151;
                color:#BBB;
                font:10px Verdana;
                text-transform:uppercase;
                float:left;
}

#menuBar a:hover{
                 padding-bottom:5px;
                 border-bottom:2px solid #FF9900;
                 color:#FFF;
}

skin.html에서 메뉴바 태그의 id인 menuBar에 대한 특성값을 이 style.css에서 지정해줍니다. #menuBar a {...}의 margin이 외부 여백을 지정해주는 부분이고, padding이 내부여백, 즉 메뉴의 크기를 지정해주게 됩니다. margin 값은 좌측부터 차례대로 상단, 우측, 하단, 좌측 순입니다. Life in Mono 스킨의 경우에는 상단에 5px 정도의 여백을 주면 좋은 듯 하군요. padding 역시 좌측부터 상단, 우측, 하단, 좌측의 값을 의미합니다. 

메뉴를 구성하면서 생기는 문제는 바로 배경색입니다. 기존의 Life in Mono 스킨의 검색 바의 배경색을 알아내지 못한다면 일일이 수동으로 입력하면서 값을 맞춰줘야 합니다. #505050~#515151 정도의 값이 검색 바의 색과 가장 비슷한 값인 것 같네요. 단, 이 값은 브라우저의 종류에 따라 차이가 있습니다. 익스플로어에서는 괜찮지만 크롬 브라우저에서는 좀 짙게 나오더군요. 이러한 문제를 해결하기 위해서는 검색 바 역시 조정이 필요할 것 같네요. 이 설정을 적용한 메뉴는 아래와 같습니다.


검색바의 모양이나 색이 마음에 들지 않으신다면, 자신의 스타일에 맞게 변경하는 것도 좋은 방법입니다. 검색바는 좌측과 우측 그리고 중앙에 해당하는 세 이미지로 구성되어 있으며, skin.html을 통해 각각 searchbar-left, searchbar-container, searchbar-right로 구별이 되어 있는데요. 텍스트바로 메뉴를 구성했으니 이 검색바도 이미지가 아닌 HTML 태그만으로 한 번 만들어보도록 하겠습니다.

기존의 skin.html을 건드리지 않고 style.css만을 바꾸어보도록 하겠습니다. searchbar를 찾습니다.

#searchbar {clear:both; }
#searchbar .searchbar-left, #searchbar .searchbar-right {float:left; height:41px; background-repeat:no-repeat; }
#searchbar .searchbar-left {width:9px; background-image:url(images/searchbar_left.png); }
* html #searchbar .searchbar-left {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_left.png', sizingMethod='crop');
}

#searchbar .searchbar-right {width:9px; background-image:url(images/searchbar_right.png); }
* html #searchbar .searchbar-right {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_right.png', sizingMethod='crop');
}
#searchbar .searchbar-container {float:left; width:/*@post-width:249=*/929px/*@*/; height:41px; background:url(images/searchbar_mid.png) repeat-x; } /* 검색바 폭 = 포스트 폭 + 249 */
* html #searchbar .searchbar-container {
width:/*@post-width:249=*/929px/*@*/;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_mid.png', sizingMethod='scale');
}

대강 네 부분으로 설정이 나뉩니다. 전체 검색바(searchbar) 설정과 검색바 왼쪽/오른쪽 공통설정, 검색바 왼쪽 부분 설정, 검바 오른쪽 부분 설정, 마지막으로 검색바 중앙부분 설정. 여기서 전체 검색바 설정을 제외하고 나머지 부분을 주석처리 해줍니다. style.css에서는 주석처리할 앞부분에 '/*'를 입력하고 '*/'를 주석처리가 끝나는 부분에 입력하면 해당부분이 주석처리되어 설정에 영향을 미치지 않습니다. 그리고 새로운 검색바 설정을 다음과 같이 입력합니다.

#searchbar {clear:both; }

#searchbar .searchbar-left {float:left; width:9px; height:42px; background:#000000;}
#searchbar .searchbar-right {float:left; width:9px; height:42px; background:#000000;}
#searchbar .searchbar-container {float:left; width:929px; height:42px; background:#000000;}

/* 이전 설정을 주석처리
#searchbar .searchbar-left, #searchbar .searchbar-right {float:left; height:41px; background-repeat:no-repeat; }
...(중략)
(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_mid.png', sizingMethod='scale');
}*/

검색바의 높이는 자신의 스타일에 맞게 늘이거나 줄이시기 바랍니다. 물론, 앞서 설정한 메뉴항목에 맞춰 지정해주는 것이 좋겠죠. 폭 역시 기존의 설정을 그대로 사용합니다. 바뀌는 것은 기존의 설정이 이미지를 쓰는 것이 아닌 배경색을 지정해주는 것으로, 제 경우에는 검은색으로 지정해줬습니다. 당연히 앞서 설정한 메뉴항목의 배경색도 검은색으로 해줘야 겠네요. 내부여백이나 외부여백도 조정해줄 필요가 있겠습니다. 설정을 적용하면 다음과 같이 바뀝니다.


말씀드린 방법을 사용하여 자신만의 메뉴를 구성해보시기 바랍니다. 텍스트 메뉴바는 화려하지는 않지만 깔끔한 레이아웃이 가능하기 때문에 메뉴바 외에도 블로그의 여러 부분에 응용이 가능할 것 같습니다. 물론 좀 더 멋진 디자인으로 꾸미시고 싶으신 분들은 이미지를 사용하시는게 좋겠지요.


반응형

+ Recent posts