[Tailwind CSS] ํน์ ๊ตฌ์ญ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง + ํ์ด์ง ์ ์ฒด์ ํค๋ ์ปดํฌ๋ํธ๋ฅผ ์๋จ ๊ณ ์ ์ํค๊ธฐ
ยท
๐ชด HTML & CSS
๐ซง 4.10 ( + next.js) ์ด์ ์ด ๊ธ์ ๋์จ ๋ฐฉ๋ฒ๋๋ก ํ๋ฉด div์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๋ ์ ์ ์ฉ๋๋ค. ํ์ง๋ง ๋ด ๊ฒฝ์ฐ ํ ํ์ด์ง ๋ด์์ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง๋ฅผ ์๋จ ์ด๋ ๋ถ๋ถ๊น์ง๋ง ์ ์ฉํ๊ณ , ํค๋ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ ์ด๋ฅผ ๊ฐ์ ธ์์ ์ ์ฒด์ ์ ์ฉํ๊ณ ์ถ์๋ค. (ํค๋๋ ์คํฌ๋กค์ ๋ด๋ฆฌ๋ฉด์ ๊ณ ์ ๋์ด์๋ ์ํ) (1) ๋ฌธ์ โ๊ทธ๋ฐ๋ฐ ๊ทธ ๋ฐฉ๋ฒ๋๋ก (div className="bg-...") ํ๋ฉด ๋๋ ์ ์ฒด ํ์ด์ง์ ํค๋๋ฅผ ์ ์ฉ์ํค๊ณ ์ถ์๋ฐ ๊ทธ๊ฒ ์๋๋ค. ์ฆ ๋ฌธ์ ๋, ๊ทธ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง๊ฐ ์ ์ฉ๋ div ๋ด์์๋ง ํค๋๊ฐ ๋ฌ๋ค๋ ๊ฒ์ด๋ค. ๊ทธ div๋ฅผ ๋ฒ์ด๋๋ฉด ํค๋๋ ์ธ ์ ์๋ค. (์ฝ๋๋ฅผ ๋ด๋ ๋น์ฐํ ๊ฒฐ๊ณผ..) ๊ทธ๋ ๋ค๊ณ Header์ปดํฌ๋ํธ๋ฅผ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ์ ์ฉ๋ div ์์์์ ์ธ ์๋ ์๊ณ .. (=> ๊ทธ๋ผ ํค๋์ ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง ์ ์ฉ X) ๋ฐฐ..