Section 9 - 티스토리 반응형 스킨 만들기 - 검색결과 목록

이번섹션은 검색결과 목록, 검색결과 댓글 목록을 화면을 만듭니다.

검색결과란?

검색결과는 내 블로그내에 어떤게 있는지 검색하면 나오는 목록(리스트)입니다.
검색결과에는 글 목록과 키워드에 해당하는 댓글 목록을 출력합니다.

검색은 스킨의 우측 상단의 검색 폼을 이용하면 검색이 가능하겠죠?
아무 키워드나 입력하고 검색버튼을 누르면 블로그 주소 뒤에 "http://noo9ya.tistory.com/search/검색어" 이렇게 주소가 변환 됩니다.
여기서 "검색어"라는 검색어를 검색하면 search페이지로 이동해서 "검색어"에 대한 결과를 출력해줍니다.
우리는 그 검색 페이지를 코딩하면 되는 것이죠.

본격적으로 만들어 봅니다.

STEP 1. skin.html 검색 결과 치환자 넣기

<div id="content">안에 우리가 기존에 

<div class="searchList">11. 검색 결과 리스트</div>
<div class="searchRplist">12. 검색 결과 댓글 리스트</div>

이 두개의 div을 만들어 뒀습니다.
이게 바로 검색결과를 출력할 영역이므로 글 리스트 치환자와 댓글 리스트의 치환자로 영역을 둘러 쌓면 끝.

※ 검색결과 댓글은 테스트 해보니 동작을 안하므로 12. 검색 결과 댓글 리스트는 삭제합니다.

 

skin.html Before

skin.html Before

1 2	<div class="searchList">11. 검색 결과 리스트</div> <div class="searchRplist">12. 검색 결과 댓글 리스트</div>

skin.html After

skin.html After

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<s_list>     <!-- 검색 결과 글 목록 시작 -->     <div class="search-list">         <h3>''에 해당되는 글 건</h3>         <ol class="search-item">             <s_list_rep>                 <li>                     <p class="date"></p>                     <a href="http://noo9ya.tistory.com/admin/entry/post/"> <span class="cnt">5</span></a>                                         </li></s_list_rep></ol>     </div>     <!-- //검색 결과 글 목록 종료 --> </s_list>

 

style.css

style.css After

1 2 3 4 5 6 7 8 9 10 11

/* *********************************************************************    Search List    ****************************************************************** */ .search-list {} .search-list h3 {padding:20px 0; color:#111; font-size:2em; font-weight:normal} .search-item {margin:10px 0 10px 6px; border-top:1px solid #ddd} .search-item li {padding:20px 0; border-bottom:1px solid #e9e9e9} .search-item li .date {color:#999; font-size:0.825em} .search-item li a {color:#555; font-size:1.25em} .search-item li a:hover, .search-item li a:active, .search-item li a:focus {color:#ff8149; text-decoration:none} .search-item li a .cnt {color:#ff8149}

스타일쉬트에 Search List 관련 코드 추가(디자인은 각자 알아서 수정하셔도 됩니다.)

 

이렇게 작업하면 검색결과 목록 끝. 아래와 같은 결과를 얻으실 수 있습니다.

 

 

※ 요즘에는 검색리스트를 글 목록으로 대체하고 있습니다.
검색을 하면 결과물이 글 목록과 똑같이 나온다는 거죠. 하지만 이런 방법으로 검색 목록을 만들 수 있다는 예제입니다.
추후 검색 목록부분을 삭제하고 글 목록으로 대체할 수 있습니다.

 

추후 진행되는 티스토리 반응형 스킨 만들기 프로젝트는 github 저장소에 저장이 됩니다.
소스는 https://github.com/nOo9ya/tistory-one 에서 다운 받을 수 있습니다.
변경 된 소스들이 있으니 참고하세요~