[CSS 레이아웃] 헤더나 푸터 화면에 고정시키기

 

스크롤을 움직여도 고정되어있는 헤더와 푸터 레이아웃 만들기

 

사용자가 스크롤을 움직여도 고정되어 움직이지 않는 헤더(header)와 푸터(footer)를 만들어보려고 합니다. 헤더나 푸터나 고정시키는 원리는 똑같기 때문에 같은 방법으로 고정시킵니다. 밑에 코드의 결과를 한번 테스트해보세요. 테스트는 스크롤을 움직여보면 됩니다. 그리고 소스코드를 하나하나 뜯어서 구현원리를 살펴보도록 하겠습니다.

 

* 소스코드 및 결과

 

  See the Pen https://codepen.io/cocoder16/pen/wvaYqbg">
  wvaYqbg by cocoder16 (https://codepen.io/cocoder16">@cocoder16)
  on https://codepen.io">CodePen.

 

기본적으로 화면에 고정시키는 속성은 position: fixed를 사용합니다. 고정시킬 위치를 정해야 하기 때문에 offset값으로 header의 경우에는 top과 left를 0으로, footer의 경우에는 bottom과 left를 0으로 합니다. 헤더와 푸터의 높이값은 원하시는 대로 설정해주시면 됩니다. 이 예시에서는 고정 px값으로 height값을 주었습니다.

 

주의할 점은 그 높이값만큼 본문에는 padding값을 넣어줘야 한다는 것입니다. 본문에 padding값이 없으면 본문의 최상단이나 최하단이 헤더나 푸터에 가려지는 부분이 생기기 때문에 이를 방지하기 위해 꼭 필요합니다. 고정 헤더를 만든 경우에는 padding-top값을 고정 푸터를 만든 경우에는 padding-bottom값을 사용합니다.