Tailwind CSS์์ ์ ํธ๋ฆฌํฐ ํด๋์ค์ ๋๊ดํธ []๋ฅผ ์ฌ์ฉํ๋ฉด ๋ง์ถค ๋๋ ๋์ ๊ฐ์ ์ ์ฉํ ์ ์๋ ๋ฐ๋ฉด,๋๊ดํธ๋ฅผ ์ฌ์ฉํ์ง ์์ผ๋ฉด ์ฌ์ ์ ์๋ ํ์ค ์ ํธ๋ฆฌํฐ ๊ฐ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋๊ดํธ []๋ฅผ ์ฌ์ฉํ์ง ์๋ ์์ (์ฌ์ ์ ์๋ ํด๋์ค ์ฌ์ฉ)์ด ๊ฒฝ์ฐ, Tailwind์ ์ฌ์ ์ ์๋ ๊ฐ์ ์ฌ์ฉํ์ฌ ๋๋น, ๋ฐฐ๊ฒฝ์, ํจ๋ฉ ๋ฑ์ ์ค์ ํฉ๋๋ค. ์ฌ์ ์ ์๋ ์ ํธ๋ฆฌํฐ ํด๋์ค w-32: ๋๋น๋ฅผ 8rem(128px)์ผ๋ก ์ค์ ํฉ๋๋ค.bg-blue-500: ์ฌ์ ์ ์๋ ํ๋์์ ๋ฐฐ๊ฒฝ์์ผ๋ก ์ ์ฉํฉ๋๋ค.p-4: 1rem(16px)์ ํจ๋ฉ์ ์ถ๊ฐํฉ๋๋ค. ๋๊ดํธ []๋ฅผ ์ฌ์ฉํ๋ ์์ (๋ง์ถค ๊ฐ ์ฌ์ฉ)์ฌ๊ธฐ์๋ []๋ฅผ ์ฌ์ฉํ์ฌ Tailwind๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ํ์ง ์์ ๋ง์ถค ๊ฐ์ ์ ์ฉํฉ๋๋ค. ๋ง์ถค ์ ํธ๋ฆฌํฐ ํด๋์ค w-[200..
Tailwind CSS ์ฌ์ฉํด๋ณด๊ธฐTailwind CSS(opens in a new tab) ๋ ?Next.js์ ๋งค์ฐ ์ ์ด์ธ๋ฆฌ๋ ์ ํธ๋ฆฌํฐ ์ฐ์ CSS ํ๋ ์์ํฌ์
๋๋ค.์ฅ์ ์ ํธ๋ฆฌํฐ ์ฐ์ ํ๋ ์์ํฌ: Tailwind CSS๋ ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฌ์ฉํ์ฌ ๋น ๋ฅด๊ณ ํจ์จ์ ์ธ ์คํ์ผ๋ง์ ๊ฐ๋ฅํ๊ฒ ํ๋ฉฐ, ํ๋ก์ ํธ ์ ๋ฐ์ ๊ฑธ์ณ ์ผ๊ด๋ ์คํ์ผ์ ์ ์งํ๋ฉด์๋ ์ฝ๊ฒ ๋์์ธํ ์ ์์ต๋๋ค.๋ง์ถคํ ๊ฐ๋ฅ: Tailwind CSS๋ ๋ชจ๋ ๋์์ธ ์์คํ
์ ๋ง๊ฒ ํ์ฅ ๋ฐ ๋ง์ถค์ค์ ์ด ๊ฐ๋ฅํด, ๋ค์ํ ํ๋ก์ ํธ์ ์ ์ฐํ๊ฒ ์ ์ฉํ ์ ์์ต๋๋ค.๋ค์ํ ํ๋ ์์ํฌ์ ํตํฉ: Next.js, Nuxt.js, Vue.js ๋ฑ๊ณผ ์ ํตํฉ๋๋ฉฐ, PostCSS๋ฅผ ์ง์ํ์ฌ ์๋ ์ ๋์ด ์ง์ ๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ํ์ฑํํ ์ ์์ต๋๋ค.์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ ๋ถ๋ฆฌ: Ta..
Scssnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}CSSnav ul { margin: 0; padding: 0; list-style: none;}nav li { display: inline-block;}nav a { display: block; padding: 6px 12px; text-decoration: none;}๋ฏน์ค์ธ ์์Scss@mixin theme($theme: DarkGray) { background: $theme; ..
โ
em ๋จ์๊ธฐ์ค: em ๋จ์๋ ์์์ ์ง์ ์ ์ธ ๋ถ๋ชจ ์์ ๋๋ ์์ ์ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ํฉ๋๋ค.์๋์ ํฌ๊ธฐ: ๋ถ๋ชจ ์์์ ๊ธ๊ผด ํฌ๊ธฐ์ ์๋์ ์ด๋ฏ๋ก, ์ค์ฒฉ๋ ์์๋ค์ ํฌ๊ธฐ ๊ณ์ฐ์ด ๋ณต์กํด์ง ์ ์์ต๋๋ค.์ฌ์ฉ ์: ํน์ ์์์ ํฌ๊ธฐ๋ฅผ ๊ทธ ์์๊ฐ ํฌํจ๋ ์ปจํ
์คํธ ๋ด์์ ์๋์ ์ผ๋ก ์ค์ ํ ๋ ์ ์ฉํฉ๋๋ค.โ
rem ๋จ์๊ธฐ์ค: rem ๋จ์๋ ๋ฃจํธ ์์(html ์์)์ ๊ธ๊ผด ํฌ๊ธฐ๋ฅผ ๊ธฐ์ค์ผ๋ก ํฉ๋๋ค.์ผ๊ด์ฑ: ์ ์ฒด ๋ฌธ์์์ ๋์ผํ ๊ธฐ์ค์ ์ฌ์ฉํ๋ฏ๋ก, ์ผ๊ด๋ ํฌ๊ธฐ ์กฐ์ ์ ํ ์ ์์ต๋๋ค.์ฌ์ฉ ์: ์ ์ฒด ๋ฌธ์์์ ์ผ๊ด๋ ์๋์ ํฌ๊ธฐ๋ฅผ ์ค์ ํ ๋ ์ ์ฉํฉ๋๋ค. ์ฌ์ฉ ์`em` ์ฌ์ฉ ์ Container element with font-size: 1.5em Nested element with fon..
.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}์ค๋ช
repeat(3, 1fr):repeat ํจ์๋ ๋ฐ๋ณต์ ์ธ ๊ทธ๋ฆฌ๋ ํธ๋์ ์ ์ํฉ๋๋ค.์ฒซ ๋ฒ์งธ ์ธ์์ธ 3์ ๋ฐ๋ณต ํ์๋ฅผ ์๋ฏธํฉ๋๋ค. ์ฌ๊ธฐ์๋ 3๋ฒ ๋ฐ๋ณต๋ฉ๋๋ค.๋ ๋ฒ์งธ ์ธ์์ธ 1fr์ ๊ฐ ํธ๋์ ํฌ๊ธฐ๋ฅผ ์ ์ํฉ๋๋ค. ์ฌ๊ธฐ์ 1fr์ ๊ทธ๋ฆฌ๋ ์ปจํ
์ด๋ ๋ด์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋น์จ์ ์๋ฏธํฉ๋๋ค.fr ๋จ์fr(Fraction Unit):fr ๋จ์๋ CSS Grid์์ ์ฌ์ฉ ๊ฐ๋ฅํ ๊ณต๊ฐ์ ๋ถํ ํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.์๋ฅผ ๋ค์ด, 1fr์ ๊ฐ์ฉ ๊ณต๊ฐ์ 1๋ถ๋ถ์ ์๋ฏธํฉ๋๋ค. ์ฌ๋ฌ fr ๊ฐ์ด ์์ ๋, ๊ฐ๊ฐ์ ๊ฐ์ ์ ์ฒด ๊ฐ์ฉ ๊ณต๊ฐ์ ๋น์จ์ ์ ์ํฉ๋๋ค.