Transparent White Star

๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด/CSS

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 ๊ฐ’์ด ์žˆ์„ ๋•Œ, ๊ฐ๊ฐ์˜ ๊ฐ’์€ ์ „์ฒด ๊ฐ€์šฉ ๊ณต๊ฐ„์˜ ๋น„์œจ์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
yyezzzy
'๐Ÿ‘ฉ๐Ÿป‍๐Ÿ’ป ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด/CSS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก