Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Pagination

For a list long enough to split into pages, when people need to know which page they're on and jump.

Navigation

Live preview

Source

<nav class="dc-pg" aria-label="템플릿 목록 페이지">
  <a class="dc-pg__edge" href="#" rel="prev"><span aria-hidden="true">‹</span>이전</a>
  <ul class="dc-pg__list">
    <li><a class="dc-pg__num" href="#">1</a></li>
    <li><span class="dc-pg__gap" aria-hidden="true">…</span></li>
    <li><a class="dc-pg__num" href="#">4</a></li>
    <li><a class="dc-pg__num is-current" href="#" aria-current="page"><span class="dc-sr">현재 페이지, </span>5</a></li>
    <li><a class="dc-pg__num" href="#">6</a></li>
    <li><span class="dc-pg__gap" aria-hidden="true">…</span></li>
    <li><a class="dc-pg__num" href="#">20</a></li>
  </ul>
  <a class="dc-pg__edge" href="#" rel="next">다음<span aria-hidden="true">›</span></a>
</nav>
.dc-pg {
  display: flex; align-items: center; gap: var(--dc-2);
  font-family: var(--dc-font);
}
.dc-pg__list {
  display: flex; align-items: center; gap: var(--dc-1);
  list-style: none; margin: 0; padding: 0; overflow-x: auto;
}
.dc-pg__num {
  display: grid; place-items: center; min-width: 44px; height: 44px;
  padding: 0 var(--dc-1); border-radius: var(--dc-r-sm);
  color: var(--dc-text-sub); text-decoration: none;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-pg__num:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-pg__num.is-current {
  background: var(--dc-brand); color: var(--dc-text-on); font-weight: 800;
}
.dc-pg__gap {
  display: grid; place-items: center; min-width: 28px; height: 44px;
  color: var(--dc-text-mute);
}
.dc-pg__edge {
  display: flex; align-items: center; gap: var(--dc-1);
  height: 44px; padding: 0 var(--dc-3);
  border: 1px solid var(--dc-line); border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-pg__edge:hover { background: var(--dc-sunken); border-color: var(--dc-line-bold); }
.dc-pg__edge.is-off {
  background: var(--dc-sunken); color: var(--dc-text-mute);
  border-color: var(--dc-line); cursor: not-allowed;
}
.dc-pg__edge.is-off:hover { background: var(--dc-sunken); border-color: var(--dc-line); }

.dc-pg--simple { justify-content: space-between; max-width: 420px; }
.dc-pg__total {
  color: var(--dc-text-sub); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dc-pg--more { flex-direction: column; gap: var(--dc-2); }
.dc-pg__morebtn {
  min-height: 44px; padding: 0 var(--dc-6);
  border: 1px solid var(--dc-line-bold); border-radius: var(--dc-r-full);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background var(--dc-fast);
}
.dc-pg__morebtn:hover { background: var(--dc-sunken); }
.dc-pg__count { margin: 0; color: var(--dc-text-mute); font-size: 13px; }

How to use it

  • Mark the current page with aria-current="page", never by color alone
  • Show a page or two either side and fold the rest behind …, always keeping the first and last
  • On the first page keep 'Previous' in place but unclickable; a row that shifts confuses more

Watch out for

  • Give every target at least 44×44px — bare small numbers are hard to hit
  • Put an aria-label on the wrapping nav; two paged lists on one screen are otherwise identical

Next