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

푸터

화면 끝까지 내려온 사람이 찾는 것 — 연락처, 약관, 신고 창구 — 을 모아 두는 조각.

레이아웃

실제 미리보기

출처

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

이렇게 씁니다

  • 묶음은 3~4개까지. 링크를 다 넣으려 들면 아무것도 찾지 못한다
  • 상담 전화와 신고 창구는 약관보다 위, 눈에 띄는 자리에 둔다
  • 회사 정보(사업자등록번호 · 주소)는 맨 아래 한 줄로 묶는다

주의할 점

  • 묶음 제목을 굵은 글씨 p 로 두지 않는다. h2 로 써야 스크린 리더가 묶음을 건너뛸 수 있다
  • 링크가 촘촘하면 손가락으로 옆 링크를 누른다. 위아래 여백을 4px 씩이라도 둔다

다음에 볼 것