[CSS] Footer 만들기

웹 페이지를 개발하면 Footer를 사용할 때가 많다.

HTML 컴포넌트에 다음과 같이 CSS를 적용하면, 페이지의 컨텐츠 길이와 상관 없이 항상 페이지 하단에 표시되는 footer를 만들 수 있다.

<div class="footer">
	Footer
</div>

.footer {
    background: #F4F7F7;
    height: 2rem;
    margin-top: auto;
    width: 100%;
    position: absolute;  
    bottom: 0;
    left: 0;
}

 

위와 같이 코드 작성하면 아래와 같이 적용된다.

하단에 footer가 적용되었다.