티스토리 북클럽 스킨에서 사용하는 페이지 이동 링크 'pagination'의 이전 'prev'와 다음 'next' 버튼의 보기 형태를 수정하는 코드입니다.
- 카테고리의 리스트 페이지들
- 현재 보고 있는 페이지의 이전 혹은 다음 페이지들
- 검색 결과로 제시하는 페이지들의 숫자
모두 '.pagination' 클래스의 하위 클래스인 '.prev'와 '.next'의 구조로 관리합니다.
북클럽 스킨과 오딧세이 스킨의 버튼 표시 모습을 비교하여 설명하고 북클럽 스킨에 필요한 수정 코드를 등록하였습니다.
최근에 제공한 티스토리 오딧세이 스킨의 페이지 이동 버튼의 구현 모습입니다.
현재 1 페이지를 보고 있습니다. 왼쪽 마지막 페이지이기 때문에 이전('prev') 페이지 버튼을 표시하지 않습니다.
현재 19 페이지를 보고 있습니다. 마지막 페이지이기 때문에 오른쪽에 다음('next') 페이지 버튼을 표시하지 않습니다.
두 가지 경우 모두 필요 없는 해당 버튼을 표시하면 검색 방향에 약간의 혼란을 일으킬 수 있습니다.
빨간색으로 표시한 북클럽 스킨의 이전 페이지 이동 버튼과 현재 페이지('1')입니다. 필요 없는 버튼을 표시하고 있습니다.
제 블로그에 사용한 북클럽 스킨의 페이지 이동 버튼 모습입니다. 북클럽 스킨의 이동 버튼 구조를 약간 수정하였습니다. 이제 오딧세이 스킨의 버튼 구조와 동일하게 변경되었습니다.
스킨 파일 수정에 필요한 코드
북클럽 스킨 수정하지 않은 원본
- style.css
북클럽 스킨 원본 페이지 이동 코드
수정 필요
- 파일: style.css
- 코드 위치: 1264 ~ 1275
.pagination .prev,
.pagination .next {
width: 22px;
height: 22px;
border: 1px solid #eee;
border-radius: 50%;
background: url(./images/ico_package.png) no-repeat 0 -50px;
text-indent: -999em;
}
.pagination .next {
background-position-x: -50px;
}
페이지 이동 버튼 표시 수정 코드
- style.css
.pagination .prev:not(.no-more-prev),
.pagination .next:not(.no-more-next) {
width: 22px;
height: 22px;
border: 1px solid #eee;
border-radius: 50%;
background: url(./images/ico_package.png) no-repeat 0 -50px;
text-indent: -999em;
}
.pagination .next:not(.no-more-next) {
background-position-x: -50px;
}.pagination .prev
.pagination .next
이 코드를 각각 아래와 같이 약간의 조건을 추가한 것입니다.
.pagination .prev:not(.no-more-prev)
.pagination .next:not(.no-more-next)
아주 간단합니다. 입력할 때 오타 나지 않게 조심하세요.
댓글