페이지네이션(Pagination) 기능을 기획하고 개발해보자

페이지네이션(Pagination) 기능을 기획하고 개발해보자

Summary:

드디어 블로그 목록에 페이지네이션 기능을 추가했습니다.


재도전

내 블로그의 문제 중 하나는 과거 포스팅으로의 접근이 어렵다는 것이다. 포스팅 목록 첫번째 페이지에서 네번째 페이지까지 가려면 1페이지에서 2페이지로, 2페이지에서 3페이지로, 3페이지에서 4페이지로 한 단계씩 넘어가야 한다. 총 3번의 클릭과 화면 전환이 있어야 한다. 이건 굉장히 비효율적이다. 누르고 있으면 화가 난다.

목표는 페이지네이션을 ‘« page n of 14 »’ 형식이 아닌, ‘« 1 2 3 4 5 »’ 식으로 만들어 접근이 쉽게 만드는 것이다. 카카오톡 기술블로그가 페이지네이션을 벤치마킹 대상으로 잡고 코드를 내 환경에 맞게 변형하는 식으로 개발 계획을 잡았다. (참고: 이렇게 만들고 싶어요)

pic1

기존 화면

과정

pic1

시행착오 1


pic2

시행착오 2


pic3

시행착오 3


pic4

시행착오 4


워후. 일단 페이지별 변호를 나열하고 인라인 블럭을 설정하여 가로정렬시켰다. 아래는 여기 과정까지의 코드다.

pagination.html 코드

pagination.sass 코드

.sr-only
position: absolute
top: -9999px
left: -9999px

.pagination
margin: 0
padding: 33px 0
text-align: center

> li
display: inline-block
list-style: none
height: 20px
width: 20px
color: #1e1e1e
font-size: 14px
line-height: 18px
vertical-align: middle

> a
color: #1e1e1e
width: 100%
height: 100%
display:block

&:hover
background-color: #e6e6e6
border-radius: 4px

> li + li
margin-left: 10px


#page-prev
background: url(/assets/images/icon_pre.png) no-repeat center
background-size: 6px 11px

#page-next
background: url(/assets/images/icon_next.png) no-repeat center
background-size: 6px 11px

문제는 페이지 수가 1부터 15까지 다 보인다는거다. 난 1부터 5까지만 보여주고 싶다. pagination.html에 아래 코드를 추가하여 마무리한다.

pagination.html 최종 코드

pagination.sass 최종 코드

.sr-only
position: absolute
top: -9999px
left: -9999px

.pagination
margin: 0
padding: 33px 0
text-align: center

> li
display: inline-block
list-style: none
height: 20px
width: 20px
color: #1e1e1e
font-size: 14px
line-height: 18px
vertical-align: middle

> a
color: #1e1e1e
width: 100%
height: 100%
display:block

&:hover
background-color: #e6e6e6
border-radius: 4px

> li + li
margin-left: 10px


#page-prev
background: url(/assets/images/icon_pre.png) no-repeat center
background-size: 6px 11px

#page-next
background: url(/assets/images/icon_next.png) no-repeat center
background-size: 6px 11px

결과물

pic5

아 예뻐라



Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora