์žฌ๋ฐŒ๊ฒŒ ํ•ฉ์‹œ๋‹ค

๊ธฐ๋กํ•˜๊ธฐ, ๊ฐ€์‹œํ™”ํ•˜๊ธฐ

์ „์ฒด ๊ธ€ 31

React+vite์—์„œ ์ปดํฌ๋„ŒํŠธ height 100% ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•

vite๋กœ ๋นŒ๋“œํ•œ React ํ”„๋กœ์ ํŠธ์—์„œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์— ๊ฝ‰์ฐจ๊ฒŒ ๋งŒ๋“ค์–ด๋ณด์ž. ๋ฌธ์ œ ์ƒํ™ฉ ์ปดํฌ๋„ŒํŠธ(๋ถ„ํ™์ƒ‰ ์˜์—ญ)์˜ height๋ฅผ 100%๋กœ ์„ค์ •ํ–ˆ์Œ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ๊ฐ€ ํ™”๋ฉด์— ๊ฝ‰ ์ฐจ์ง€ ์•Š๋Š”๋‹ค. body ํƒœ๊ทธ์— height:100vh๊ฐ€ ์„ค์ •๋˜์–ด ์žˆ์—ˆ์ง€๋งŒ ๋จนํžˆ์ง€ ์•Š์•˜๋‹ค. ํ•ด๊ฒฐ ๋ฐฉ์•ˆ React - Component Full Screen (with height 100%) ์œ„ ๊ธ€์—์„œ ํžŒํŠธ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค. CRA์˜ ๊ฒฝ์šฐ body ํƒœ๊ทธ ํ•˜์œ„์— ๊ฐ€ ์กด์žฌํ•œ๋‹ค. ๋”ฐ๋ผ์„œ html, body๋ฟ ์•„๋‹ˆ๋ผ #root์—๋„ height:100% ์„œ์‹์„ ์ง€์ •ํ•ด์•ผ ํ•œ๋‹ค. vite๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋‹ค. ๋‹ค๋งŒ ๋‚˜๋Š” ๊ธ€๋กœ๋ฒŒ ์Šคํƒ€์ผ์„ main.tsx(CRA์˜ index.js)์— importํ•ด์„œ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— #root๋กœ ์„œ์‹์„ ์ง€์ •ํ•  ..

css 2022.08.10