반응형

검색바의 검색창을 사이드 바로 옮기고 싶다면...



스토리 블로그의 스킨 중 Life in Mono를 포함한 많은 스킨들은 상단의 검색 바에 검색창이 위치하고 있습니다. 이러한 구성은 검색창을 우선적으로 블로거들이나 방문자들에게 노출시키는 점에서는 유용하지만, Life in Mono 스킨처럼 우측에 방문자 카운트가 위치하고 블로그 메뉴가 별도로 나와 있는 경우, 블로그 메뉴를 검색 바에 포함시켜 메뉴바처럼 사용하고 싶은 블로거들에게는 제약사항이 될 수도 있습니다.

이번 시간에는 이 검색창의 위치를 변경시키는 방법 중, 많은 블로그 레이아웃에 적용된 사이드바에 검색창을 옮기는 방법에 대해서 이야기해볼까 합니다.

포탈 사이트의 검색창처럼 상단의 타이틀 바에 검색창을 옮기고 싶은 분들은 티비님의 포스트를 참조하세요.

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

검색바에 삽입되어 있는 검색창은 skin.html에서 찾을 수 있습니다. skin.html에서 다음 부분을 찾아보세요.

<s_t3>
  <div id="header">
    <div class="head-container">
      <!-- 블로그제목 -->
      <h1><a href="https://elros.tistory.com/" title="별바다의 서고">별바다의 서고</a></h1>
      <!-- 블로그메뉴 -->
      <div id="blogMenu">
      ...(중략)
      </div>
      <div id="searchbar">
        <div class="searchbar-left"></div>
        <div class="searchbar-container">
          <!-- 검색 모듈 -->
          <div id="searchBox">
            <s_search>
              <label for="search">search</label>
              <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
              <input value="검색" type="button" onclick="" class="submit"/>
            </s_search>
          </div>

          <!-- 카운터 모듈 -->
          <div id="counter">

블로그 제목과 블로그 메뉴에 대한 태그가 끝난 후에 검색바 태그가 시작됩니다. 검색 창은 '<!-- 검색 모듈 -->' 주석부터 시작되는 searchBox id를 가진 <div> 태그 안에 위치하게 됩니다. 바로 이 부분을 원하는 사이드 바 위치에 옮기면 되는 것이죠. 이 영역을 잘라내어 아래와 같이 사이드바 영역에 옮기도록 하겠습니다. 물론, 이 작업을 위해서 skin.html을 별도의 메모장 등에 백업해두는 것이 좋습니다.

        <s_sidebar_element>
          <!-- 블로그 설명 모듈 -->
          ...(중략)
        </s_sidebar_element>
        <s_sidebar_element>
          <!-- 검색 모듈 -->
          <div id="searchBox">
            <s_search>
              <label for="search">search</label>
              <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>
              <input value="검색" type="button" onclick="" class="submit"/>
            </s_search>
          </div>

        </s_sidebar_element>
        <s_sidebar_element>
          <!-- 카테고리 모듈 -->

사이드바 영역은 skin.html에서 <s_sidebar_element> 태그로 설정되어 있습니다. 오려내기한 검색창 역시 이 태그에 넣어주면 될 것 같군요. 사이드바 구성요소 사이에 아무 위치에나 일단 <s_sidebar_element> 태그를 만들고 오려낸 검색창 태그를붙여넣기 해줍니다. 여기까지하면 일단 사이드바에 검색창이 생기는 것까지는 성공하게 됩니다.

지만, 아직 몇가지 문제가 남아 있습니다. 일단, 이렇게 사이드바에 검색창을 추가하게 되면 블로그의 사이드바  설정은 기존과는 다르게 변하게 됩니다. 위젯이나 광고 스크립트와 같이 유저가 직접 추가한 모듈이나 외부에서 가져온 위젯들은 그대로 있지만, 사이드바 기본 모듈의 경우에는 자신이 설정했던 위치와는 달리 초기화되는 상황이 발생합니다. 이것은 새로운 검색창이 사이드바 모듈에 추가되면서 생긴 현상인데요. 당황하지 마시고 먼저 skin.html의 변경된 설정을 저장한 다음 관리자 메뉴→스킨→사이드바 설정으로 가서 다시 위치 조정을 하시면 되겠습니다. 여기서 새로 추가한 검색창 모듈을 확인할 수 있습니다.


사이드바 설정까지 조정을 마치면 이제 검색창은 사이드바에 어느 정도 성공적으로 옮겨지게 됩니다. 다음이 옮겨진 검색창의 모습입니다.


