๊ทผ๋์๋ ์ง๊ตฌ์ธ๋งํผ ์ง๊ตฌ๋ฅผ ์ฌ๋ํ ์ ์์ด๋ฅผ ์ฝ์ผ๋ฉฐ ๊ทน์ง๋ฐฉ์ผ๋ก ์ฌํ๊ฐ๋ ๊ฟ์ ํค์ฐ๊ณ ์๋ค. ์ด ๋ค์์๋ ๋ฌด์จ ์ฑ ์ ์ฝ์ง? ๊ฒฝ์ ํ๊ณผ ์๋ฌผํ์ผ๋ก ๋์ด๊ฐ ์์ ์ด๋ค.
์ด๋ฒ์๋ ์ ์ ์ ์ค์์ ๋ํด ๊ธ์ ์ ์ผ๋ ค ํ์ง๋ง ์ ๋ฒ ์ฃผ 4์ผ ์ผ๊ทผ๊ณผ ์๋์น ์์ ์์ ๊ฒ์ฌ(๐)๋ก ํ๋น์ ๋ณด์ง ๋ชปํด ํฌ๊ธฐํ๋ค. ์ด๋ฒ ์ฃผ ๋ผ์ ์์ ์ด ๋๋๊ธฐ ์ ์ด๋, ์์ ํ ํญํ ๋๋ฌผ์ ํ๋ฆฐ ํ์ ์ ์ด์ผ๊ฒ ๋ค. ์ด ์์ค์๋ ์ค์๊ฐ ์์ด๊ณ ์์ผ๋.. ๋ ์ฐธ!
ํ์ด์ด ์ค์ฟผ๋๋ ๋๋์ ํ์ฌ๋ ์๋ก์ด ํ๋ก์ ํธ๋ฅผ ํ ๋น๋ฐ์๋ค. SEO ์ต์ ํํ๋ ๊ฒ์ผ๋ก, ์ฌ์ฉ์๊ฐ ๋ธ๋ผ์ฐ์ ์ ๊ฒ์ํ์ ๋ ์ฐ๋ฆฌ ์๋น์ค๊ฐ ์ต์๋จ์ผ๋ก ๋จ๋ ์์
์ ํ๋ ๊ฒ์ด๋ค. ์ฌ์ด๋ ํ๋ก์ ํธ์์ ํ ๋ <Head>
ํ๊ทธ ์์ ํ๋์ฝ๋ฉ์ผ๋ก ๋ฃ์ด๋ณธ ๊ฒ ๋์ธ๋ฐ, ์ด์ ๋ ๋ฐ์ดํฐ ๊ธฐ๋ฐ์ผ๋ก ์์
ํ ์ ์์ด์ ์ค๋ ๋ค.
์ค๋ ์์นจ์๋ ์ ํ์ ์์ธ ํ์ด์ง์์ "๊ตฌ๋งคํ๊ธฐ" ๋ฒํผ์ด ๋ณด์ด์ง ์๋ ์๋ฌ๋ฅผ ๋ฐ๊ฒฌํ์ฌ ์์ ์กฐ์น๋ฅผ ํ์์ง๋ง, ๋ชจ๋ฐ์ผ ๋ธ๋ผ์ฐ์ ์์ overflow
๊ฐ ๋จนํ์ง ์๋ ํ์๊ณผ height: 100vh;
๊ฐ ๋ค๋น๊ฒ์ด์
๋ฐ๋ฅผ ํฉ์น ํฌ๊ธฐ๋ผ๋ ๊ฒ ๊ทธ๋ฆฌ๊ณ tailwind์์๋ h-[${window.innerHeight}px]
์ฒ๋ผ ๋ณ์๋ก ๋ค์ด๋๋ฏนํ๊ฒ css ์ค์ ํ ์ ์๋ค๋ ๋ฌธ์ ๊ฐ ๊ฒน์ณ์ ์ ๋๋ก ๋์ฒํ์ง ๋ชปํ๋ค. ์ด๋ป๊ฒ ํด๊ฒฐํ๊ฒ ๋ ์ง ๊ถ๊ธํ๋ฉด์ ๊ฑฑ์ ๋๊ณ ํ๊ณ ์ถ์๋ฐ ๋ชป ํ๊ฒ ๋ค. ๋ธ๋ผ์ฐ์ ์ ๋์ํ๋ ๊ฒ์ ์์ฃผ ์ด๋ ค์ด ์ผ์ด๋ค.
์ฃผ 4์ผ ์ผ๊ทผํ๋ฉด ์ถ์ด ์์ด์ง๋๊ตฐ์ค ์ด๋ธ๋ธ
์ค์๊ฐ ๊ถ๊ธํ๋๋ฐ ์์ฝ์ต๋๋ค.. ํ๊ฐํด์ง์๋ฉด ๋ถํ๋๋ฆผ๋ฏธ๋น...
๊ทธ๋ฆฌ๊ณ ํ์ฌ์์ Tailwind ์ฌ์ฉํ๊ณ ๊ณ์๋๋ฐ.. ์ด๊ฒ๋.. ํ ๊ถ๊ธํฉ๋๋ค~
์ ์ด์ 2์ฃผ์ฐจ๊ฐ ๋๋ฌ๋๋ฐ์ ~
OJT ํ๊ณ ์์ด์!! ๊ทผ๋ฐ ์๋ฌด๋๋ ๊ณต๋ถ๊ฐ ๋ถ์กฑํ ์ํ์์ ์ทจ์ ํด์ ๊ทธ๋ฐ์ง ๋ง์ด ๋ฒ๊ฒ๋ค์..