Section 16 - 티스토리 반응형 스킨 만들기 - 페이지네이션

이번 섹션은 페이지네이션 작업을 합니다.
페이지네이션 또는 페이징이라고 하는데 이것은 글이 100개지만 글 목록에 출력되는 갯수는 10개밖에 없으면 나머지 90개의 글을 볼 수 없기 때문에 10개의 글들을 10개의 페이지로 나누어 볼 수 있게 페이지를 나누는데 이 페이지를 이동할 수 있게 하는 네비게이션을 페이지네이션 또는 페이징이라고 합니다.
우리는 명칭을 페이지네이션이라고 통일하겠습니다.

페이지네이션은 어디어디 들어가는 것인가?
페이지네이션은 글 목록, 댓글 목록, 방명록 목록같이 수량이 많이 쌓이는 곳에 쓰입니다.
그러므로 skin.html 코드 작업시 content div 제일 하단부에 넣습니다.
하단부말고 상단에 출력되게하고 싶으시면 content div 상단에 넣으시면 됩니다.
간단하죠?

그럼 바로 코딩으로 들어가보입시다 ㅡ/.,ㅡ;;

STEP 1. skin.html 페이지네이션 코드 추가

            ... 목록, 글, 방명록, 태그 클라우드, 페이지 소스 생략 ..
            
    

• <s_paging></s_paging> : 페이지가 출력되는 영역 지정
• <s_paging_rep></s_paging_rep> : 페이지가 반복 출력되는 영역 지정
• : 이전 페이지 링크 
• : 페이지 링크 
• : 페이지 번호 
• : 다음 페이지 링크

페이지네이션 코드 구조

• <s_paging_rep> 영역안의 치환자는 기본적으로 페이지 앵커(a 태그) 안에 <span>페이저 번호</span> 태그가 자동적으로 생성됩니다.
  지금 1번 페이지를 보고 있다면 1번 html코드는 <a><span class="selected">1</span></a>가 생성됩니다.
  이 selected 클래스를 이용해서 디자인을 변경할 수 있습니다.
• 현재 1번 페이지, 즉 제일 최신글에 있다면 prev 버튼은 자동적으로 no-more-prev 클래스가 생성됩니다.
  출력 코드 : <a class="no-more-prev">Prev</a>
• 마찬가지로 마지막 페이지에 있다면 Next 버튼은 자동적으로 no-more-next 클래스가 생성됩니다.
  출력 코드 : <a class="no-more-next">Next</a>

STEP 2. 치환 결과 확인

        

             Prev
            1
            ···
            35
            36
            37
            38
            39
            40
            41
            42
            43
            ···
            47
            Next 
        

위와 같이 출력되니 스타일 작업시 참고하시면 됩니다. "Prev / Next" 버튼의 클래스 설명은 코드 구조를 참고하세요

STEP 3. style.css 페이지네이션 스타일 추가

/* *********************************************************************
   Pagination
   ****************************************************************** */
.pagination {margin:10px 0 0; text-align:center}
.pagination .btn-prev, .pagination .btn-next, .pagination a span {display: inline-block; margin-right:2px; padding: 4px 12px; border:1px solid #ddd; border-radius: 4px; color: #111; background:#fff; text-decoration: none; text-align: center;}
.pagination .btn-prev:hover, .pagination .btn-next:hover, .pagination a span:hover,
.pagination .btn-prev:active, .pagination .btn-next:active, .pagination a span:active,
.pagination .btn-prev:focus, .pagination .btn-next:focus, .pagination a span:focus {color:#fff; background:#ff8149; border:1px solid #ff8149}
.pagination a .selected {color:#ff8149; border:1px solid #ff8149}
.pagination .no-more-prev, .pagination .no-more-next {display:none}

• 앵커(a) 태그에 클래스명이 붙는게 아니라서 span을 이용한 스타일 작업을 해야 한다는거 다시한번 강조합니다.

STEP 4. 페이지네이션 결과 확인

페이지네이션 결과 확인

이제 우리는 티스토리 블로그 스킨 만들기의 핵심을 끝냈습니다.
다음 섹션에는 페이지 기능, footer 정보 입력, sidebar 추가 기능만 끝내면 기능적으로 모두 마무리 됩니다.
아직 반응형 스타일 수정도 남았지만 강좌 마무리가 얼마 남지 않았습니다.
파이팅~!!