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가 모니터 가운데 뚱하게 올라오는 경우가 있었는데, 이번에 모두 수정해야겠습니다.
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.
[by @happyberrysboy] TailwindCss 화면 전체 잘 활용하기
https://www.steemit.com/@kr-dev.cu0/happyberrysboy-posting-2022-05-04-16-15
@kr-dev.cu0님이 당신을 멘션하였습니다.
멘션을 받고 싶거나 받지 않으시려면 댓글을 남겨주세요. 빠른 시일내에 반영하도록 하겠습니다.
Upvoted! Thank you for supporting witness @jswit.
![default.jpg](https://steemitimages.com/640x0/https://cdn.steemitimages.com/DQmNwBDPMPvL1yaKWTYF4wxyUmxWiEJgAy1WZWTJyCha5wE/jswit_comment_initial.w320.jpg)
Please check my new project, STEEM.NFT. Thank you!
@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]