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

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

Summary:

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


재도전

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

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

기존 화면


과정


시행착오 2

시행착오 3

시행착오 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

결과물

아 예뻐라


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