25. 티스토리 스킨 만들기 페이징 및 푸터 영역
먼저 페이징 부분을 수정 하고 푸터 부분을 살펴보겠습니다.
페이징 영역이란 건 본문 혹은 방명록 아랫 부분에 존재하는 이 부분이죠.
HTML도 약간 수정했으니 확인해보세요~!
<s_paging>
<div class="paging">
<a [ ##_prev_page_##] class="[ ##_no_more_prev_##]">Prev</a>
<span class="numbox">
<s_paging_rep>
<a [ ##_paging_rep_link_##] class="num">[ ##_paging_rep_link_num_##]</a>
</s_paging_rep>
</span>
<a [ ##_next_page_##] class="[ ##_no_more_next_##]">Next</a>
</div>
</s_paging>
먼저 위의 HTML처럼 수정을 했습니다.
.paging {text-align:center;font-size:18px;font-weight:bolder;}
.paging .selected {color:#333;}
.paging a {color:#08C;text-decoration:none;}
.paging a:hover {color:#666;}
.paging을 가운데 정렬 해준 후, 폰트 사이즈를 18px로 늘렸고, 전체적으로 굵게 만들었습니다.
.paging .selected의 경우 위에 있는 html 부분에는 나오지 않은 class인데요.
이 부분은 선택 된 부분에 적용 되는겁니다.
선택 된 부분을 #333의 색으로 변경합니다.
paging a와 a:hover의 경우 색상을 각각 #08C, #666으로 줬고 text-decoration을 없애줬네요.
마우스를 가져다 대주면 #666의 색으로 변경됩니다.
페이징은 여기까지가 끝이구요.
푸터 영역에 HTML을 추가 한 후 끝내겠습니다.
<div id="footer">
<div class="menu_2">
<a href="[ ##_localog_link_##]">위치로그</a>
<a href="[ ##_taglog_link_##]">태그</a>
<a href="[ ##_guestbook_link_##]">방명록</a>
<a href="[ ##_owner_url_##]">관리자</a>
</div>
<div class="copyright">
<a href="[ ##_blog_link_##]"> [ ##_blogger_##]</a>’s Blog is powered by <a href="http://tattertools.com" onclick="window.open(this.href); return false">[ ##_tattertools_name_##] [ ##_tattertools_version_##]</a> /
Designed by <a href="http://plyfly.net" onclick="window.open(this.href); return false">plyfly.net</a>
</div>
</div>
<!-- footer close -->
footer 영역에 들어가는 부분은 메뉴와 카피라이트 두개 뿐입니다.
나머지는 알아서 만들어 넣으시면 되구요.
아마도 다음 포스팅이 스킨 만들기의 끝이 될 것 같네요.
'Project > 티스토리 스킨' 카테고리의 다른 글
26. 티스토리 스킨 만들기 푸터 메뉴, 카피라이트 (34) | 2014.02.24 |
---|---|
24. 티스토리 스킨 만들기 본문 댓글 (13) | 2014.02.22 |
23. 티스토리 스킨 만들기 본문 태그, 트랙백 (6) | 2014.02.21 |
22. 티스토리 스킨 만들기 본문 수정 (7) | 2014.02.20 |
21. 티스토리 스킨 만들기 비밀 글 (0) | 2014.02.19 |