25. 티스토리 스킨 만들기 페이징 및 푸터 영역

2014. 2. 23. 10:51
저자 : Kurien

먼저 페이징 부분을 수정 하고 푸터 부분을 살펴보겠습니다.



페이징 영역이란 건 본문 혹은 방명록 아랫 부분에 존재하는 이 부분이죠.

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 영역에 들어가는 부분은 메뉴와 카피라이트 두개 뿐입니다.



나머지는 알아서 만들어 넣으시면 되구요.

아마도 다음 포스팅이 스킨 만들기의 끝이 될 것 같네요.