Front-End의 모든것/HTML

HTML 이란? - footer 태그에 대해서 -4

모두다레벨업 2024. 10. 14. 22:41
728x90
반응형

 

안녕하세요 여러분!

한분 한분 블로그에 들어오셔서

제 글을 읽어주시는 분들이 늘어나고있어

 

얼마나 뿌듯하고 기쁜지..

콧김이 아주 뜨겁도록 흥분하고 있습니다.

 

 

 

 

오늘은 

<head>태그와 <body>태그에 이어

<footer> 태그에 대해서 알아보려고 합니다!

 

사실 <footer>태그는 head나 body처럼 html태그 최상단에 들어가는 태그는 아니고,

body태그 안에 작성되는 html5에 새로 추가된 태그인데요,

 

시맨틱마크업에 필요한 태그 중 하나로서 소개해드리려고합니다.

(시맨틱마크업에 대해서도 추후 정말 상세히 다뤄보겠습니다!)

 

자 그럼 지금부터 footer 태그에 대해 한번 알아보시죠!

 

ⓒ Photography by pexels - https://www.pexels.com/

 

 

 

1️⃣ Footer 태그란?

<footer> 태그는 웹 페이지나 섹션의 하단(바닥글) 부분을 정의하는 HTML5 태그입니다. 이 태그는 페이지의 끝부분에 주로 위치하며, 해당 문서나 섹션에 대한 요약 정보, 저작권 정보, 연락처 정보, 링크, 소셜 미디어 아이콘 등을 포함하는 데 사용됩니다. <footer>는 웹 페이지 전체 또는 개별 섹션의 바닥글을 의미할 수 있어, 문서 내에서 여러 번 사용할 수 있습니다.

 

 

2️⃣ 주요 특징

 

  • 문서나 섹션의 하단: 문서의 전체적인 끝부분이나, 섹션별로 하단에 위치하는 영역을 정의합니다.
  • 구조적 의미 부여: HTML5에서 <footer>는 단순한 레이아웃 요소가 아닌, 문서나 섹션의 의미적 하단을 정의하는 구조적인 요소입니다.
  • 반복적 사용 가능: 전체 페이지뿐만 아니라, 개별 섹션 또는 아티클 내에서도 사용할 수 있습니다.

 

 

3️⃣ <footer> 태그 안에 포함될 수 있는 콘텐츠

 

  • 저작권 정보: 웹 페이지의 저작권을 명시합니다.
  • 작성자 및 연락처 정보: 작성자나 웹 사이트 관리자, 혹은 회사의 연락처 정보를 제공할 수 있습니다.
  • 사이트 맵 또는 내비게이션 링크: 사이트의 다른 페이지로 연결되는 링크 목록을 포함할 수 있습니다.
  • 약관 및 정책 링크: 개인정보 보호정책, 서비스 약관, 법적 고지 등에 대한 링크가 자주 포함됩니다.
  • 소셜 미디어 링크: 페이스북, 트위터, 인스타그램 등의 소셜 미디어로 연결되는 아이콘이나 링크.
  • 저작자 정보: 문서나 아티클의 작성자 정보를 포함할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Example</title>
</head>
<body>
  <header>
    <h1>웹 페이지 제목</h1>
  </header>

  <main>
    <article>
      <h2>기사 제목</h2>
      <p>이곳은 웹 페이지 본문 내용입니다.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2024 회사 이름. All rights reserved.</p>
    <nav>
      <a href="/privacy">개인정보 보호정책</a> |
      <a href="/terms">이용 약관</a>
    </nav>
    <p>Contact: <a href="mailto:info@example.com">info@example.com</a></p>
  </footer>
</body>
</html>

 

 

 

 

4️⃣ <footer>의 일반적인 사용 사례

 

  • 전체 페이지의 바닥글: 위 예시처럼 문서의 마지막 부분에 저작권 정보, 연락처, 약관 등을 표시하는 역할을 합니다.
  • 개별 섹션이나 아티클의 바닥글: <article>이나 <section> 내부에도 <footer>를 사용할 수 있으며, 주로 해당 아티클의 저자 정보, 날짜, 관련 링크 등이 포함됩니다.
<article>
  <h2>블로그 포스트 제목</h2>
  <p>여기에는 블로그 포스트의 본문 내용이 있습니다.</p>
  <footer>
    <p>작성자: 홍길동 | 작성일: 2024년 10월 12일</p>
  </footer>
</article>

 

 

 

 

5️⃣ <footer>와 자주 비교되는 태그들

 

  • <header>: 문서나 섹션의 머리말을 정의하며, 일반적으로 페이지나 섹션의 상단에 위치합니다.
  • <nav>: 내비게이션 링크를 포함할 수 있는 요소로, 보통 전체 사이트의 주요 링크들을 묶는 데 사용됩니다.
  • <section>: 문서의 특정 섹션을 의미하며, <footer>는 이러한 섹션의 끝부분에 위치할 수 있습니다.

 

 

<footer> 태그는 문서나 개별 섹션의 하단을 구조적으로 정의하고,

중요한 정보나 추가적인 링크를 제공하는데 사용됩니다.

이를 통해 웹 페이지의 사용자 경험을 높일 수 있습니다!

 

무한스크롤 방식의 사이트에는 footer영역이 거의 사용되지않을 수 있지만,

그렇지 않다면 모든 사이트에서 정보를 표기하기위해 사용되고있습니다!

 

다음시간에는

같은 body에 포함되는데, 시멘틱마크업시 표현하는 태그인

header 태그에 대해서 알아보도록 하겠습니다!

 

그럼 오늘도 즐거운 하루 되시길!!

 

 

728x90
반응형