[HTML] footer 태그

목 차

• HTML <footer> 태그란?
• <footer> 태그 기본 문법
• <footer> 태그 사용 예제
  • 웹사이트 전체의 푸터
  • 섹션(기사, 블로그 포스트) 푸터
• <footer> 태그의 스타일 변경 (CSS 적용)
• <footer> 태그와 <header>, <nav> 태그의 비교
• <footer> 태그 요약

 

HTML <footer> 태그란?

<footer> 태그는 웹 문서나 특정 섹션의 하단(푸터)을 정의할 때 사용하는 HTML 태그입니다. 보통 저작권 정보, 연락처, 사이트맵, 관련 링크, 소셜 미디어 링크 등을 포함하는 영역으로 사용됩니다.

 

---

 

<footer> 태그 기본 문법

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
</footer>

&copy; 는 © (저작권 기호) 를 의미하는 HTML 엔티티입니다.

 

---

 

<footer> 태그 사용 예제

<footer> 태그는 웹사이트 전체의 푸터뿐만 아니라, 개별 섹션(기사, 블로그 포스트 등)의 푸터로도 사용될 수 있습니다.

💡 웹사이트 전체의 푸터

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
  <nav>
    <a href="/privacy-policy">개인정보 보호정책</a> | 
    <a href="/terms">이용약관</a>
  </nav>
</footer>

웹사이트 전체의 공통적인 정보(저작권, 정책, 연락처 등)를 포함할 때 사용됩니다.

 

💡 섹션(기사, 블로그 포스트) 푸터

<article>
  <h2>HTML5의 새로운 기능</h2>
  <p>HTML5는 다양한 새로운 기능을 제공합니다...</p>
  <footer>
    <p>작성자: 홍길동</p>
    <p>게시 날짜: 2025-02-09</p>
  </footer>
</article>

개별 콘텐츠(블로그, 기사 등)의 저자 정보, 게시 날짜 등과 함께 사용 가능합니다.

 

---

 

<footer> 태그의 스타일 변경 (CSS 적용)

기본적으로 <footer> 태그는 스타일이 적용되지 않으므로, CSS를 활용해 가독성을 높일 수 있습니다.

footer {
  background-color: #333; /* 배경색 */
  color: white; /* 글자색 */
  text-align: center; /* 가운데 정렬 */
  padding: 20px; /* 내부 여백 */
  font-size: 14px;
}
footer a {
  color: #ffcc00; /* 링크 색상 */
  text-decoration: none; /* 밑줄 제거 */
  margin: 0 10px;
}
footer a:hover {
  text-decoration: underline;
}

<footer>
  <p>&copy; 2025 My Website</p>
  <nav>
    <a href="#">개인정보 보호정책</a> | 
    <a href="#">이용약관</a>
  </nav>
</footer>

배경색, 글자색, 정렬, 링크 스타일을 추가하여 더 보기 좋게 꾸밀 수 있음.

 

---

 

<footer> 태그와 <header>, <nav> 태그의 비교

태그	역할
<header>	페이지나 섹션의 머리글(로고, 내비게이션 포함 가능)
<nav>	내비게이션(메뉴, 링크 모음)
<footer>	페이지나 섹션의 바닥글(저작권, 연락처, 추가 정보)

 

---

 

<footer> 태그 요약

• <footer> 태그는 문서나 섹션의 하단(푸터) 역할
• 웹사이트 전체의 푸터뿐만 아니라 개별 섹션의 푸터로도 사용 가능
• 보통 저작권 정보, 사이트맵, 연락처, 관련 링크 등을 포함
• CSS를 활용하여 디자인을 개선할 수 있음
• <header>, <nav> 등과 함께 사용하면 웹사이트의 구조를 더 명확하게 표현 가능

 

---

 

관련글

• [HTML] code 태그
• [HTML] cite 태그
• [HTML] caption 태그