'HTML์ ๋ ๋์ง ์๊ณ ๋น ๋ฅด๊ฒ ๋น๋ํ๋ ๋ชจ๋ ์น์ฌ์ดํธ' ๊ตฌ์ถ์ ๊ฐ๋ฅํ๊ฒ ๋ง๋๋ 'Tailwind'๋ฅผ ์๊ฐํฉ๋๋ค!
Tailwind CSS์ ๊ธฐ๋ณธ ์์ฑ
Tailwind์์์ flex&grid, transition, animation
์ ํธ๋ฆฌํฐ ํด๋์ค ์ถ๊ฐ ์ค์
๋ฐ์ํ ์ค๊ณ์ SVG ์ปจํธ๋กค
Tailwind์์ ๊ณต์์ ์ผ๋ก ์ง์ํ๋ ํ๋ฌ๊ทธ์ธ
๋ฐ์ํ ์ด๋ ฅ์ ๋ง๋ค๊ธฐ
Tailwind CSS๋ฅผ ํ์ฉํ์ฌ ๋ฐ์ํ ์ด๋ ฅ์ ๋ง๋ค๊ธฐ๐
[PC/๋ชจ๋ฐ์ผ ํ๋ฉด]
CSS ๋ฌธ์๋ก ๊ฐ์ง ์๊ณ ์ค์ง HTML ๋ฌธ์ ๋ด์์ ์น์ฌ์ดํธ ๊ตฌ์ถ์ด ๊ฐ๋ฅํ๋๋ก
๋น ๋ฅด๊ฒ ๋น๋ํ๋ ๋ชจ๋ ์น์ฌ์ดํธ์
๋๋ค.
์ด๋ฅผ ์คํํ๊ธฐ ์ํด ๋ฏธ๋ฆฌ ๊ตฌํํด๋์ ํด๋์ค๋ฅผ ์ฌ์ฉํ์ฌ
์คํ์ผ๋ง ์์
์ ์ํํฉ๋๋ค.
๋ง์กฑ๋์ ์ฌ์ฉ๋์ ํตํด ๊ด์ฌ๋๊ฐ ๋์์ง๊ณ ์๋ค๋ ์ ์ ์ ์ ์์ต๋๋ค.
์์ฆ ํซํ Tailwind๊ฐ
๋ญ์ง ๊ถ๊ธํ์ ๋ถ
Tailwind๋ก ๋๋ง์
์ด๋ ฅ์ ๋ง๋ค๊ณ ์ถ์ ๋ถ
ํ๋ก์ ํธ์ ํ์ํ
CSS ์ง์์ด ๋ถ์กฑํ ๋ถ
๋น ๋ฅด๊ฒ ์น์ฌ์ดํธ๋ฅผ
๋ง๋ค๊ณ ์ถ์ ๋ถ
๐ ์ค์ง HTML ๋ฌธ์๋ง ๋ณด๋ฉด ๋๋ค.
๐ ํด๋์ค ์ด๋ฆ ๊ณ ๋ฏผ no, ํ์ ๋ฌธ์ no!
๐ ์ ์ง๋ณด์์ ์ฉ์ดํ๋ค.
๐ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ์น์ฌ์ดํธ ๊ตฌ์ถ ๊ฐ๋ฅํ๋ค.
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
ํ์ฌ์์ Tailwind๋ฅผ ๋์ ํ ๊ฐ๋ฐ์
Tailwind๊ฐ ๋ฌด์์ธ์ง ๊ถ๊ธํ์ ๋ถ
์์ฆ ํซํ Tailwind๋ก ๋๋ง์ ์ด๋ ฅ์๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ถ
๊ฐ๋จํ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ถ์ง๋ง CSS ์ง์์ด ๋ถ์กฑํ ๋ถ
์ฝ๊ณ , ๋น ๋ฅด๊ฒ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML
CSS
9,395
๋ช
์๊ฐ์
291
๊ฐ
์๊ฐํ
2
๊ฐ
๋ต๋ณ
4.8
์
๊ฐ์ ํ์
21
๊ฐ
๊ฐ์
๋ ์ค๋ฆ์ ์ ์ฃผ์ฝ๋ฉ๋ฒ ์ด์ค์บ ํ์ ํ๋ฆฌ๋ฏธ์ ๋ธ๋๋๋ก ์ฃผ๋ก ์ค๋ฌด, ์ทจ์ ๊ณผ ์ฐ๊ด๋ ๊ฐ์๋ฅผ ์ ์ํ๊ณ ์์ต๋๋ค.
์ ์ฃผ์ฝ๋ฉ๋ฒ ์ด์ค์บ ํ์์ ์ด๋ก ์ ์ธ ์ง์์ ํ๋ํ์ จ๋ค๋ฉด, ๋ ์ค๋ฆ์ ์ค์ ๊ฐ์๋ค์ ํตํด ํฌํธํด๋ฆฌ์ค์ ์ค๋ฌด ๋ฅ๋ ฅ๋ค์ ๋ชจ๋ ๊ฐ์ ธ๊ฐ์ธ์!
" 2%๋ฅผ ์ฑ์ฐ๊ธฐ ์ํ ์ฌ๋ฌ๋ถ์ ์ง๋ ๊ณผ ์ด์ ์ ์์ํฉ๋๋ค! "
์ ์ฒด
25๊ฐ โ (2์๊ฐ 0๋ถ)
ํด๋น ๊ฐ์์์ ์ ๊ณต:
๊ฐ์ ์๊ฐ
01:04
Tailwind CSS ์๊ฐ
03:47
flex
17:44
grid
12:14
transition
02:45
animation
01:16
๋ฐ์ํ
03:01
SVG
04:13