티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시

이번 강에서는 카테고리나 태그를 클릭했을 때, 블로그 검색창에 검색했을 때의 결과화면과
그 아래의 페이지 표시 부분을 출력해보겠습니다.

이번에도 먼저 완성된 모습부터 보겠습니다. 아래 이미지를 클릭하세요.

* 검색결과

skin.html에 아래 소스를 삽입합니다. </s_guest>로 끝난 방명록 아랫줄에 삽입하시면 됩니다.
subject 레이어 안의 [샵샵_list_conform_샵샵]은 검색어(카테고리명,태그명) 치환자이고
count 레이어 안의[샵샵_list_count_샵샵]은 글의 갯수입니다.
두 레이어를 css에서 맨 위의 스크린샷 같이 가로로 정렬할 것이므로, 그 아래에 clear:both로 가로 정렬을 무효화 하는 레이어를 넣었습니다.

style.css에는 아래 내용을 삽입합니다.
이 정도는 따로 설명 안 해도 이제 유심히 보면 다 알 수 있는 내용이지요?
이로써 검색결과 리스트는 완료되었습니다.


이제 페이지 표시 부분을 만들 차례입니다.
1강에서 아래의 이미지 대로 스킨을 구상했습니다.

그러나 처음의 계획을 약간 수정했는데요, 아시다시피 copyright를 본문 레이어가 아닌 사이드바에 위치시켰고,
페이징 레이어는 본문 레이어와 따로 분리해서 그 아래에 두려고 합니다.
맨 위의 스크린샷을 보면 이해가 가실 거예요.

* 페이징

skin.html에서 페이징 레이어가 들어가야 할 부분은 사이드바 아래입니다.
페이지 전체 구성을 보시면 이해가 수월할거예요.


이제 skin.html에 아래 소스를 삽입합니다.
위 아래로 padding이나 margin값을 주면 페이징 레이어가 사이드바 레이어의 아래로 밀리게 되므로
대신 줄바꿈 태그인 <br />을 사용했습니다.
밑에서 세 번째 줄 <br />옆에 공백 태그인 &nbsp; 를 넣은 이유는 <br />이후에 내용이 없으면 아무런 공백이 생기지 않기 때문입니다. &nbsp; 대신 빈 이미지 등을 활용해도 됩니다.

이제 style.css에 아래 내용을 입력합니다.
selected 클래스는 선택된 페이지(현재 페이지)를 표시하는 클래스입니다.
skin.html에 없죠? 프로그램상에서 자동 생성되는 클래스예요.
각 선택자의 border color와 background color 등을 이리 저리 바꿔보시면서 소스를 검토하시면 재미있을 것 같아요.

line-height 값을 준 이유는 줄바꿈태그 <br />의 높이를 조정하기 위해서입니다. 더 높거나 낮게 원하는 값으로 조정해보세요.

페이지 표시 부분도 마무리 되었네요.
방명록에서도 잘 나오는지 확인해 볼까요? 아래 이미지를 클릭해보세요.

방명록과 글 목록 등의 화면 출력 설정은
관리자화면 - 스킨 - 화면출력 설정에서 할 수 있습니다.

위와 같이 한 페이지에 보여지는 목록의 갯수를 설정할 수 있습니다.
포스트 내용 부분을 아직 만들지 않았기 때문에 목록+내용으로 설정해도 검색결과는 목록만 나옵니다.

포스트 내용 부분은 다음시간에 다루겠습니다. ^^

초보 스킨 강의도 끝이 보이는데요, 앞으로의 강의에서 다룰 내용은 다음과 같습니다.

그럼 끝까지 함께 화이팅합시다. :)


게시물에 관한 질문은 댓글로 해주세요. ^^
여기는 저의 개인 블로그입니다.
티스토리 스킨에 관한 질문은 티스토리 스킨 포럼에서,
티스토리에 관한 질문은 티스토리 고객센터나 티스토리 가이드 블로그 HELP메뉴에서,
웹디자인이나 웹코딩 관련 질문은 네이버 지식인이나 수 많은 웹 관련 카페에서 하실 수 있습니다. 


 중급자를 위한 티스토리 스킨 수정 팁 보러가기