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

Tautan lewati

Elemen pertama di halaman, supaya pengguna papan ketik mulai dari isi, bukan melewati dua puluh item menu.

Navigasi

Pratinjau langsung

Sumber

<div class="dc-skip-demo">
  <a class="dc-skip" href="#dc-skip-main">본문으로 건너뛰기</a>
  <div class="dc-skip-demo__top">
    <span class="dc-skip-demo__logo">이음</span>
    <nav class="dc-skip-demo__nav" aria-label="주 메뉴">
      <a class="dc-skip-demo__navlink" href="#">일자리</a>
      <a class="dc-skip-demo__navlink" href="#">생활 안내</a>
      <a class="dc-skip-demo__navlink" href="#">상담</a>
      <a class="dc-skip-demo__navlink" href="#">내 신청</a>
    </nav>
  </div>
  <main class="dc-skip-demo__main" id="dc-skip-main" tabindex="-1">
    <h1 class="dc-skip-demo__h1">오늘 올라온 일자리 12곳</h1>
    <p class="dc-skip-demo__p">건너뛰기 링크가 닿는 자리다. 메뉴를 지나 여기서부터 읽기가 시작된다.</p>
  </main>
</div>
.dc-skip-demo { position:relative; max-width:560px; border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); font-family:var(--dc-font); }
.dc-skip { display:inline-block; margin:var(--dc-3) 0 0 var(--dc-3); padding:var(--dc-2) var(--dc-4); border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font-size:13px; font-weight:700; text-decoration:underline; }
.dc-skip:hover { background:var(--dc-brand-hi); }
.dc-skip:focus-visible { outline:2px solid var(--dc-text); outline-offset:2px; }
.dc-skip--reveal { position:absolute; left:var(--dc-3); top:var(--dc-3); z-index:5; margin:0; box-shadow:var(--dc-sh-2); transform:translateY(-340%); transition:transform var(--dc-fast); }
.dc-skip--reveal:focus { transform:translateY(0); }
.dc-skip-row { display:flex; flex-wrap:wrap; gap:var(--dc-2); padding:var(--dc-3) var(--dc-3) 0; }
.dc-skip-row .dc-skip { margin:0; }
.dc-skip-demo__top { display:flex; align-items:center; flex-wrap:wrap; gap:var(--dc-3) var(--dc-4); margin-top:var(--dc-3); padding:var(--dc-3) var(--dc-4); border-top:1px solid var(--dc-line); border-bottom:1px solid var(--dc-line); background:var(--dc-sunken); }
.dc-skip-demo__logo { font-size:15px; font-weight:800; color:var(--dc-text); }
.dc-skip-demo__nav { display:flex; flex-wrap:wrap; gap:var(--dc-4); }
.dc-skip-demo__navlink { font-size:13px; color:var(--dc-text-sub); text-decoration:none; }
.dc-skip-demo__navlink:hover { color:var(--dc-brand-text); text-decoration:underline; }
.dc-skip-demo__main { padding:var(--dc-4); }
.dc-skip-demo__main:focus { outline:2px dashed var(--dc-brand); outline-offset:-4px; }
.dc-skip-demo__h1 { margin:0 0 var(--dc-2); font-size:17px; font-weight:700; color:var(--dc-text); }
.dc-skip-demo__p { margin:0; font-size:13px; color:var(--dc-text-sub); }
.dc-skip-demo__hint { margin:0; padding:var(--dc-3) var(--dc-4) 0; font-size:12px; color:var(--dc-text-mute); }

Cara memakainya

  • Letakkan di tempat fokus pertama jatuh — di atas header, baris pembuka body
  • Beri targetnya id sekaligus tabindex="-1", kalau tidak fokus tidak benar-benar pindah
  • Kalau menunya sangat panjang, tambahkan tautan kedua seperti "Lewati ke pencarian"

Hal yang perlu diwaspadai

  • Menyembunyikannya dengan display:none membuatnya tak bisa difokus, jadi tak berguna. Dorong ke luar atas layar dan kembalikan saat :focus
  • Beri latar dan z-index agar tidak tertimpa saat muncul

Berikutnya