-
[Next.js Footer] 적용하기.카테고리 없음 2023. 2. 7. 12:47반응형
지금까지 알아본 방법은 두가지다.
position absolute는 제외한다. 워낙 문제가 많은 것 같다.
# position fixed 를 사용.
예시: mantine 페이지
https://mantine.dev/core/collapse/
z-index를 사용한다.
position을 float, fixed, absolute로 하면, 자식 요소의 높이 값을 잃어버린다.
따라서, 이렇게 빈 공간을 만들어주곤 한다.
position fixed와 bottom 0을 추가하면 된다.
위에서, z-index를 없애주거나 반대로 footer가 더 높도록 설정해주면, 항상 하단 고정인 상태로도 구현이 가능하다.
# height 100%를 사용.
이 방법을 적용할 때 필수 사전 작업이 있다.
html부터 모든 부모요소의 height가 100%여야한다.
여기에 <html> <body> <div> <main> 등등 모든 부모 요소의 height가 100%이어야한다.
적용방법
_app..tsx의 return 에 다음을 추가한다.
<style global jsx>{` html, body, body > div:first-child, div#__next, div#__next > div { height: 100%; } `}</style>main 태그는 그냥 inline으로 처리하였다.
그리고 적용하고 싶은 부분 코드를 아래처럼 적용하면 된다.
본문 내용을 전체 높이를 차지하게 만들고, footer를 위에 덮는 형식이다.
그런데 이렇게 하면 전체 높이를 넘어서게 되므로, translateY(-100%)을 해준다.
또한, 덮는 형식이다보니, 본문 내용이 많으면 가려지는 현상이 발생한다.
따라서 padding으로 footer를 위한 공백 자리를 만들어준다.
padding이 아니라, 본문 요소의 자식 요소 맨 마지막에 div로 공백 자리를 해주어도 된다.
반응형