एङ्कर सूची
एउटै पृष्ठमा धेरै खण्ड लामो भएर जाँदा, माथिबाटै चाहिएको भागमा सिधै उफ्रन दिने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<nav class="dc-anchors" aria-labelledby="dc-anchors-h">
<h2 class="dc-anchors__title" id="dc-anchors-h">이 페이지에서 바로 가기</h2>
<ol class="dc-anchors__list">
<li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a1"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>신청 자격</a></li>
<li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a2"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>준비할 서류</a></li>
<li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a3"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>신청하는 곳과 기간</a></li>
<li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a4"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>받는 금액과 지급일</a></li>
<li class="dc-anchors__item"><a class="dc-anchors__link" href="#dc-anchors-a5"><span class="dc-anchors__arrow" aria-hidden="true">↓</span>자주 묻는 질문</a></li>
</ol>
</nav>.dc-anchors { max-width:420px; padding:var(--dc-4); border:1px solid var(--dc-line); border-left:3px solid var(--dc-brand); border-radius:0 var(--dc-r-md) var(--dc-r-md) 0; background:var(--dc-surface); font-family:var(--dc-font); }
.dc-anchors__title { margin:0 0 var(--dc-2); font-size:13px; font-weight:700; color:var(--dc-text); }
.dc-anchors__list { margin:0; padding:0; list-style:none; }
.dc-anchors__item { margin:0; border-top:1px solid var(--dc-line); }
.dc-anchors__item:first-child { border-top:0; }
.dc-anchors__link { display:flex; align-items:center; gap:var(--dc-2); min-height:40px; padding:var(--dc-2) 0; color:var(--dc-brand-text); font-size:14px; text-decoration:underline; text-decoration-thickness:1px; }
.dc-anchors__link:hover { color:var(--dc-text); }
.dc-anchors__arrow { flex:0 0 auto; font-size:12px; line-height:1; color:var(--dc-text-mute); }
.dc-anchors__row { display:flex; flex-wrap:wrap; gap:var(--dc-2); margin:0; padding:0; list-style:none; }
.dc-anchors__chip { display:inline-flex; align-items:center; min-height:36px; padding:var(--dc-1) var(--dc-4); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-sunken); color:var(--dc-text); font-size:13px; text-decoration:none; }
.dc-anchors__chip:hover { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-anchors__index { display:flex; flex-wrap:wrap; gap:var(--dc-1); margin:0; padding:0; list-style:none; }
.dc-anchors__letter { display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:0 var(--dc-1); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); color:var(--dc-brand-text); font-size:14px; font-weight:700; text-decoration:none; }
.dc-anchors__letter:hover { border-color:var(--dc-brand); background:var(--dc-brand-soft); }
.dc-anchors__letter.is-empty { border-style:dashed; background:var(--dc-sunken); color:var(--dc-text-mute); font-weight:400; }कसरी प्रयोग गर्ने
- मूल लेख सुरु हुनुअघि राख्नु र ४-८ वटामा सीमित गर्नु; विषयसूचीभन्दा फरक, यो पाठकको स्थान पछ्याउँदैन
- हरेक वस्तुको अक्षर उफ्रने शीर्षकजस्तै लेख्नु — फरक भए पुगेपछि ठीक ठाउँ हो कि थाहा हुँदैन
- पुग्ने शीर्षकमा scroll-margin-top दिनु, नत्र टाँसिएको हेडरले छोप्छ
ध्यान दिनुपर्ने कुरा
- बाणको चिनो aria-hidden ले लुकाउनु — त्यो सजावट हो, पढ्ने चीज होइन
- लिंकलाई रङले मात्र नछुट्टाउनु; रेखा वा किनारा पनि दिनु