[티스토리 팁 #3]티스토리 반응형 블로그 스킨 '#1' 검색창 수정하기

현재 티스토리의 반응형 웹 스킨인 '#1'을 사용중인데, 

아랫 사진에서 보이는 검색창으로 검색을 하면 목록이 뜨지 않는 문제가 있어서 이를 해결해보고자 합니다.

(검색어와 검색되는 글의 갯수만 뜨는 것으로 파악되네요..)

티스토리 블로그 반응형 스킨 '#1' 검색창 문제 해결하기

1. 먼저 티스토리 관리자로 와서 HTML 확인

티스토리 관리자로 들어가서 HTML/CSS로 들어갑니다. 그 중에서도 HTML로 들어가서 ctrl+f 를 통해 's_list' 혹은 'area_list' 를 찾아줍니다.

그러면 아래와 같은 부분이 나오게 되는데, 기존에는 세 줄 정도의 짧은 코드로 되어 있을 겁니다. 

제가 추가한 코드를 넣게 되면, 목록이 출력될 수 있는 틀은 잡게 된 것입니다. (각 부분에 대해 자세한 사항이 궁금하시면 답글로 알려주세요:))

작성 코드 :

<div class="search_result">

<h3>''에 해당되는 글 건</h3>

<ol>

<s_list_rep>

<li>

<span class="date"></span>

<a href=""></a>

<span class="cnt">1</span>

</li>

</s_list_rep>

</ol>

</div>

2. CSS 작성을 통해 리스트가 출력되는 모습 꾸미기

목록이 보이도록 뼈대를 구축했으니 이제 보기 좋도록 꾸미는 작업이 필요합니다. 

HTML 옆의 CSS 화면으로 들어가서 마찬가지로 'area_list' 로 검색해 줍니다. 

아래의 코드를 추가해주면 조금은 볼만한 화면이 나오는 것을 확인해 볼 수 있습니다.

(사실 저 부분 코드에는 필요없는 부분도 있고, 반응형 웹을 위해서는 조금 수정해야 할 부분도 있지만... 추후 관련 내용을 더 공부해서 덧붙이겠습니다.)

작성 코드 :

.area_list .search_result{margin-top:80px; margin-left:40px; width: 50%; left:25%; line-height:80px; text-align:left}

.area_list .search_result{font-size:20px; font-weight:bold;color:#3db39e}

.area_list .search_result:hover{text-decoration:none}

3. 검색창을 사용하여 원하는대로 나오는지 확인하기

'블로그' 라는 검색어를 통해서 다음과 같이 글 목록이 잘 검색되는 것을 확인해 볼 수 있습니다.

글자 크기나, 목록간 간격 등은 원하시는대로 또 따로 조정해주시면 되겠습니다.

이상 #1에서 발생하는 검색창 문제를 해결한 포스팅이었습니다.