02. main 화면: footer 고정

main 화면에는 어느 화면이던지 고정되어 있는 header(navbar), footer와 동아리 소개 내용(intro, about, study, photo, 을 담고있는 부분이 필요했다.

 

다른 부분은 무난히 코드를 쓸 수 있었지만 footer를 화면 맨 하단에 고정시키는 것과 동아리 소개 내용의 photo 부분에서 어려움이 있었다.

 

이번 글에서는 내가 어떻게 footer를 화면 맨 밑에 고정시킬 수 있었는지 설명할 것이다. 

 

<App.js>

import './App.css';
import Main from './components/Main';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Nav from './navigation/Nav';
import About from './components/About';
import Study from './components/Study';
import Project from './components/Project';
import Header from './components/Header';
import Navbar from './components/Navbar';
import AboutPage from './components/AboutPage';
import StudyPage from './components/StudyPage';
import Footer from './components/Footer';

const App=()=> {
  return (
    <Router>
      <div className="App">
          <Navbar/>
          <div className="App-header">
          <Routes>
            <Route path='/' element={<Main/>}/>
            <Route path='/about' element={<AboutPage/>}/>
            <Route path='/study' element={<StudyPage/>}/>
            <Route path='/project' element={<Project/>}/>
          </Routes>
          </div>
          <Footer/>
    </div>
    </Router>

  );
}

export default App;

이게 App.js인데 <Navbar/>와 <Footer/>는 어떤 화면이던지 위, 아래 위치를 지켜야 하기 때문에 Router 안, Routes 바깥에 위치 시켜놨다.

 

App.css

.App {
  background-color: black;
  color: 'white';
  min-height: 100vh;
  
}

.App-header {
  background-color: black;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: calc(10px + 2vmin);
  color: white;
  padding-bottom: 100px;
  padding-left: 50px;
}

 

 

 

<Footer.js>

import React from 'react';
import '../styles/footer.scss'

const Footer = () => {
    return (
        <div className='footer_container'>
            <div className='links'>
                <a href='https://www.notion.'>Notion</a>
                <a href='https://www.instagram.com'>Instagram</a>
                <a href='https://github.com'>Github</a>
            </div>
            <div>
                <p>
                    MCC Myungji Computer Club (명지대학교 컴퓨터 동아리)<br/>
                    Copyright©2024.MCC. All rights reserved.
                </p>
            </div>

        </div>
    );
};

export default Footer;

 footer는 이렇게 구성했다.

 

footer.scss

.footer_container{
    background-color: rgb(11, 37, 60);
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 100%;
    text-align: center;
    color: white;
    font-family: "Lato", sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;

    a{
        text-decoration: none;
        color: white;
        margin: 10px;
    }
    
}

맨 처음에는 position: fixed를 했는데 이렇게 하니까 스크롤과 상관없이 하단에 고정되어있어서 보기 안좋았다. 그리고

position: absolute를 하니까 맨 처음 화면 하단에 배치된 footer가 스크롤을 해도 그자리에 그대로 있었다. 

 

그리고 생각해낸것이 App.css에서 .App-header에 높이가 100px인 footer가 들어가 공간을 남겨두자 생각하고 padding-bottom:100px을 줬다.

그리고 footer.scss에서 footer의 높이를 100px로 지정하니까 하단에 잘 고정되었다.