TailwindCss 화면 전체 잘 활용하기

최근 프로젝트를 하면서 웹사이트 디자인을 모두다 TailwindCss를 활용하여 개발하고 있습니다.

에전에는 만들어진 컴포넌트들을 정해진 용법에 의해서 쓰는 방식(대표적으로 Bootstrap)를 많이 사용했었는데, 그것도 가끔 커스터마이징이 쉽지 않아 제 마음대로 세세한 커스터마이징 까지 가능한 TailwindCss가 저에게는 더 적합 했습니다.

현재 작업중인 프로젝트에서 전체 화면을 정확하게 딱 쓰고 싶은데, Absolute 속성의 NavBar와 Footer가 있는 상황에서 해상도에 따라 딱 맞게 하는 것이 쉽지 않았습니다.

그러다가 이번에 나름대로의 솔루션을 확보 했습니다..!!

---

보통 NavBar와 footer은 높이를 정해놓고 변경하는 경우가 거의 없으므로, 이런 경우에는 이 방법이 아주 효과적인 것 같다는 생각이 드네요.

// NavBar 부분 Height가 40
// Footer 부분 Height가 100인 경우

<div className="min-h-screen sm:-mt-[140px]">

부분설명

• min-h-screen : 최소한 스크린 전체 화면 크기만큼 되어야 한다.(눈에 보이는 브라우저 높이 크기만큼 설정)
• sm:-mt-[140px] : 스크린 크기가 sm 이상(태블릿 사이즈 이상)인 경우에는 NavBar + Footer의 높이만큼 마이너스 Margin을 준다

이렇게 하는 경우 한화면에 NavBar Footer 두개가 모두 나와야 하는 경우라면 나머지 부분이 모두 Body 부분으로 채워지게 됩니다.

그리고 body부분이 min-h-screen 보다 더 커지는 경우에도 아무런 문제가 없구요.

SteemPunks 작업 할 때 Footer가 모니터 가운데 뚱하게 올라오는 경우가 있었는데, 이번에 모두 수정해야겠습니다.