실행 가능한 HTML 문서: footer 태그

Q: 푸터를 페이지 맨 아래에 두려면 어떻게 하나요?

body를 최소한 창 높이만큼 되는 flex 열로 만들고(display: flex; flex-direction: column; min-height: 100vh;) 에 flex: 1을 주세요. 그러면 main 영역이 빈 공간을 채우며 늘어나서, 내용이 짧은 페이지에서도 푸터를 아래로 밀어내요.

Q: HTML에서 저작권 기호는 어떻게 쓰나요?

엔티티 ©를 쓰면 ©가 표시돼요. 페이지에 이 있으면 문자를 직접 입력해도 돼요. 그 줄을 로 감싸면 작은 글씨의 부가 정보라는 뜻이 돼요.

Q: 한 페이지에 footer를 여러 개 써도 되나요?

네. 각 이나 은 작성자 정보나 태그를 위한 자체 푸터를 가질 수 있어요. 스크린 리더에게 페이지의 contentinfo 랜드마크가 되는 건 article, aside, main, nav, section 안에 있지 않은 footer뿐이에요.

HTML footer 태그: 예제와 푸터 하단 고정 레이아웃

<footer> 요소는 페이지나 섹션을 마무리해요. 저작권, 연락처, 링크, 작성자 정보 같은 내용이에요. 링크 열이 있는 사이트 푸터 만드는 법, 내용이 짧은 페이지에서 푸터를 맨 아래에 두는 법, 글 안에서 푸터를 쓰는 법을 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

HTML에서 푸터 만드는 법

페이지를 마무리하는 콘텐츠를 <footer> 요소에 넣으세요. 보통 <body>의 마지막 요소예요. <header>처럼 기본 모양이 없고, CSS가 푸터 바로 만들어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

©는 © 기호를 출력해요. <small>은 저작권 줄을 작은 글씨의 부가 정보로 표시하는데, 이건 단순히 작은 글꼴이 아니라 HTML에서의 의미예요. 링크 목록은 진짜 <ul> 목록이라서, 대부분의 스크린 리더가 각 열에 링크가 몇 개 있는지 알려 줘요.

푸터를 맨 아래에 두기

내용이 적은 페이지에서는 푸터가 그 내용 바로 아래에 붙고 그 밑에 빈 공간이 남아요. 해결법은 flex 열이에요. 컨테이너를 최소한 창 높이만큼 만들고, main 영역이 남는 높이를 모두 차지하게 해요. 아래 회색 상자가 브라우저 창 역할을 해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

main에서 flex: 1을 지우면 푸터가 문단 바로 아래로 올라와요. 실제 페이지에서는 고정 높이 대신 min-height: 100vh(그리고 margin: 0)와 함께 같은 규칙을 <body>에 주세요. 그러면 짧은 페이지에서는 푸터가 맨 아래에, 긴 페이지에서는 콘텐츠 뒤에 와요.

글 안의 푸터

<footer>는 가장 가까운 article이나 section을 마무리해요. 그래서 블로그 글이나 댓글이 작성자, 날짜, 태그가 담긴 자체 푸터를 가질 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

스크린 리더는 페이지 수준 푸터만 contentinfo 랜드마크로 취급해요. 글 안의 푸터는 일반 묶음이라서 사이트 푸터와 겹치지 않아요.

address로 연락처 넣기

페이지나 그 소유자의 연락처에는 푸터 안에 <address>를 쓰세요. 연락처 전용이고(본문의 아무 우편 주소에나 쓰는 게 아니에요), 브라우저는 기본적으로 기울임꼴로 보여 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

address 안의 줄바꿈은 <br>을 잘 쓰는 예 중 하나예요. 이메일 링크는 mailto 페이지를 보세요.

footer에는 링크, 목록, 폼(뉴스레터 구독), 이미지, <nav>를 넣을 수 있어요. <header>, 다른 <footer>, <main>은 담을 수 없어요. 푸터의 두 번째 메뉴는 주 메뉴와 구별되는 라벨을 가진 <nav>로 만들 수 있어요.

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

자주 하는 실수

<footer>를 <body> 밖에 둠. 푸터를 포함해 보이는 모든 것은 <body> 안에 들어가요.
아래에 두려고 position: fixed를 씀. 고정 푸터는 작은 화면에서 콘텐츠를 가리고 어디에나 padding이 필요해요. flex 열 패턴을 쓰세요.
아무 주소에나 <address>를 씀. 페이지나 글 작성자의 연락처용이에요. 지점 목록의 매장 주소는 일반 <p>예요.
<br> 태그로 링크 열을 만듦. 구조가 전달되도록 <ul> 목록을 쓰세요.

자주 묻는 질문

HTML에서 footer 태그란 무엇인가요?

웹사이트 푸터에는 무엇을 넣어야 하나요?

푸터를 페이지 맨 아래에 두려면 어떻게 하나요?

body를 최소한 창 높이만큼 되는 flex 열로 만들고(display: flex; flex-direction: column; min-height: 100vh;) <main>에 flex: 1을 주세요. 그러면 main 영역이 빈 공간을 채우며 늘어나서, 내용이 짧은 페이지에서도 푸터를 아래로 밀어내요.

한 페이지에 footer를 여러 개 써도 되나요?

네. 각 <article>이나 <section>은 작성자 정보나 태그를 위한 자체 푸터를 가질 수 있어요. 스크린 리더에게 페이지의 contentinfo 랜드마크가 되는 건 article, aside, main, nav, section 안에 있지 않은 footer뿐이에요.