Next.JS에서 height full (전체화면) 적용하기 (with tailwindcss)
March 02, 2022
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 에 선언된 공통 레이아웃 코드에서 적용 처리를 해줬다.
이렇게 하면 전체 화면이 적용된다.
