पृष्ठ विभाजन
सूची लामो भएर धेरै पृष्ठमा बाँडिँदा, कुन पृष्ठमा छु थाहा पाएर अर्कोमा उफ्रनुपर्दा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<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; }कसरी प्रयोग गर्ने
- अहिलेको पृष्ठमा aria-current="page" राख्नुहोस्; रङले मात्र देखाउनु हुँदैन
- दुवैतिर एक-दुई पृष्ठ देखाउनुहोस्, बाँकी … मा खुम्चाउनुहोस्; पहिलो र अन्तिम सधैँ राख्नुहोस्
- पहिलो पृष्ठमा 'अघिल्लो' हटाउनुभन्दा क्लिक नहुने बनाउनुहोस् — बटन सर्यो भने झन् अलमल हुन्छ
ध्यान दिनुपर्ने कुरा
- क्लिक गर्ने क्षेत्र कम्तीमा 44×44px राख्नुहोस्
- nav मा aria-label लेख्नुहोस् — एकै स्क्रिनमा दुई सूची भए छुट्टिँदैन