์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

Tailwind CSS๋กœ ๋งŒ๋“œ๋Š” ๋ฉ‹์ง„ ์›น UI ์Šคํƒ€์ผ๋ง

[Tailwind CSS๋กœ ๋งŒ๋“œ๋Š” ๋ฉ‹์ง„ ์›น UI ์Šคํƒ€์ผ๋ง] ๊ฐ•์˜๋Š” ํ˜„์žฌ ๊ฐ€์žฅ ํ•ซํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ธ Tailwind CSS v3.4.1์„ ์ด๋ก ๋ถ€ํ„ฐ ์‹ค์ „ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ๊นŒ์ง€ 19์‹œ๊ฐ„ ์ถฉ์‹คํ•˜๊ฒŒ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜์—… ์‹œ๊ฐ„์ด ๊ธธ๋‹ค๊ณ  ์ข‹์€ ๊ฐ•์˜๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ•ด๋‹น ๊ฐ•์˜๋Š” ์‹œ๊ฐ„๋„ ๊ธด ์ข‹์€ ๊ฐ•์˜๋ผ๊ณ  ์ž๋ถ€ํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ, Tailwind CSS ๋ชจ๋“  ์ด๋ก ์„ 8์‹œ๊ฐ„ 30๋ถ„ ๋™์•ˆ ์ƒ์„ธํ•˜๊ฒŒ ๋‹ค๋ฃจ๊ธฐ ๋•Œ๋ฌธ์— CSS ์ด๋ก ์ด ๋ถ€์กฑํ•œ ์‚ฌ๋žŒ์—๊ฒŒ CSS ์ด๋ก ์„ ์ถฉ์‹คํžˆ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ๊ฐ•์˜๋Š” ๊ฐœ๋ฐœ์ž์™€ ํผ๋ธ”๋ฆฌ์…”๊ฐ€ ๋งŒ๋“œ๋Š” Tailwind CSS ์Šคํƒ€์ผ๋ง์„ ์ค‘์‹ฌ์œผ๋กœ ์ œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

(5.0) ์ˆ˜๊ฐ•ํ‰ 30๊ฐœ

์ˆ˜๊ฐ•์ƒ 342๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

css
css
์›นํผ๋ธ”๋ฆฌ์‹ฑ
์›นํผ๋ธ”๋ฆฌ์‹ฑ
๊ฐ•์˜๊ต์•ˆ
๊ฐ•์˜๊ต์•ˆ
css
css
์›นํผ๋ธ”๋ฆฌ์‹ฑ
์›นํผ๋ธ”๋ฆฌ์‹ฑ
๊ฐ•์˜๊ต์•ˆ
๊ฐ•์˜๊ต์•ˆ

์ƒˆ์†Œ์‹

