Header와 Footer의 position 속성

Header

CSS의 postion 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정한다. Header의 경우 모든 상황에서 항상 최상단에 위치하는 것이 일반적이므로, Header의 postion 속성은 fixed로 지정해주는 것이 일반적이다.

postion: fixed;
top: 0;
width: 100%;

이렇게하면 Header는 완전히 독립되어 브라우저 화면(viewport) 상에서 항상 최상단에 위치하게 되며, 브라우저 화면을 스크롤했을 때도 영향을 받지 않기때문에 움직이지 않는다.

하지만, 처음이라면 생각하지 못할 요소가 있는데 그것은 바로 '완전히 독립'되어 있다는 점이다.
Header 밑에 바로 body를 만들었을 경우 Header는 body와는 완전히 독립되어 있기때문에 body의 상단부를 덮어버린다.
(물론 전부 배웠던 거지만, 막상 실전에서 쓸때는 기억을 해내지 못해서 꽤나 고생했다.)

이는 상단 고정 메뉴바를 사용할 때 흔히 겪는 문제이며, body 엘리먼트에 Header의 높이만큼 padding을 주어 쉽게 해결할 수 있다.

body {
/* 헤더의 높이 */
padding-top: 100px;

/* 생략 */
}

 

 

Footer

Footer도 헤더처럼 postion: fixed를 쓰면 될 것 같지만 사실은 그렇지 않다. 컨텐츠가 길어지면 스크롤에 관계없이 항상 브라우저 하단에 위치하기 때문이다. postion: absolute를 써도 이와 비슷한 문제가 생긴다.

 

컨텐츠 길이에 상관없이 화면 하단을 footer로 고정시키려면 아래와 같은 방법을 추천한다. Header의 postion:fixed의 문제를 해결한 원리와 같다.

#body {
/* 생략 */

/* Footer의 높이 */
padding-bottom: 100px;
}

footer {
height: 100px;
postion: relative;
transform : translateY(-100%);
}