Last update: @3/16/2023
푸터(footer)
•
사이트 바닥에 붙은 정보 카드를 footer라고 부름
•
쉬워보이면서도 은근히 까다로운 footer (사실 모든 CSS가 다 그런 것 같다)
◦
인터넷에 있는 대부분의 정보가 개인적으로 적용이 잘 안 됐음
◦
이런저런 조사와 실험 끝에 적용에 성공한 케이스를 기록함
•
footer에게 기대하는 요건은 아래와 같음
◦
항상 바닥에 붙은 상태로 보임
◦
단, 본문이 길어지면 아래로 밀려나며 스크롤 안으로 숨음
•
우리가 일반적으로 기대하는 footer의 동작 예시
또는
구현
<html>
<head>
<style>
header, section, footer {
border: 1px solid gray; /* 확인용 */
}
* {
margin: 0; /* 필수는 아님 */
}
body, html{
height: 100%;
}
header {
height: 100px; /* header 높이, 임의 지정 */
position: relative;
z-index: 1;
}
section {
box-sizing: border-box;
min-height: 100vh;
padding-top: 100px; /* header 보금자리 */
padding-bottom: 100px; /* footer 보금자리 */
transform: translateY(-100px); /* header 높이 만큼 이동 */
}
footer {
height: 100px; /* footer 높이, 임의 지정 */
transform: translateY(-200px); /* section이 올라간 높이 + 본인 높이 만큼 이동 */
}
</head>
<body>
<header>header</header>
<section>section</section>
<footer>footer</footer>
</body>
</html>
HTML
복사
•
body, html
◦
height: 100%: section과 footer를 위쪽으로 이동(transform)시킨 후 하단에 공간이 남지 않도록 함
•
header
◦
position: relative: z-index를 적용시키기 위해 static position을 해제
◦
z-index: 1: transform을 통해 올라온 section의 padding이 header를 덮어버려서 버튼 클릭이 안 되는 현상을 해결
•
section
◦
box-sizing: border-box: padding이 높이 계산에 포함되지 않도록 함
◦
min-height: 100vh: 최소 높이를 지정해 본문이 작더라도 footer가 딸려올라오지 않도록 막음
▪
vh는 브라우저 창 기준 퍼센티지로 높이를 지정하는 속성
◦
padding-top: 100px: header가 들어올 보금자리를 마련함
◦
padding-bottom: 100px: footer가 들어올 보금자리를 마련함
◦
transform: translateY(-100px): section을 header 높이만큼 이동시켜 header를 품음
•
footer
◦
transform: translateY(-200px): footer를 section의 패딩 안으로 이동시킴
결과
•
본문이 작을 경우
◦
착한 푸터는 바닥에 잘 붙어 있다
◦
아래처럼 화면을 줄여도
◦
얌전히 따라 올라오는 순종적인 푸터
•
본문이 클 경우
◦
본문이 길어지자 스크롤 최하단으로 자리를 비킨 예의바른 푸터