웹 반응형 스킨 검색 결과 보기 좋게? 깔끔하게 목록 스타일 바꾸기

마크 쿼리 웹 반응형 검색 결과도 깔끔하게 변경

Spider’s Web 3.0.5 기준으로 작성했습니다.

쉽게 생각해서 검색창이나 태크 목록 등을 눌러서 검색될 때 기본 스타일에서 좀 더 깔끔하게? 바꾸는 방법입니다.

위 그림처럼 보이는 것을 몇 가지를 추가해서 바꾸는 겁니다.
바꾸고 나면 쉽게 사이드바에 카테고리에 마우스 올렸을 때 스타일처럼 바뀌는 거예요.

참고로 *#은 ##으로 생각하세요 티스토리 치환자라 표시가안되서 바꾼겁니다.

<s_list>
<div class="search-list">
	<p>'[*#_list_conform_##]'에 해당되는 글 [*#_list_count_##]건</p>
	<ol>
	<s_list_rep>
	<li>
	<time class="updated" datetime="[*#_list_rep_regdate_##]">[*#_list_rep_regdate_##]</time>
	<a href="[*#_list_rep_link_##]">[*#_list_rep_title_##]</a>
	<span class="cnt">15</span>
	</li>
	</s_list_rep>
	</ol>
</div>
</s_list>

<s_rplist>
<div class="search-list">
	<p>'[*#_rplist_conform_##]'에 해당되는 댓글 [*#_rplist_count_##]건</p>    
	<ol>
	<s_rplist_rep>
	<li>
	<time class="updated" datetime="[*#_rplist_rep_regdate_##]">[*#_rplist_rep_regdate_##]</time>
	<a href=""></a>
	<span class="cnt"></span>
	<span class="name"></span>
	</li>
	</s_rplist_rep>
	</ol>
</div>
</s_rplist>

<s_list>와 <s_rplist> 이 부분을 찾습니다.
여기에서 <div class="search-list">와 <div class="search-list">에 -inner를 추가해서 <div class="search-list-inner">, <div class="search-list-inner"> 이렇게 만듭니다.

skin.html

<s_list>
<div class="search-list-inner">
	<p>'[*#_list_conform_##]'에 해당되는 글 [*#_list_count_##]건</p>
	<ol>
	<s_list_rep>
	<li>
	<time class="updated" datetime="[*#_list_rep_regdate_##]">[*#_list_rep_regdate_##]</time>
	<a href="[*#_list_rep_link_##]">[*#_list_rep_title_##]</a>
	<span class="cnt">[*#_list_rep_rp_cnt_##]</span>
	</li>
	</s_list_rep>
	</ol>
</div>
</s_list>
<s_rplist>
<div class="search-list-inner">
	<p>'[*#_rplist_conform_##]'에 해당되는 댓글 [*#_rplist_count_##]건</p>    
	<ol>
	<s_rplist_rep>
	<li>
	<time class="updated" datetime="[*#_rplist_rep_regdate_##]">[*#_rplist_rep_regdate_##]</time>
	<a href="[*#_rplist_rep_link_##]">[*#_rplist_rep_body_##]</a>
	<span class="cnt">[*#_rplist_rep_rp_cnt_##]</span>
	<span class="name">[*#_rplist_rep_name_##]</span>
	</li>
	</s_rplist_rep>
	</ol>
</div>
</s_rplist>

그리고 CSS 추가를 해야 돼요.

/* search list
-------------------------------------------------- */
.search-list{
  margin:20px 0;
  padding:10px 0;
  border-bottom:1px solid #ccc;
}

/* search list 부분을 찾아서 아래 코드를 .search-list{..}이 부분을 지우고 붙여 넣으며 됩니다.
이렇게 수정하고나면 아래 그림처럼 카테고리에 목록을 보는것처럼 바끼게 됩니다.

style.css

.search-list{
  margin:0; 
  padding:0;
  font-size:18px;
}
.search-list-inner {
  margin-top:40px;
  padding:0;
  text-align: left;
}
.search-list-inner ol {
  margin:0;
  padding:0;
  list-style-type:none;
}
.search-list-inner ol li {
  display:block;
  padding: 10px 5px;
  font-size:12px;
  border-bottom: 1px solid #eee;
  -webkit-transition: background-color .7s;
  -moz-transition: background-color .7s;
  -o-transition: background-color .7s;
  transition: background-color .7s;
}
.search-list-inner ol li:hover {
  background-color: #10a4ff;      
}
.search-list-inner a {
  color:#333;
}
.search-list-inner a:hover {
  color:#fff;
}
.search-list-inner .cnt {
  color: #999;
  font-size:12px;
}

Download 검색목록바꾸기CSS.txt

수정하고 나면 이렇게 보이게 됩니다.
카테고리나 사이드바에 목록처럼 보이게 돼서 좀 더 일치되는 느낌이 되는 거 같습니다.

저는 검색 결과뿐만 아니라 모든 곳에 날짜를 표시 안 하게 해서 사용하고 있어요.
혹시나 필요한 분 있을까 해서 이것도 살짝 추가합니다.
<time class="updated" datetime="[*#_list_rep_regdate_##]">[*#_list_rep_regdate_##]</time> 이 부분을 삭제

Plus

정리해보면

검색 결과도 이렇게 수정하니 깔끔하게 수정된듯하네요.
깔끔하게 좋잖아요 ^^

그리고 아까 티스토리 공지 보니까;;
공감이랑 티스토리 메인 메이지도 바뀐다고 하니 이번 달 말은 좋은 결과가 있기를 ....