본문 바로가기
명함 만들기 캐릭터 모음 16가지 디자인 · PNG / SVG / PDF

푸터 내비

화면 맨 아래에서 '여기엔 또 무엇이 있나'와 '여기 믿을 만한가'에 한꺼번에 답해야 하는 조각.

내비게이션

실제 미리보기

출처

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

이렇게 씁니다

  • 묶음은 3~4개까지. 제목은 '회사 소개'보다 '일자리 찾기'처럼 찾아온 사람의 말로 쓴다
  • 법적 고지와 문의처는 맨 아랫줄에 따로 둔다 — 찾는 사람은 늘 그 자리를 본다
  • 위쪽 메뉴를 그대로 되풀이하지 않는다. 푸터는 위에 담지 못한 것이 가는 자리다

주의할 점

  • 링크 높이를 36px 이상 두고 줄 사이를 넉넉히 둔다 — 작은 글자가 촘촘하면 손가락으로 못 누른다
  • nav 에 aria-label 을 붙여 위쪽 주 메뉴와 구분되게 한다

다음에 볼 것