5 ๊ฐœ

  • tw-v4.jpg

     

    ์•ˆ๋…•ํ•˜์„ธ์š”. ์ฝ”๋”ฉ์›์Šค์ž…๋‹ˆ๋‹ค.

    Tailwind CSS v4.0์œผ๋กœ ์ •์‹ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค.

    Tailwind CSS v4.0์— ๊ด€๋ จ๋œ 2๊ฐ€์ง€ ์˜์ƒ์ด ์—…๋ฐ์ดํŠธ๋˜์—ˆ๊ณ , PDF ๊ต์žฌ ํŒŒ์ผ๋„ ์—…๋ฐ์ดํŠธ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

    ์—…๋ฐ์ดํŠธ ์˜์ƒ๊ณผ PDF ๊ต์žฌ ํŒŒ์ผ ํ™•์ธํ•ด์ฃผ์„ธ์š”.

    โ–ผ์˜์ƒ ์—…๋ฐ์ดํŠธ ๋ชฉ๋ก

    • [์—…๋ฐ์ดํŠธ] Tailwind CSS v4.0 CLI ์„ค์น˜ ๋ฐ ํ™˜๊ฒฝ์„ค์ •

    • [์—…๋ฐ์ดํŠธ] Tailwind CSS v4.0 ์ปค์Šคํ…€ ํ…Œ๋งˆ ํ™˜๊ฒฝ์„ค์ •

    0
  • [๊ฐ•์˜์˜คํ”ˆ] ๋ชจ๋ฐ”์ผ ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ํฌํŠธํด๋ฆฌ์˜ค with CSS Nesting

    19ํŽ˜์ด์ง€, ์ด 22๊ฐ€์ง€ ๋‹ค์–‘ํ•œ ๋ชจ๋ฐ”์ผ ๋ ˆ์ด์•„์›ƒ ์ œ์ž‘ํ•˜๋ฉด์„œ ํผ๋ธ”๋ฆฌ์…” ์ทจ์—…๊ณผ ํผ๋ธ”๋ฆฌ์…” ์‹ค๋ฌด์—์„œ ๊ฐ€์žฅ ๊ฒฝ์Ÿ๋ ฅ์ด ์žˆ๋Š” ๋ชจ๋ฐ”์ผ ์›น ์ œ์ž‘ ๋Šฅ๋ ฅ์„ ํ–ฅ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํผ๋ธ”๋ฆฌ์…”๋กœ์„œ ๋ชจ๋ฐ”์ผ ์›น์„ ์ œ์ž‘ํ•˜๊ธฐ ์œ„ํ•œ ๊ฑฐ์˜ ๋ชจ๋“  ์ œ์ž‘ ๋ฐฉ๋ฒ•๊ณผ ๋…ธํ•˜์šฐ๋ฅผ ๋‹ค์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    ๋ชจ๋ฐ”์ผ ์›น ํผ๋ธ”๋ฆฌ์‹ฑ ์ˆ˜์—…์—์„œ ๊ฐ€์žฅ ๊ฐ•์ ์ธ ๋ถ€๋ถ„์ธ HTML ์™€์ด์–ดํ”„๋ ˆ์ž„ ์ƒ์„ธํ•œ ์ž‘์„ฑ๋ฒ•์„ ๋ชจ๋“  ํŽ˜์ด์ง€ ํ•˜๋‚˜ํ•˜๋‚˜ ์ƒ์„ธํ•˜๊ฒŒ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ•์˜๋ฅผ ํ†ตํ•ด HTML ์™€์ด์–ดํ”„๋ ˆ์ž„ ์ œ์ž‘ ๋Šฅ๋ ฅ์ด ํฌ๊ฒŒ ํ–ฅ์ƒ๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํŠนํžˆ CSS ์ค‘์ฒฉ(Nesting) ๋ฐฉ์‹์„ ์ถฉ๋ถ„ํžˆ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Flex ๋ ˆ์ด์•„์›ƒ์„ ์ค‘์‹ฌ์œผ๋กœ ์ค‘์ƒ๊ธ‰ CSS ์‹ค์ „ ๋Šฅ๋ ฅ์„ ์ถฉ๋ถ„ํžˆ ๊ฐ–์ถ”์‹œ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    โœ…๊ฐ•์˜์†Œ๊ฐœ ๋ฐ”๋กœ๊ฐ€๊ธฐ : https://inf.run/yfNHF

    css-nesting-content-01.png

     

    0
  • CodingWorks-Main-Cover

    Tailwind CSS ์‹ค์ „ ํฌํŠธํด๋ฆฌ์˜ค ํผ๋ธ”๋ฆฌ์‹ฑ ์˜คํ”ˆ

    ์˜ค์ง ์‹ค์ „ ์˜ˆ์ œ ์ œ์ž‘๋งŒ์œผ๋กœ Tailwind CSS ์‹ค๋ฌด ๋Šฅ๋ ฅ ํ–ฅ์ƒ!

    Tailwind CSS๋ฅผ ํ™œ์šฉํ•ด 26๊ฐ€์ง€ ์ด์ƒ์˜ ๋‹ค์–‘ํ•œ ์‹ค์ „ ์˜ˆ์ œ ์ œ์ž‘ํ•˜๋Š” ๊ณผ์ •์ž…๋‹ˆ๋‹ค. ์‹ค์ „ ์˜ˆ์ œ๋ฅผ ๋น ๋ฅด๊ฒŒ ๋‹ค์–‘ํ•˜๊ฒŒ ์ œ์ž‘ํ•˜๋ฉด ๊ทธ ์†์—์„œ ํ•„์ˆ˜์ ์ธ ์ด๋ก ์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๊ฐ•์˜๋Š” ๊ฐœ๋ฐœ์ž์™€ ํผ๋ธ”๋ฆฌ์…”๊ฐ€ ๋งŒ๋“œ๋Š” Tailwind CSS ์Šคํƒ€์ผ๋ง์„ ์ค‘์‹ฌ์œผ๋กœ ์ œ์ž‘๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

    ์›น ํผ๋ธ”๋ฆฌ์‹œ์™€ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ทจ์—…๊ณผ ์ด์ง์„ ์œ„ํ•ด ํฐ ๋„์›€์ด ๋ ๊ฑฐ๋ผ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค.

    tailwind-logo

     

    โค๊ฐ•์˜์†Œ๊ฐœ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ : https://inf.run/tHwCD

    0
  • ์•ˆ๋…•ํ•˜์„ธ์š”. ์ฝ”๋”ฉ์›์Šค์ž…๋‹ˆ๋‹ค.

    ์ด๋ฒˆ์— ์ฝ”๋”ฉ์›์Šค๊ฐ€ HTML+CSS+JS ํฌํŠธํด๋ฆฌ์˜ค ์‹ค์ „ ํผ๋ธ”๋ฆฌ์‹ฑ(์‹œ์ฆŒ3) ๊ฐ•์˜๊ฐ€ ์˜คํ”ˆ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

    HTML+CSS+JS ์‹ค์ „ ํฌํŠธํด๋ฆฌ์˜ค ์‹œ์ฆŒ3๋Š” ์ค‘์ƒ๊ธ‰ ํผ๋ธ”๋ฆฌ์‹ฑ์„ ์œ„ํ•œ ํผ๋ธ”๋ฆฌ์‹ฑ ์ตœ์‹  ์ด๋ก  ์˜ˆ์ œ 30๊ฐœ์™€ 45๊ฐ€์ง€ ์ด์ƒ์˜ ๋‹ค์–‘ํ•œ ์ข…๋ฅ˜์˜ ์‹ค์ „ ์˜ˆ์ œ ์ œ์ž‘ ๊ณผ์ •์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด 29์‹œ๊ฐ„ ์ •๋„์˜ ๊ฐ•์˜ ์‹œ๊ฐ„ ๋งŒํผ์ด๋‚˜ ์ถฉ์‹คํ•œ ๋‚ด์šฉ๊ณผ ์ฒด๊ณ„์ ์ธ ์ดํ•ด๋ฅผ ๋•๋Š” ์„ค๋ช…์œผ๋กœ ์ œ์ž‘๋œ ํผ๋ธ”๋ฆฌ์‹ฑ ํฌํŠธํด๋ฆฌ์˜ค ์‹ค์ „ ์ œ์ž‘ ์˜์ƒ์„ ํ•™์Šตํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

    ๐ŸšฉHTML+CSS+JS ํฌํŠธํด๋ฆฌ์˜ค ์‹ค์ „ ํผ๋ธ”๋ฆฌ์‹ฑ(์‹œ์ฆŒ3) ๊ฐ•์˜์†Œ๊ฐœ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ : https://inf.run/WwtUv

    season3-cover.png

     

    0
  • ์•ˆ๋…•ํ•˜์„ธ์š”. ์ฝ”๋”ฉ์›์Šค์ž…๋‹ˆ๋‹ค.

    ์ด๋ฒˆ์— ์ฝ”๋”ฉ์›์Šค๊ฐ€ ์‹ฌํ˜ˆ์„ ๊ธฐ์šธ์—ฌ์„œ ๋งŒ๋“  Tailwind CSS ๊ฐ•์˜๊ฐ€ ์˜คํ”ˆ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
    ์ฝ”๋”ฉ์›์Šค๊ฐ€ ๋งŒ๋“  Tailwind CSS ๊ฐ•์˜๋Š” [Tailwind CSS๋กœ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งŒ๋“œ๋Š” ๋ฉ‹์ง„ UI ์Šคํƒ€์ผ๋ง]๋ผ๋Š” ์ œ๋ชฉ์œผ๋กœ ๋งŒ๋“  ๊ฒƒ ์ฒ˜๋Ÿผ ๊ฐœ๋ฐœ์ž๊ฐ€ ํผ๋ธ”๋ฆฌ์‹ฑ์„ ํ•  ๋•Œ ํผ๋ธ”๋ฆฌ์…” ๋ชป์ง€ ์•Š๊ฒŒ ์˜ˆ์œ UI ์Šคํƒ€์ผ๋ง์„ ํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์— ๊ฐ€์žฅ ์ดˆ์ ์„ ๋งž์ท„์Šต๋‹ˆ๋‹ค.

    [Tailwind CSS๋กœ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋งŒ๋“œ๋Š” ๋ฉ‹์ง„ UI ์Šคํƒ€์ผ๋ง] ๊ฐ•์˜๋Š” ํ˜„์žฌ ๊ฐ€์žฅ ํ•ซํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์ธ Tailwind CSS๋ฅผ ์ด๋ก ๋ถ€ํ„ฐ ์‹ค์ „ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ๊นŒ์ง€ 19์‹œ๊ฐ„ ์ด์ƒ์˜ ์ˆ˜์—…์‹œ๊ฐ„์œผ๋กœ ์ถฉ์‹คํ•˜๊ฒŒ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜์—… ์‹œ๊ฐ„์ด ๊ธธ๋‹ค๊ณ  ์ข‹์€ ๊ฐ•์˜๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ•ด๋‹น ๊ฐ•์˜๋Š” ์‹œ๊ฐ„๋„ ๊ธธ๊ณ  ๊ฐ•์˜๋„ ์ข‹๋‹ค๊ณ  ์ž๋ถ€ํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ, Tailwind CSS ๋ชจ๋“  ์ด๋ก ์„ 8์‹œ๊ฐ„ 30๋ถ„ ๋™์•ˆ ์ƒ์„ธํ•˜๊ฒŒ ๋‹ค๋ฃจ๊ธฐ ๋•Œ๋ฌธ์— CSS ์ด๋ก ์ด ๋ถ€์กฑํ•œ ์‚ฌ๋žŒ์—๊ฒŒ CSS ์ด๋ก ์„ ์ถฉ์‹คํžˆ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    imageTailwind CSS๋Š” CSS Frameworks Ranking์—์„œ ํ˜„์žฌ๊นŒ์ง€ ๊พธ์ค€ํžˆ ์ธ๊ธฐ๋ฅผ ๋ˆ„๋ฆฌ๊ณ  ์žˆ๊ณ , ๋งŒ์กฑ๋„ 1์œ„๋ฅผ ํ•˜๊ณ  ์žˆ๋Š” Tailwind CSS๋Š” ์š”์ฆ˜ ์ „ ์„ธ๊ณ„์ ์œผ๋กœ ๊ฐ€์žฅ ํ•ซํ•œ CSS ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค. ํ•ซํ•œ ์ด์œ  ์ค‘์— ๊ฐ€์žฅ ๋Œ€ํ‘œ์ ์ธ ๊ฒƒ์ด ๋ฐ”๋กœ ์œ ํ‹ธ๋ฆฌํ‹ฐ ํด๋ž˜์Šค๋ฅผ ์‚ฌ์šฉํ•œ ์ฐฝ์˜์ ์ธ ์Šคํƒ€์ผ๋ง์„ ํ•  ์ˆ˜ ์žˆ๊ณ  ๋˜ํ•œ, ์ข‹์€ ํ€„๋ฆฌํ‹ฐ์˜ ๋””์ž์ธ์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์ž‘์—… ์‹œ๊ฐ„์ด ๊ฝค ๋น ๋ฅด๋‹ค๋Š” ์ ์ด๋ผ ์ƒ๊ฐ๋ฉ๋‹ˆ๋‹ค.

    ์ด๋ก  ์ˆ˜์—… ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ Tailwind CSS๋กœ ๋งŒ๋“œ๋Š” ์‹ค์ „ ์˜ˆ์ œ๋“ค ๊ทธ๋ฆฌ๊ณ  ๊ฐœ๋ฐœ์ž ๊ฒฝ๋ ฅ ์ด๋ ฅ์„œ & ํฌํŠธํด๋ฆฌ์˜ค ์†Œ๊ฐœ ๋ฐ˜์‘ํ˜• ์›น ์ œ์ž‘๋„ ์ถฉ์‹คํ•˜๊ฒŒ ๋ฐฐ์šฐ์‹œ๊ณ  ๊ฒฐ๊ณผ๋ฌผ์„ ์–ป์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

    โœ… ๊ฐ•์˜์†Œ๊ฐœ ๋ฐ ๋ฌด๋ฃŒ๊ฐ•์˜ ๋ณด๋Ÿฌ๊ฐ€๊ธฐ : https://inf.run/pjqKk


    image

    0

์›” โ‚ฉ15,400

5๊ฐœ์›” ํ• ๋ถ€ ์‹œ

โ‚ฉ77,000