16. 티스토리 스킨 만들기 검색 결과 리스트

오늘 알아볼 부분은 컨텐츠 영역의 검색 결과 리스트입니다.

먼저 사이드바의 검색 기능을 꺼내주신 후, 글을 아무거나 적고 그 글을 검색해줍니다.

저의 경우엔 123이란 글이 있기 때문에 123을 검색했습니다.

검색이 되셨다면 이렇게 '검색어'에 해당되는 글 몇건 하고 나올껍니다.

제 경우엔 여러개를 적어놔서인지 4건이 나오네요.

오늘 수정 할 검색 결과 리스트가 바로 이 부분입니다.

      <s_list>

      <div class="searchList">

        <h3>'[ ##_list_conform_##]'에 해당되는 글 [ ##_list_count_##]건</h3>

        <ol>

          <s_list_rep>

          <li>

            <span class="date">[ ##_list_rep_regdate_##]</span>

            <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>

이게 HTML 코드 부분입니다.

제가 이전 포스팅에 올려놓은 skin.txt에 있는 코드를 복사하셨다면, content 영역 내부의 맨 위에 바로 있으실꺼에요.

그럼 CSS를 수정해볼까요?

#content {width:780px;background:#d7dadb;float:right;padding:10px;}

.searchList a {color:#0088CC;font-weight:bolder;text-decoration:none;}

.searchList a:hover {color:#333;}

.searchList h3 {margin-bottom: 10px;}

.searchList .cnt {font-size:11px;}

.searchList li {font-size:14px;list-style:none;}

설명 해드리겠습니다.

먼저 content 영역을 포함 시킨 이유는 width와 padding이 바뀌었기 때문입니다.

padding 값을 조금 주지 않으면 글과 content 영역이 딱 달라붙어서 보기 불편하다는걸 잊고있었나보네요.

padding:10px을 줬고, padding에서 좌 10px 우 10px 총 20px만큼을 width값에서 빼줬습니다.

그 다음으로는 .searchList입니다.

이게 검색 결과 리스트 부분인데요.

.searchList 내부의 a태그를 사용하는걸 글에 해당되는 부분 하나 뿐이기 때문에 이 부분의 색, 굵기, 밑줄 등을 수정했습니다.

#0088CC는 하늘색과 비슷한 색이구요. font-weight:bolder로 글을 굵게, text-decoration:none으로 기본 밑줄이 있는 a태그의 밑줄을 없앴습니다.

a:hover의 경우엔 마우스를 가져다 댈 경우 a 태그의 색이 #333의 색으로 변하게 했구요.

.searchList h3은 아래와 띄어주기 위해 margin-bottom:10px을 줬습니다.

.cnt는 글에 존재하는 댓글의 갯수입니다.

위쪽 사진에서 (3)이라고 적힌게 하나 있죠?

그 글씨의 크기를 11px로 했습니다.

마지막으로 li부분의 글씨 크기를 14px로 바꾸고, list-style이 사이드바 쪽으로 넘어가 버린걸 알 수 있는데요.

넘어간 것을 list-style:none 속성으로 아예 없애줬습니다.

수정이 끝난 상태의 검색 결과 리스트입니다.

점점 수정할 영역이 늘어나네요 ㅠㅠ

생각한 것보다 수정할 부분이 많아서 힘들어요~!

궁금한 부분은 댓글에 남겨주세요!