페이징이라함은 블로그의 각 포스트를 페이지 번호를 부여하는 과정을 말하는 거랜다. 늘 html과 css와 시름하고 있는 나로서는 틈 날때마다 정리를 해 두지 않으면 한 참을 헤매기 때문에 그때마다 정리해 두는 습관을 들이고 있다. 도서관에서 꾸벅꾸벅 졸면서 html과 css, java script를 공부하고 있지만 진도가 잘 안나간다. 할 수 없다. 메모해 두고 활용하며 배우는 수 밖에!!
내가 사용하는 스킨의 기본은 Yongzz님이 배포해준 Ycafe라는 스킨인데 선택한 이유는 게시판 형식으로 학생들과 필요한 사항을 주고 받기 위해서 선택했다. 비교적 빠른 로딩속도와 스킨변경의 편의성을 가지고 있다는 특징이 있어서 커뮤니티를 목적으로 하신다면 게시판 기능을 강화한 Yongzz님의 Ycafe를 추천하고 싶다. 왜 Yongzz인지는 나도 모른다. 걍, 기본적 스킨을 딜리버리해준 자체만으로 감사할 따름.(좌우지간 위의 링크를 누르면 그 고수의 스킨페이지로 이동한다.)
블로그 페이징 수정 후 변화
블로그 디자인이 뭐가 중요하냐고 물을 수 있지만 그래도 보기좋은 떡이 먹기에 좋지 않겠수? 그래도 과감히 손을 대 보았다. 외과의사도 아니고 난 스킨에 손을 댈때마다 알콜에 중독된 노의사의 손이 된 느낌을 받는다. 왜냐면 실수로 "스킨을 망가뜨리면 워쪄지?"하면서 은근히 소심해 진다. 하여간 전에 페이징 디자인은 좀 밋밋한 느낌이 강했다. 그래서 바꿨지 뭐!!
블로그 페이징 디자인 수정 방법
STEP #1 HTML 수정
이건 아래의 소스만 기냥 가져다가 복사해서 붙이면 된다. 페이징 디자인에 관련된 태그를 수정하라는 이야기 인데 세부적인 절차는 아래에 잘 메모해 두었다가 스킨이 엉키면 또 써야쥐!
1. ctrl + f 늘러서 <s_paging 까지만 입력하면 원하는 태그가 나온다 이거지. 바로 요 <s_paging> 태그
2. <s_paging>~</s_paging>까지 통째로 아래의 소스파일로 바꿔치기.
<div id="paging">
<a class="">◀ PREV </a>
<s_paging_rep>
<a class="num"></a>
</s_paging_rep>
<a class="">NEXT ▶</a>
</div>
</s_paging>
STEP #2 CSS 수정
다음은 css 파일 수정인데 요것도 아래 파일을 복사해다가 그대로 붙이면 된다 이거지.
#paging {padding:10px 0;line-height:normal;text-align:center}
#paging ul{border:0;margin:0;padding:0}
#paging a span{border:0;margin:0;padding:0;font-size:11px;list-style:none}
#paging a span{border:solid 1px #ddd;margin-right:2px}
#paging .no-more-prev,#paging .more-next{color:#666666;font-weight:bold;padding:3px 4px}
#paging #prevPage, #paging #nextPage{font-weight:bold;border:solid 1px #fff}
#paging a span.selected{color:#ff0084;font-weight:bold;padding:4px 6px;border:0 !important}
#paging a:link span,#paging a:visited span{color:#0063e3;padding:3px 6px;text-decoration:none}
#paging a:hover span{border:solid 1px #666666}
오케이! 페이징의 완성. :)
※ 물론 다른 스킨에서도 충분히 응용하면 페이징 디자인을 고칠 수 있겠죠. 거의 비슷하니까~ [응용해 보시길!!]
