flex를 이용해 header, main, footer를 배치하는 방법을 알아봅니다. flex를 이용할 경우, 특정 크기를 지정하지 않고 남은 공간에 알아서 배치되기 때문에, 유지 보수에 용이합니다.
flex 이용해서 footer 배치하기
목차
1. 기능 소개
- footer는 화면 제일 하단에 고정시켜야 함.
- flex를 사용하면 header, footer의 특정 값을 부여하지 않아도 되기 때문에 수정이 용이함
2. 코드
- Head, Main, Footer생성
import Head from "./component/Head";
import Main from "./component/Main";
import Footer from "./component/Footer";
function App() {
return (
<div className="app">
<Head></Head>
<Main></Main>
<Footer></Footer>
</div>
);
}
export default App;- flex 배치 후, main에만 flex: 1 속성 부여
body {
margin: 0;
padding: 0;
min-height: 100vh;
}
.app {
display: flex;
flex-direction: column;
// 화면 꽉 채우기 위해 최소 높이 설정
min-height: 100vh;
}
.head,
.main,
.footer {
border: 1px solid black;
padding: 10px;
}
.main {
// head, footer를 제외한 모든 공간을 main이 차지하도록 함
flex: 1
}3. 구현 코드로 보기