CSS로 footer 페이지 하단 고정하기

Foot. er. Footer!

 

Footer Page는 일반적으로 저작권 정보, 연락처, 관련된 문서 등의 내용을 포함하는 페이지의 최하단의 영역을 말합니다. 페이지의 최하단에 위치하도록 CSS를 통해 Footer 설정하는 방법을 알아보도록 하겠습니다.

 

Footer Page의 한 예제(MS docs)

 

HTML5에서 <footer> 태그가 새롭게 추가되어 간단하게 footer page 등록이 가능합니다.

 

CSS로 가서 다음과 같이 작성해주도록 합시다.

 

.footer {
	display: block;
}

 

---

 

제가 포스팅을 작성하는 이유이기도 하지만, 위와 같은 방법으로도 footer가 하단 고정이 되지 않을 경우 다음과 같이 CSS로 몇가지 요소를 추가해주어 고정시키는 방법도 있습니다.

 

.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}