Skip to content
EN KO VI NE KM ID
Design business cards Character collection 16 designs · PNG / SVG / PDF

Footer

Collects what someone who scrolled all the way down is looking for — contact, terms, and where to report a problem.

Layout

Live preview

Source

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

How to use it

  • Three or four link groups at most; cram every link in and nobody finds any of them
  • Put the help line and the reporting link above the legal links, where they are easy to spot
  • Keep company details — registration number, address — to one line at the very bottom

Watch out for

  • Don't fake group titles with a bold p; a real h2 lets screen-reader users skip a group
  • Tightly packed links get mis-tapped. Give each at least a few pixels of vertical padding

Next