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

Navigasi footer

Bagian paling bawah halaman, menjawab sekaligus "ada apa lagi di sini" dan "tempat ini bisa dipercaya atau tidak".

Navigasi

Pratinjau langsung

Sumber

<footer class="dc-foot">
  <nav class="dc-foot__cols" aria-label="사이트 안내">
    <div class="dc-foot__col">
      <h2 class="dc-foot__head">일자리 찾기</h2>
      <ul class="dc-foot__list">
        <li><a class="dc-foot__link" href="#">오늘 올라온 공고</a></li>
        <li><a class="dc-foot__link" href="#">지역별 보기</a></li>
        <li><a class="dc-foot__link" href="#">업종별 보기</a></li>
      </ul>
    </div>
    <div class="dc-foot__col">
      <h2 class="dc-foot__head">일하며 알아 둘 것</h2>
      <ul class="dc-foot__list">
        <li><a class="dc-foot__link" href="#">근로계약서 안내</a></li>
        <li><a class="dc-foot__link" href="#">임금을 못 받았을 때</a></li>
        <li><a class="dc-foot__link" href="#">산업재해 신청</a></li>
      </ul>
    </div>
    <div class="dc-foot__col">
      <h2 class="dc-foot__head">도움 받기</h2>
      <ul class="dc-foot__list">
        <li><a class="dc-foot__link" href="#">상담 전화 1350</a></li>
        <li><a class="dc-foot__link" href="#">가까운 지원센터</a></li>
        <li><a class="dc-foot__link" href="#">자주 묻는 질문</a></li>
      </ul>
    </div>
  </nav>
  <div class="dc-foot__bar">
    <p class="dc-foot__copy">© 2026 이음 협동조합</p>
    <ul class="dc-foot__legal">
      <li><a class="dc-foot__link dc-foot__link--small" href="#">이용약관</a></li>
      <li><a class="dc-foot__link dc-foot__link--small" href="#">개인정보 처리방침</a></li>
      <li><a class="dc-foot__link dc-foot__link--small" href="#">문의하기</a></li>
    </ul>
  </div>
</footer>
.dc-foot { padding:var(--dc-6) var(--dc-4) var(--dc-4); border-top:1px solid var(--dc-line); background:var(--dc-sunken); font-family:var(--dc-font); }
.dc-foot__cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:var(--dc-6) var(--dc-5); }
.dc-foot__col { min-width:0; }
.dc-foot__head { margin:0 0 var(--dc-2); font-size:13px; font-weight:700; color:var(--dc-text); }
.dc-foot__list { margin:0; padding:0; list-style:none; }
.dc-foot__link { display:inline-flex; align-items:center; min-height:36px; padding:var(--dc-1) 0; color:var(--dc-text-sub); font-size:13px; text-decoration:none; }
.dc-foot__link:hover { color:var(--dc-brand-text); text-decoration:underline; }
.dc-foot__link--small { min-height:32px; font-size:12px; }
.dc-foot__bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--dc-2) var(--dc-4); margin-top:var(--dc-6); padding-top:var(--dc-4); border-top:1px solid var(--dc-line); }
.dc-foot__copy { margin:0; font-size:12px; color:var(--dc-text-sub); }
.dc-foot__legal { display:flex; flex-wrap:wrap; gap:var(--dc-4); margin:0; padding:0; list-style:none; }
.dc-foot--compact { padding:var(--dc-4); }
.dc-foot__row { display:flex; flex-wrap:wrap; gap:var(--dc-2) var(--dc-5); margin:0; padding:0; list-style:none; }
.dc-foot__fold { border-bottom:1px solid var(--dc-line); }
.dc-foot__sum { display:flex; align-items:center; min-height:44px; font-size:13px; font-weight:700; color:var(--dc-text); cursor:pointer; }
.dc-foot__sum::-webkit-details-marker { display:none; }
.dc-foot__caret { margin-left:auto; font-size:11px; color:var(--dc-text-sub); transition:transform var(--dc-fast); }
.dc-foot__fold[open] .dc-foot__caret { transform:rotate(180deg); }

Cara memakainya

  • Cukup tiga sampai empat grup, diberi nama dengan bahasa pengunjung — "Cari kerja", bukan "Tentang kami"
  • Letakkan keterangan hukum dan kontak di baris terakhir sendiri; di situlah orang mencarinya
  • Jangan ulangi menu atas — footer tempat semua yang tidak muat di sana

Hal yang perlu diwaspadai

  • Beri tinggi tautan 36px atau lebih dan jarak baris longgar; huruf kecil yang rapat tidak bisa disentuh
  • Beri aria-label pada nav agar tidak tertukar dengan menu utama

Berikutnya