여기까지 하면 1차적으로 검색창을 사이드바로 옮기는 것은 마무리됐습니다. 이제 검색창의 모양을 자신의 스타일에 맞게 변경을 시켜주기 위해 style.css를 수정합니다. searchBox id를 찾습니다.

/* 검색 */
#searchBox {float:left; margin-top:9px; padding-left:64px; background:url(images/txt_search.gif) no-repeat 7px 3px; }
#searchBox label {display:none; }
#searchBox input {
 width:160px;
 height:14px;
 border:1px solid #9A9A9A;
 background-color:#515151; 
 color:#000000;
 vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */
 position:relative;
 cursor:pointer;
}
#searchBox .submit {
 width:22px; 
 height:16px;
 border:0px;
 background:url(images/btn_search.gif) no-repeat;
 text-indent:-5000px;
 overflow:hidden;
 vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */
 position:relative;
 cursor:pointer;
}

searchBox의 설정은 위와 같이 구성되어 있습니다. 먼저 정렬방식은 float:left로 되어 있군요. 상단의 외부여백은 9px의 왼쪽의 내부여백이 64px로 설정이 되어 있습니다. 백그라운드를 image/txt_search.gif로 설정하고 있네요. 검색창의 왼쪽에 위치한 아이콘과 search 텍스트가 이 txt_search.gif에 해당되겠습니다.

검색창의 입력창은 폭이 160px, 높이가 14px로 설정되어 있습니다. 원래 검색 바에 맞추기 위한 값이었지만, 이제 사이드바로 옮겨온 이상 너무 작은 크기일지도 모르겠네요. 취향에 맞춰 폭과 높이를 조절해주면 되겠습니다. 외곽선(border)과 검색창의 배경색(background-color)도 조정할 수가 있네요. 아래의 #searcBox .submit {...}에는 우측의 검색버튼에 대한 설정이 지정되어 있습니다. 

이러한 설정들을 제 블로그에 맞게 1차적으로 수정한 설정은 아래와 같습니다.

/* 검색 */
#searchBox {float:left; margin-top:5px; margin-bottom:5px; padding-left:5px; no-repeat 7px 3px; }
#searchBox label {display:none; }
#searchBox input {
 width:240px;
 height:20px;
 border:1px solid #9A9A9A;
 background-color:#FFFFFF
 color:#000000;
 vertical-align:middle; /* 검색창과 버튼 정렬이 안맞을 때 필수 */
 position:relative;
 cursor:pointer;
}

먼저 좌측에 표시되던 배경이미지를 삭제하면서 좌측의 여백(padding-left)을 줄이고 아래의 위젯과의 여백을 주기 위해 margin-bottom 값을 주가로 지정해주었습니다. 그에 맞춰 입력창의 폭과 높이도 조절하고 색도 흰색(#FFFFFF)로 지정해주었구요. 이렇게 수정을 거쳐 만들어진 검색창은 다음과 같이 보여집니다.


이제 어느 정도 검색창의 설정의 마무리가 된 것 같군요. 물론, 여기서 좀 더 수정을 할 수도 있습니다. 우측의 검색 버튼의 경우 크기가 조정된 검색창과 잘 어울리지 않는 모양입니다. 웹 상에서 무료로 제공하는 적절한 버튼 이미지를 구하거나 자신이 이미지를 만들어 'background:url(images/btn_confirm2.gif)' 와 대체시켜주면 됩니다. 관리자 메뉴→스킨→HTML/CSS 편집 페이지에서 'HTML/CSS 편집' 탭버튼 우측에 있는 '파일 업로드' 탭버튼을 누르시면, images/btn_confirm2.gif를 찾으실 수 있습니다. 이 이미지 대신 자신이 만든 버튼이미지를 업로드 하고 다시 style.css에서 버튼 이미지 경로를 자신이 업로드한 이미지로 바꿔주시면 됩니다. 간단하게 말하면,

background:url(images/btn_confirm2.gif)를 background:url(images/자기가 업로드한 버튼 이미지 파일명)으로 바꿔주시면 되겠습니다. 물론, 올린 버튼 이미지의 가로 세로 폭에 맞춰 style.css에 있는 #searchBox .submit {...} 설정의 버튼 폭과 높이를 바꿔주는 것을 잊지 마시구요. 이렇게까지 하면 다음과 같이 검색창이 완성됩니다.


이렇게 해서 간단...(한가요?)하게 검색창을 사이드바로 옮기는 방법을 알아보았습니다. 이제 검색바의 왼쪽에 여유공간이 생기게 되었군요. 여기에 메뉴바의 버튼들을 위치시키면 되겠습니다. 이 부분은 다음 포스트에서 다루도록 하겠습니다.


반응형

+ Recent posts