
์ฝ๋์์ด ์ฐํผx๋ ธ์ ์ผ๋ก ์ด๊ฐ๋จ ์น์ฌ์ดํธ ๋ง๋ค๊ธฐ
The Oreum
๊ฐ๋ฐ์ ์์ด, ์ฝ๋ฉ ์์ด ๋ ธ์ ๊ณผ ์ฐํผ๋ง์ผ๋ก ํ๋ฆฌํฐ ์๋ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๋ ๊ฐ์์ ๋๋ค.
์ ๋ฌธ
Notion
'HTML์ ๋ ๋์ง ์๊ณ ๋น ๋ฅด๊ฒ ๋น๋ํ๋ ๋ชจ๋ ์น์ฌ์ดํธ' ๊ตฌ์ถ์ ๊ฐ๋ฅํ๊ฒ ๋ง๋๋ 'Tailwind'๋ฅผ ์๊ฐํฉ๋๋ค!
์๊ฐ์ 1,298๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ






ํ๊ธ๊ณผ์ปดํจํฐ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!





ํ๊ธ๊ณผ์ปดํจํฐ
์์ง์๋ค๋ ์ด ๊ฐ์๋ฅผ ๋ฃ๊ณ ์์ด์!
๋จผ์ ๊ฒฝํํ ์๊ฐ์๋ค์ ํ๊ธฐ
5.0
์ด์์
tailwindcss๋ฅผ ์ ๋ฐ์ ์ผ๋ก ๋น ๋ฅด๊ฒ ์ต๋ํ๋๋ฐ ๋์์ด ๋ง์ด ๋๋ ๊ฐ์์๋๊ฑฐ ๊ฐ์ต๋๋ค. ๊ฑฐ๊ธฐ๋ค๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์์ฆ ๋ง์ด ์ฐ๋ ๋ฆฌ์กํธ์ ๊ธฐ๋ณธ๊น์ง ๋ถ๋ก์ผ๋ก ํด์ฃผ์ ๊ฒ์ ์ผ์ค์์ผ์ ๊ฒ ๊ฐ์ต๋๋ค. ์ด์ ์ ๋ฐ์ ์ผ๋ก ๊ฐ์๋ฅผ ๋ค์๊ณ ๋๋๊ฒ์ ์ฌ์ฉํ๋๊ฒ์ธ๋ฐ.. ๊ทธ๊ฒ์ ๋ํ ๋ด์ฉ์ด ์์์ผ๋ฉด ๋ ์ข์๋๊ฒ ๊ฐ์ต๋๋ค.
5.0
๊ถ์ฑ์ฐ
์๋นํ ์น์ ํ๊ณ ๊น๋ํ ๊ฐ์์ ๋๋ค. ๊ณต์๋ฌธ์ ๋จผ์ ๋ณด๊ธฐ ๊ท์ฐฎ์ผ์ ๋ถ๋ค ์ด ๊ฐ์ ๋จผ์ ๋ค์ผ์๊ณ ๊ณต์๋ฌธ์ ๋ณด์๋ฉด ์ดํดํ๊ธฐ ์์ํ ๊ฒ ๊ฐ์ต๋๋ค.
5.0
baby4
์์ ์ ๋ค์์ต๋๋ค
Tailwind CSS์ ๊ธฐ๋ณธ ์์ฑ
Tailwind์์์ flex&grid, transition, animation
์ ํธ๋ฆฌํฐ ํด๋์ค ์ถ๊ฐ ์ค์
๋ฐ์ํ ์ค๊ณ์ SVG ์ปจํธ๋กค
Tailwind์์ ๊ณต์์ ์ผ๋ก ์ง์ํ๋ ํ๋ฌ๊ทธ์ธ
๋ฐ์ํ ์ด๋ ฅ์ ๋ง๋ค๊ธฐ
Tailwind CSS๋ฅผ ํ์ฉํ์ฌ ๋ฐ์ํ ์ด๋ ฅ์ ๋ง๋ค๊ธฐ๐
[PC/๋ชจ๋ฐ์ผ ํ๋ฉด]
๋น ๋ฅด๊ฒ ๋น๋ํ๋ ๋ชจ๋ ์น์ฌ์ดํธ์
๋๋ค.
์ด๋ฅผ ์คํํ๊ธฐ ์ํด ๋ฏธ๋ฆฌ ๊ตฌํํด๋์ ํด๋์ค๋ฅผ ์ฌ์ฉํ์ฌ
์คํ์ผ๋ง ์์
์ ์ํํฉ๋๋ค.
๋ง์กฑ๋์ ์ฌ์ฉ๋์ ํตํด ๊ด์ฌ๋๊ฐ ๋์์ง๊ณ ์๋ค๋ ์ ์ ์ ์ ์์ต๋๋ค.
์์ฆ ํซํ Tailwind๊ฐ
๋ญ์ง ๊ถ๊ธํ์ ๋ถ
Tailwind๋ก ๋๋ง์
์ด๋ ฅ์ ๋ง๋ค๊ณ ์ถ์ ๋ถ
ํ๋ก์ ํธ์ ํ์ํ
CSS ์ง์์ด ๋ถ์กฑํ ๋ถ
๋น ๋ฅด๊ฒ ์น์ฌ์ดํธ๋ฅผ
๋ง๋ค๊ณ ์ถ์ ๋ถ
๐ ์ค์ง HTML ๋ฌธ์๋ง ๋ณด๋ฉด ๋๋ค.
๐ ํด๋์ค ์ด๋ฆ ๊ณ ๋ฏผ no, ํ์ ๋ฌธ์ no!
๐ ์ ์ง๋ณด์์ ์ฉ์ดํ๋ค.
๐ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ์น์ฌ์ดํธ ๊ตฌ์ถ ๊ฐ๋ฅํ๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
ํ์ฌ์์ Tailwind๋ฅผ ๋์ ํ ๊ฐ๋ฐ์
Tailwind๊ฐ ๋ฌด์์ธ์ง ๊ถ๊ธํ์ ๋ถ
์์ฆ ํซํ Tailwind๋ก ๋๋ง์ ์ด๋ ฅ์๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ถ
๊ฐ๋จํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ถ์ง๋ง CSS ์ง์์ด ๋ถ์กฑํ ๋ถ
์ฝ๊ณ , ๋น ๋ฅด๊ฒ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML
CSS
11,176
๋ช
์๊ฐ์
429
๊ฐ
์๊ฐํ
3
๊ฐ
๋ต๋ณ
4.8
์
๊ฐ์ ํ์
21
๊ฐ
๊ฐ์
๋ ์ค๋ฆ์ ์ ์ฃผ์ฝ๋ฉ๋ฒ ์ด์ค์บ ํ์ ํ๋ฆฌ๋ฏธ์ ๋ธ๋๋๋ก ์ฃผ๋ก ์ค๋ฌด, ์ทจ์ ๊ณผ ์ฐ๊ด๋ ๊ฐ์๋ฅผ ์ ์ํ๊ณ ์์ต๋๋ค.
์ ์ฃผ์ฝ๋ฉ๋ฒ ์ด์ค์บ ํ์์ ์ด๋ก ์ ์ธ ์ง์์ ํ๋ํ์ จ๋ค๋ฉด, ๋ ์ค๋ฆ์ ์ค์ ๊ฐ์๋ค์ ํตํด ํฌํธํด๋ฆฌ์ค์ ์ค๋ฌด ๋ฅ๋ ฅ๋ค์ ๋ชจ๋ ๊ฐ์ ธ๊ฐ์ธ์!
" 2%๋ฅผ ์ฑ์ฐ๊ธฐ ์ํ ์ฌ๋ฌ๋ถ์ ์ง๋ ๊ณผ ์ด์ ์ ์์ํฉ๋๋ค! "

