Next.js에서 body에 height 값을...
이번에 Next.JS로 프로젝트를 진행하다가 footer를 하단에 고정시켜야 했다.
그런데 css를 적용했음에도 안되서 개발자 도구를 키고 화면 컴포넌트를 확인하던 도중 화면 사이즈가 전체 화면이 아닌것을 확인하였다.
그래서
<body style="height=100%"></body>형식을 적용하려 했다.
내가 쓰는 Tailwindcss에서 h-full 로 적용하려 했지만 body에 적용이 안되었다.
방법을 찾다 포기하려 했는데 방법을 찾게 되어 공유한다.
1. 공통 레이아웃 또는 _app.tsx 에서 global style 을 적용해준다.
아래의 코드를 적용한다.
...
{/* Body full height */}
<style global jsx>{`
html,
body,
body > div:first-child,
div#__next,
div#__next > div {
height: 100%;
}
`}</style>
...나는 _app.tsx 에 선언된 공통 레이아웃 코드에서 적용 처리를 해줬다.
이렇게 하면 전체 화면이 적용된다.