#11. 티스토리 스킨 상단바 만들기 2탄

지난번에 만든 티스토리 스킨 상단바는 정말 너무 안이뻐서 참을수가 없었다. 노력한게 아까워서 그냥할까싶다가도, 그래도 이왕하는거 제대로 예쁘게 해보자는 생각에 상단바 디자인을 변경하게 되었다.

티스토리 스킨 상단바 만들기

완전히 새로운 스타일이다. 구버전과 신버전을 이미지로 만나보도록 하자.

이것은 구버젼이다. 보다시피, 카테고리가 상단바에도 있지만 좌측에도 따로 메뉴로 만들어놓았다. 굳이 이럴 필요가 없다고 판단했고, 또 상단바에 적용했던 navbar이나 dropdown형식의 부트스트랩 기능이 생각보다 예쁘게 표현되지 않았기 때문에.......

아래와 같이 좀 더 깔끔하게 가져가기로 결정하였다.

그냥 심플하게 상단바를 만들기로 했다. 부트스트랩을 토대로 하는 것인만큼, 철저히 부트스트랩처럼 느껴지는 블로그로 만들기로 결정. 이런 상단바는 가장 기본적인 Navbar 형식이기 때문에... 아래와 같이 코드를 작성해주면 된다.

보다시피 부트스트랩 홈페이지에서 코드를 풀로 제공해주고 있다. 메뉴를 더 추가하고 싶다면 해당 부분의 코드만 복붙으로 더 추가해주면 되는 구조. 간단히 수정해서 적용한 티스토리 페이지의 모습은 다음과 같다.

부트스트랩 페이지와 동일한 형식의 Navbar가 만들어졌다. 여기다가 지금까지 해왔던 여러가지 살을 붙이기만 하면 된다. 먼저 sticky-top 태그를 통해서 상단바를 스크롤에 관계없이 위쪽에 고정시키고, 배경색과 투명도를 지정해주면 된다.  각 메뉴별 항목은 위 소스에서 텍스트 부분만 바꿔주면 되고, 각각의 카테고리 링크를 넣기 위해서는 href 다음에 있는 # 표시에 웹주소를 넣어주면 된다.

Nav코드의 가장 윗부분만 아래와 같이 수정해주면 되는데, rgba에 원하는 배경색상과 투명도를 지정해주면 된다.

    <nav class="navbar sticky-top navbar-expand-lg navbar-light" style="background-color: rgba(248,249,250,0.95);">

자... 이제 스크롤을 내리면 상단바는 위쪽에 고정되면서, 필자가 원하는 색상과 투명도를 가지게 되었고, 카테고리도 지정할 수 있었다. 이제 남은 일은 우측에 있는 search box형태를 티스토리와 연동시키는 과정이다.

Search Box 티스토리에 적용시키기

위 부트스트랩에서 제공하는 기본 소스에 일단 search box같은 input form이 존재한다. 하지만 저기에 검색하고, 검색버튼을 누른다고해서 티스토리 내 검색이 되지는 않을 것이다. 왜냐하면 티스토리와 연동된 코드가 전혀~ 없기 때문이다. 따라서 우리가 할일은 위 search box에 해당하는 코드 부분에, 티스토리 치환자 등을 넣어주는 것이다.

일단 티스토리 가이드에서 제공하는 "검색" 코드는 다음과 같다.

보다시피, 다양한 형태의 치환자를 제공하는데, 일단 현재 부트스트랩에서 가진 코드와 비교를 해보면..

부트스트랩 코드

  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>

보다시피, 2줄로 작성된 코드이고 각각은 다음과 같다.

<input>: 사용자가 텍스트를 입력하는 검색창

<button>: 버튼 형태로, 이걸 누르면 검색이 시작됨.

티스토리 치환자 4개 중에, 설정하는 방식은 각각 다음과 같다.

<input>: search_name, search_text

<button>: search_onclick_submit

즉, 인풋으로는 검색입력박스와 검색어를 연동시키고, 버튼에는 온클릭 이벤트를 연동시킨다. 여기서 온클릭 이벤트란, 사용자가 버튼을 눌렀을 때 검색이 되도록 해주는 구문이라고 생각하면 된다.

따라서 최종 코드는 다음과 같다.

          <form class="form-inline my-2 my-lg-0">

            <s_search>

              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="" value="" onkeypress="if (event.keyCode == 13) { }"/>

              <button class="btn btn-outline-success my-2 my-sm-0" type="submit" onclick="">GO</button>

            </s_search>

          </form>

완성된 페이지의 모습은 다음과 같다.

자 여기까지해서 상단바 만들기 제 2탄 포스팅이 끝이났다. 교훈이 있다면, 너무 창의적으로 하려하지 말고 그냥 부트스트랩에서 제공하는 기능을 잘 사용하라는 것 정도... 디자이너가 아니니, 뭔가 어렵게 구현해도 예쁘지가 쉽지가 않더라.

이제 상단바를 꾸몄으니, 다음 포스팅에서는 하단바를 꾸며보도록 하자. 필자는 최대한 첫 인상이 심플한 것을 추구하기 때문에, 모든 메뉴와 각종 잡동사니들은 하단에 내려놓을 생각이다. 따라서 티스토리 치환자와 부트스트랩의 grid구조를 잘 써야할 것 같은데........ 아무튼 다음 포스팅에서..