HTML CSS JS - Footer 적용하기

오늘은 실전프로젝트 전공수업인 2번째 프로젝트에서, Footer을 적용하는 방법을 포스팅하고자 한다.

 

우선 내가 개발하고자 했던 프로그램은, '단골 관리 웹사이트'이다.

 

요게 바로 footer, 즉 발을 의미하는 foot처럼 하단에 있는 내용이다.

 

지금 이 글을 작성하고 있는 티스토리 포스팅 글에도 footer이 적용되어 있는데, 



웬만한 웹사이트에는 이 footer이 적용돼있는 것을 확인할 수 있다.

 

우선 코드를 보자! 

 

<footer class="container-fluid">
  <footer>
    <h>copyright ⓒ 2023 KIM SOLMI ALl rights reserved. lnc 2023 실전프로젝트
      <button> 
        <i class="fas fa-smile-wink"></i> 
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
          
                    <style>

 

footer {
  position: fixed;
  left: 0px;
  right: 0px;
  bottom: 0px;
  text-align: center;
  padding: 10px;
  /* background-color: #abbaba; */
  color: #ffffff;
}

를 파악해 보면, 중요한 것은 

 

position : fixed;

left : 0px;

right : 0px;

bottom : 0px; 

 

이다.

 

내가 처음 범했던 실수로는 position : fixed; 만 고정을 했던 것인데,

웹 전체적으로 봤을 때 어디에 고정을 할 것인지, 왼쪽/오른쪽/바텀을 0 pixel 만큼 띄워진 곳에 footer을 두겠다는 것이다.