Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML5에서 문서나 섹션의 바닥글(푸터) 만드는 방법

HTML에서 문서나 특정 섹션의 바닥글(푸터)을 표시하려면 <footer> 태그를 사용합니다. 이 태그는 HTML5에서 새롭게 도입된 시맨틱 요소로, 저작권 정보, 작성자 정보, 연락처, 관련 링크 등 페이지 하단에 배치되는 내용을 담는 데 사용됩니다.

<footer> 태그란?

<footer> 요소는 가장 가까운 상위 구획 콘텐츠(<section>, <article> 등) 또는 루트 요소(<body>)의 바닥글을 나타냅니다. 일반적으로 다음과 같은 정보를 포함합니다.

  • 저작권(Copyright) 정보
  • 작성자 및 연락처 정보
  • 사이트맵이나 관련 문서 링크
  • 이용약관, 개인정보 처리방침 등의 링크

예제 코드

다음 코드를 실행하면 <footer> 태그가 실제로 어떻게 동작하는지 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Footer Tag</title>
   </head>
   <body>
      <header>
         <h1>Simply Easy Learning</h1>
         <p>tutorialspoint.com에 방문해 주셔서 감사합니다.</p>
      </header>
      <footer>
         &copy; Copyright 2018, All Rights Reserved
      </footer>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 열면 상단에는 헤더 영역이, 하단에는 저작권 문구가 포함된 푸터가 표시됩니다. 기본적으로 <footer> 요소는 블록 레벨(block-level)로 동작하며, 별도의 스타일 없이도 화면 하단에 한 줄을 차지하게 됩니다.

참고 사항

<footer> 태그는 하나의 문서에 여러 번 사용할 수 있습니다. 예를 들어 각 <article> 요소 안에 개별적인 푸터를 넣어 해당 글의 작성자나 작성일을 표시할 수 있습니다. 모든 최신 브라우저(Chrome, Firefox, Safari, Edge 등)가 이 태그를 지원하므로 호환성 걱정 없이 사용할 수 있습니다.