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가 모니터 가운데 뚱하게 올라오는 경우가 있었는데, 이번에 모두 수정해야겠습니다.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.

[by @happyberrysboy] TailwindCss 화면 전체 잘 활용하기
https://www.steemit.com/@kr-dev.cu0/happyberrysboy-posting-2022-05-04-16-15

@kr-dev.cu0님이 당신을 멘션하였습니다.
멘션을 받고 싶거나 받지 않으시려면 댓글을 남겨주세요. 빠른 시일내에 반영하도록 하겠습니다.

image.png

Upvoted! Thank you for supporting witness @jswit.
Please check my new project, STEEM.NFT. Thank you!
default.jpg

@happyberrysboy transfered 50 KRWP to @krwp.burn. voting percent : 100.00%, voting power : 19.08%, steem power : 1964541.06, STU KRW : 1200.
@happyberrysboy staking status : 13840 KRWP
@happyberrysboy limit for KRWP voting service : 13.84 KRWP (rate : 0.001)
What you sent : 50 KRWP (Voting Percent over 100 %)
Refund balance : 46.173 KRWP [63882383 - 81fa8672dce8ab73286bf865f1297a1596172ae4]