Lompat ke konten
EN KO VI NE KM ID
Desain kartu nama English Koleksi karakter 16 desain · PNG / SVG / PDF

Daftar tautan lompat

Untuk satu halaman panjang berisi banyak bagian, agar orang melompat dari atas langsung ke bagian yang dicari.

Navigasi

Pratinjau langsung

Sumber

<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; }

Cara memakainya

  • Letakkan sebelum isi dan batasi empat sampai delapan entri; berbeda dari daftar isi, ini tidak mengikuti pembaca
  • Tulis tiap entri sama persis dengan judul tujuannya, kalau beda orang ragu sudah sampai atau belum
  • Beri judul tujuan scroll-margin-top agar tidak tertutup header yang menempel

Hal yang perlu diwaspadai

  • Sembunyikan ikon panah dengan aria-hidden — itu hiasan, bukan bacaan
  • Jangan bedakan tautan hanya dengan warna; tambahkan garis bawah atau tepi

Berikutnya