티스토리 레퍼런스 Poster 스킨 검색바 고정하기

반응형으로 모바일에 대응하도록 만들어진 티스토리 레퍼런스 스킨들 중 검색 버튼을 눌러야 검색 바가 펼쳐지고, 우측 상단에 검색 아이콘으로 붙박이 상태인 레퍼런스 스킨, 또는 레퍼런스 스킨을 수정해서 만든 스킨들은 모두 같은 방식으로 조정이 가능합니다.

검색 바를 펼침 상태로 블로그 타이틀 하단에 고정 시키는 방식이고, Poster(포스터) 스킨을 대상으로 합니다.

작업전 원본 skin.html 과 style.css 파일을 반드시 백업을 해놓으시기 바랍니다.

원복할 때 필요할 수 있습니다.

1. 검색바 펼침으로 고정하기

skin.html

에서

<div class="search">

을 검색해서

<div class="search on">

으로 " on" 을 추가하면 항상 펼침으로 고정됩니다.

2. 펼침으로 고정한 검색바 이동하기

skin.html 에서

<article id="content">

을 검색해서 그 밑에 새줄을 만들고 앞서 1번에서 펼침으로 고정했던

<div class="search on">

...

</div>

코드 블록 전체를 옮깁니다.

검색바를 위치할 만한 위치가 제약이 있기 때문에 이 위치 말고는 마땅한 위치가 없습니다. CSS 도 수정을 많이 해야하고...

style.css에서

먼저

"#header .search" 를 모두 검색해서 "#content .search" 로 모두 변경합니다.

이후에

"#content .search.on" 클래스를 찾아서 다음 CSS로 속성을 변경합니다.

검색하면 같은 클래스가 여러 개 나옵니다. 맨 처음 나오는 것은 데스크탑용이고, 하단부에 있는 것은 모바일 용이므로 구분을 잘해서 수정해야 합니다. 파일 전체 바꾸기를 하면 안됩니다.

처음 나오는 데스크탑용 CSS 1개만 바꾸는 겁니다.

스킨 원본으로는 252행입니다.

#content .search.on{
  width: 322px;
  border-bottom: 1px solid #000;
  text-align: center;
  margin: 0 auto 30px;
  position: relative;
  top: 0;
  right: 0;
}

원본 CSS는 다음과 같이 되어 있습니다.

#content .search.on {
  width: 322px;
  border-bottom: 1px solid #000;
}

모바일 화면은 다음 두 클래스를 찾아서 속성을 변경합니다.

추가가 아니고 기존 속성을 변경하는 겁니다.

스킨 원본 상으로는 

1810행, 1825행에 있습니다.

모바일 CSS가 1791행 밑에 위치하므로 그 밑에서 찾아야 하고 "767px" 로 검색하면 그 밑에 있는 CSS가 모바일용입니다.

#content .search.on{
  position: relative;
  top: 0;
}

#content .search.on button{
  top: 10px;
  right: 17px;	
}

정상적으로 수정이 되었으면 다음과 같이 검색바가 고정되어 보이게 됩니다.