TIL : footer 하단에 고정하기

 

footer를 고정 시킬 때, 알고서 제대로 하는 느낌이 아니었기에 강의를 보고 다시 수정해봤다!
앞으로는 그냥 위치만 보고 하는게 아니라 이해하고 고정 시킬 수 있겠다🤣

 

코드가 합쳐지는 과정에서 footer가 이상해졌다. 😅

수정할 겸 자세히 공부 해봤다

페이지 양에 따라 footer 위치가 달라진다. HTML은 왼쪽 상단에 붙으려고 하기 때문에 지금은 footer이 내용이 끝나는 바로 아래 지점에 붙어 있다.

footer을 맨 밑에 고정하려면??

 

🌼 position :fixed 속성

.footer {
  background-color: black;
  color: antiquewhite;
  position: fixed;
}

 

position 속성을 주는 순간 

안에 있는 크기만큼만 너비가 잡힌다.

.footer {
  background-color: black;
  color: antiquewhite;
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 0;
}

 

전체적으로 다 채우면서 맨 아래에 위치시키기 위해 이 속성들을 추가 해준다.

 

그럼 이렇게 고정이 된다.

 

치명적인 단점은

내용이 훨씬 길어진다면??

기존 content 위에 footer가 올라온다.

화면을 기준으로 하단에 고정시켰기에 저기에 위치하는 것이다. 

내용이 짧을 때는 하단에 푸터가 있지만 내용이 길어지면 푸터가 밀려서 더 밑에 있어야 한다. 

결론은 fixed하면 안된다. 

 

---

🌼 position : relative 속성, transform 

import "./styles.css";
function App() {
  return (
    <div className="wrapper">
      <div className="header">footer에 대하여</div>
      <p>
        인공지능 기술, 특히 챗봇과 관련된 연구와 개발이 계속해서 주목받고
        있습니다. GPT-4와 같은 대규모 언어 모델의 성능이 향상되면서, 다양한 산업
        분야에서 이 기술을 활용하려는 시도가 늘어나고 있습니다. 이러한 AI 기술은
        고객 서비스, 의료 상담, 교육 등 다양한 분야에서 활용될 가능성이 큽니다.
      </p>
      <p>
        데이터 프라이버시와 보안: 최근 몇 년간 데이터 유출 사건이 빈번하게
        발생하면서, 개인 정보 보호와 데이터 보안 문제가 큰 화두로 떠오르고
        있습니다. 이에 따라 각국 정부와 기업들은 강화된 데이터 보호 법안을
        마련하고, 보안 시스템을 업그레이드하고 있습니다​ (mint)​​ (Vajiram &
        Ravi)​.
      </p>
      <p>
        메타버스와 가상 현실: 메타버스 기술이 빠르게 발전하면서, 가상 현실(VR)과
        증강 현실(AR) 시장도 함께 성장하고 있습니다. 이 기술은 게임 산업뿐만
        아니라 교육, 원격 근무, 소셜 네트워킹 등 다양한 분야에서 활용될 수
        있습니다. 최근에는 기업들이 메타버스 플랫폼을 통해 새로운 비즈니스
        모델을 창출하고자 노력하고 있습니다​ (Vajiram & Ravi)​​ (Global
        Issues)​.
      </p>
      <div className="footer">footer</div>
    </div>
  );
}
export default App;

 

구조 자체를 바꿔야 한다. 

지금은 wrapper안에 header, content, footer이 다 들어가 있다. 

푸터를 바깥으로 내쫒고

 

👉 최종 css 코드

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.wrapper {
  height: auto;
  min-height: 100%;
  padding-bottom: 100px;
  //푸터를 강제로 위로 이동 시켰기에 내용이랑 겹치는 부분이 생겨 padding를 준다
}
.App {
  font-family: sans-serif;
  text-align: center;
}
.header {
  background-color: black;
  color: antiquewhite;
}
.footer {
  background-color: black;
  color: antiquewhite;
  height: 100px;
  left: 0;
  width: 100%;
  position: relative;
  transform: translateY(-100%);
  //자기가 원래 있던 위치에서 100퍼만큼 올라감
}

우선 html, body가 높이랑 너비를 100프로 다쓰는지 확인하고

wrapper한테 이 지분을 다 주면 푸터의 자리가 없어진다. 

 

내용이 짧을 때는 붙어 있고

길어길 때는 밑에 있다. 

 

=> 이 방법은 푸터를 내쫒아야 해서 html 구조를 바꿔야 한다. 

---

 

<추가로 공부할 것>

🌹  flex방법으로 footer고정하기 및 정리

 

 

https://www.youtube.com/watch?v=who42wBr1ns&t=54s
이 영상을 참고해서 정리 했습니다.