Footer
Mengumpulkan apa yang dicari orang yang sudah menggulir sampai bawah — kontak, syarat, dan tempat melapor.
Pratinjau langsung
Sumber
<footer class="dc-footer">
<div class="dc-footer__inner">
<div class="dc-footer__brand">
<p class="dc-footer__name">일자리찾기</p>
<p class="dc-footer__about">한국에서 일하는 사람을 위한 구인 정보. 구직자에게 수수료를 받지 않습니다.</p>
</div>
<nav class="dc-footer__col" aria-label="서비스">
<h2 class="dc-footer__ctitle">서비스</h2>
<ul class="dc-footer__list">
<li><a class="dc-footer__link" href="#">일자리 찾기</a></li>
<li><a class="dc-footer__link" href="#">공고 올리기</a></li>
<li><a class="dc-footer__link" href="#">비자 안내</a></li>
</ul>
</nav>
<nav class="dc-footer__col" aria-label="도움">
<h2 class="dc-footer__ctitle">도움</h2>
<ul class="dc-footer__list">
<li><a class="dc-footer__link" href="#">자주 묻는 질문</a></li>
<li><a class="dc-footer__link" href="#">상담 전화 1234-5678</a></li>
<li><a class="dc-footer__link" href="#">부당한 대우 신고</a></li>
</ul>
</nav>
</div>
<div class="dc-footer__bottom">
<p class="dc-footer__legal">ⓒ 2026 일자리찾기 · 사업자등록번호 123-45-67890</p>
<ul class="dc-footer__meta">
<li><a class="dc-footer__link" href="#">이용약관</a></li>
<li><a class="dc-footer__link" href="#">개인정보 처리방침</a></li>
</ul>
</div>
</footer>.dc-footer { padding:var(--dc-7) var(--dc-6) var(--dc-5); border-top:1px solid var(--dc-line); background:var(--dc-sunken); font-family:var(--dc-font); }
.dc-footer__inner { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(0,1fr)); gap:var(--dc-6); max-width:1120px; margin-inline:auto; }
.dc-footer__brand { min-width:0; }
.dc-footer__name { margin:0 0 var(--dc-2); font-size:16px; font-weight:700; color:var(--dc-text); }
.dc-footer__about { margin:0; max-width:40ch; font-size:13px; line-height:1.65; color:var(--dc-text-sub); }
.dc-footer__col { min-width:0; }
.dc-footer__ctitle { margin:0 0 var(--dc-3); font-size:13px; font-weight:700; color:var(--dc-text); }
.dc-footer__list { display:flex; flex-direction:column; gap:var(--dc-2); margin:0; padding:0; list-style:none; }
.dc-footer__link { display:inline-block; padding:var(--dc-1) 0; font-size:13px; color:var(--dc-text-sub); text-decoration:none; }
.dc-footer__link:hover { color:var(--dc-text); text-decoration:underline; }
.dc-footer__bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--dc-3); max-width:1120px; margin:var(--dc-6) auto 0; padding-top:var(--dc-4); border-top:1px solid var(--dc-line); }
.dc-footer__legal { margin:0; font-size:12px; color:var(--dc-text-mute); }
.dc-footer__meta { display:flex; flex-wrap:wrap; gap:var(--dc-4); margin:0; padding:0; list-style:none; }
.dc-footer--slim { padding:var(--dc-4) var(--dc-6); }
.dc-footer--slim .dc-footer__bottom { margin-top:0; padding-top:0; border-top:0; }
@media (max-width:700px) {
.dc-footer { padding-inline:var(--dc-4); }
.dc-footer__inner { grid-template-columns:minmax(0,1fr); gap:var(--dc-5); }
.dc-footer__bottom { flex-direction:column; align-items:flex-start; }
}Cara memakainya
- Paling banyak tiga atau empat kelompok tautan; kalau semua dijejalkan, tidak ada yang ketemu
- Taruh nomor bantuan dan tautan pelaporan di atas tautan legal, di tempat yang mudah terlihat
- Data perusahaan — nomor izin, alamat — cukup satu baris paling bawah
Hal yang perlu diwaspadai
- Jangan palsukan judul kelompok dengan p tebal; h2 asli membuat pengguna pembaca layar bisa melewati kelompoknya
- Tautan yang terlalu rapat jadi salah sentuh. Beri sedikit jarak atas bawah