์ ์ฒด
25๊ฐ โ (2์๊ฐ 0๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
10. flex
17:44
11. grid
12:14
12. transition
02:45
13. animation
01:16
17. ๋ฐ์ํ
03:01
18. SVG
04:13
์ ์ฒด
36๊ฐ
4.7
36๊ฐ์ ์๊ฐํ
์๊ฐํ 2
โ
ํ๊ท ํ์ 5.0
5
์ต์ ํธ๋๋ tailwindcss ์ ๋ํด ํต์ฌ์ ๋น ๋ฅด๊ฒ ์ตํ ์ ์์ด ๋๋ฌด ์ข๋ค์. ๋ํ vscode ์ ์ฉํ ๋จ์ถํค๋ ๊ฐ๋ฐ์ ํ์ํ ์ ์ฉํ ์ง์๋ ์ค๊ฐ ์ค๊ฐ ์๋ ค์ฃผ์ ์ ๋๋ฌด ์ข์์ต๋๋ค. ๋์์ ํธ์ง์ ์ ํ์ ์ ์ง๋ฃจํ์ง ์๊ฒ ๋น ๋ฅด๊ฒ ๊ณต๋ถํ ์ ์์์ด์. ์ข์ ๊ฐ์ ๋ค์์ ๋ ๋ถํํ ๊ฒ์~
์๊ฐํ 4
โ
ํ๊ท ํ์ 5.0
5
tailwindcss๋ฅผ ์ ๋ฐ์ ์ผ๋ก ๋น ๋ฅด๊ฒ ์ต๋ํ๋๋ฐ ๋์์ด ๋ง์ด ๋๋ ๊ฐ์์๋๊ฑฐ ๊ฐ์ต๋๋ค. ๊ฑฐ๊ธฐ๋ค๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์์ฆ ๋ง์ด ์ฐ๋ ๋ฆฌ์กํธ์ ๊ธฐ๋ณธ๊น์ง ๋ถ๋ก์ผ๋ก ํด์ฃผ์ ๊ฒ์ ์ผ์ค์์ผ์ ๊ฒ ๊ฐ์ต๋๋ค. ์ด์ ์ ๋ฐ์ ์ผ๋ก ๊ฐ์๋ฅผ ๋ค์๊ณ ๋๋๊ฒ์ ์ฌ์ฉํ๋๊ฒ์ธ๋ฐ.. ๊ทธ๊ฒ์ ๋ํ ๋ด์ฉ์ด ์์์ผ๋ฉด ๋ ์ข์๋๊ฒ ๊ฐ์ต๋๋ค.
์๊ฐํ 66
โ
ํ๊ท ํ์ 5.0
์๊ฐํ 1
โ
ํ๊ท ํ์ 5.0
์๊ฐํ 22
โ
ํ๊ท ํ์ 4.9
4
์ด ๊ฐ์์ ์ฅ์ ์ ์งง์ ์๊ฐ์ ๊ตฐ๋๋๊ธฐ ์์ด ๋น ๋ฅธ ํ๋ฆ์ผ๋ก ๋ด์ฉ์ ์ ๋ฌํฉ๋๋ค. ๊ฐ์์ ๋ชฉ์ ์ ๋ง์ถฐ ๋ถํ์ํ ๋ถ๋ถ์ด ๊ฑฐ์ ์๊ณ ์ด ์ ์์ ์น ํผ๋ธ๋ฆฌ์ฑ ๊ฒฝํ์ด ์๋ ์ฌ๋๋ค์๊ฒ๋ ๋์์ด ๋๋ ๊ฐ์๋ผ๊ณ ์๊ฐํฉ๋๋ค. ํ์ง๋ง ๋ฐ๋๋ก ๋ค๋ฅธ CSS ํ๋ ์์ํฌ๋ฅผ ๋ค๋ฃจ์ด๋ณธ ์ ์ด ์๋ ์ฌ๋์๊ฒ๋ ๋๋ฌด ๊ธฐ์ด์ ์ธ ๋ด์ฉ๋ง ์ ๋ฌํ๋ค๋ ์๊ฐ์ด ๋ค ๊ฒ๋๋ค. ๋๊ตฐ๋ค๋ ์ต๊ทผ์ ํธ๋ ๋์ ๋ฐ๋ผ tailwincss๋ผ๋ ์๋ก์ด ํด์ ๋ฐฐ์ฐ๋ ค๋ ์ฌ๋์๊ฒ๋ ๊ณ ์ ์ ์ค์ ์ด๋ ๊ธฐ๋ฅ์ ๋ง์ด ๋ค๋ฃจ์ง ์๊ธฐ ๋๋ฌธ์ ์ด ๋ถ๋ถ์์ ์ค๋งํ ์ ์์ต๋๋ค. ๊ทธ๋ฐ ์ ์์ ํฅํ tailwindcss์ ๊ณ ๊ธ ๊ธฐ๋ฅ์ ๋ค๋ฃจ๋ ๋ณ๋์ ๊ฐ์๊ฐ ์ถ๊ฐ๋์์ผ๋ฉด ํ๋ ๋ฐ๋์ด ๋ญ๋๋ค.
์ง์๊ณต์ ์๋์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!
๊ฐ์ ๋ถ์ผ์ ๋ค๋ฅธ ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์!