์ํด
/
Front-End
/
Tailwind
Search
Duplicate
Share
Tailwind
์ ํธ๋ฆฌํฐ ๊ธฐ๋ฐ CSS ํ๋ ์์ํฌ
Basic
Tailwind
์ ํธ๋ฆฌํฐ ๊ธฐ๋ฐ์ CSS ํ๋ ์์ํฌ
โข
Tailwind vs Boostrap
โข
์ฌ์ฉ ๋ฐฉ๋ฒ
โข
๊ธฐ๋ณธ ์ฌ์ฉ
Tailwind vs Boostrap
์ฌ์ฉ ๋ฐฉ๋ฒ
1.
CDN ๋ฐฉ์
Tailwind
Tailwind - Margin & Padding
Margin & Padding
tailwind ์์ margin ๊ณผ padding ์ ์(top), ํ(bottom), ์ข(left), ์ฐ(right) ๋ค ๋ฐฉํฅ์ผ๋ก ์ง์ ํ ์ ์์ต๋๋ค. ๋ํ x์ถ(์ข, ์ฐ), y์ถ(์, ํ)์ ๋ฌถ์ด์ ์ง์ ํ๊ฑฐ๋ ๋ค ๋ฐฉํฅ ์ ๋ถ๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค.
โข
๋ฐฉํฅ : top, bottom, left, right
โข
ํฌ๊ธฐ : ๊ธฐ๋ณธ๊ฐ
1
์ ๊ฐ์ด
0.25rem
(4px)๋ก ์ค์
Tailwind - Margin & Padding
Tailwind - Border
โข
border
โข
๊ธฐ๋ณธ๊ฐ
โข
ํ ๋๋ฆฌ ๋๊ป
โข
ํ ๋๋ฆฌ ์์
โข
ํ ๋๋ฆฌ ์คํ์ผ
โข
ํ ๋๋ฆฌ ๋ฐฉํฅ
โข
border-radius
border
border ๋ ํ ๋๋ฆฌ ์คํ์ผ ์์ฑ์ด๋ฉฐ, tailwind ์์๋ ์คํ์ผ ํด๋์ค๋ก ์ง์ ๋์ด ์์ต๋๋ค. class ์ border ๋ง ์์ฑํด๋ ๊ธฐ๋ณธ ํ ๋๋ฆฌ๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค.
Tailwind - Border
Tailwind - flex
flex ๋ Container ์ item ์ ๋ฐฐ์นํ๋ ๋ฐฉ๋ฒ์ ์ง์ ํ์ฌ ์ ์ฐํ ๋ ์ด์์์ ์ ์ฉ์ํค๋ ๋ ์ด์์์ ๋๋ค.
โข
์ปจํ ์ด๋ : ๋ฐฐ์นํ UI ์์๋ฅผ ๋ด๋ ๋ฐ์ค
โข
์์ดํ : ๋ฐฐ์น ๋ฐ ์ ๋ ฌํ ์์
tailwind ์์๋ flex ํด๋์ค๋ฅผ ์ ์ฉํ์ฌ, ํน์ ์์๋ฅผ flex ์ปจํ ์ด๋๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค.
FLEX ์นด๋๋ทฐ ๋ ์ด์์
Tailwind - flex
Tailwind - Button ๋ฒํผ
tailwind ๋ก Button UI ๋ฅผ ๋ง๋ค์ด ๋ด ๋๋ค.
โข
๊ธฐ๋ณธ ๋ฒํผ
โข
ํ ๋๋ฆฌ ๋ฒํผ
โข
๋ฒํผ ์ฌ์ด์ฆ
โข
๋ธ๋ก ๋ฒํผ
โข
์์ด์ฝ ๋ฒํผ
๊ธฐ๋ณธ ๋ฒํผ
Tailwind - Button ๋ฒํผ
Tailwind - Switch ์ค์์น
tailwind ๋ก Switch UI ๋ฅผ ๋ง๋ค์ด ๋ด ๋๋ค.
Tailwind - Switch ์ค์์น
Tailwind - Card
tailwind ๋ก Card UI ๋ฅผ ๋ง๋ค์ด ๋ด ๋๋ค.
โข
์นด๋๋ทฐ
โข
๊ธฐ๋ณธ ์นด๋
โข
์ด๋ฏธ์ง ์นด๋
โข
๋ฐ์ํ ์นด๋
Tailwind - Card
Tailwind - Table ํ ์ด๋ธ
tailwind ๋ก Table ์ ๋ง๋ค์ด๋ด ๋๋ค.
โข
PC :
๊ณ ๊ฐ๋ช
,
์ ํ๋ฒํธ/์ด๋ฉ์ผ
,
๊ฐ์ ์ผ์
,
์ํ
,
(๋๋ณด๊ธฐ)
Tailwind - Table ํ ์ด๋ธ
Tailwind - Form ์ ๋ ฅํผ
tailwind ๋ฅผ ์ด์ฉํ์ฌ ์ ๋ ฅํผ UI ๋ฅผ ๋ง๋ค์ด๋ด ๋๋ค.
Tailwind - Form ์ ๋ ฅํผ
Tailwind - Sign in ๋ก๊ทธ์ธ
Tailwind - hover
hover:์คํ์ผํด๋์ค
์ฌ์ฉํ๋ฉด, hover(๋ง์ฐ์ค๋ฅผ ์ฌ๋ฆฐ) ์ํ์ผ ๋ ์คํ์ผ์ ์ ์ฉํ ์ ์์ต๋๋ค.
์ผ๋ฐ์ ์ธ CSS ์์๋ :hover ๊ฐ์ ์ ํ์๋ก ์คํ์ผ ์์ฑ์ ์ง์ ํ์ฌ hover ์ํ์ผ ๋ ์คํ์ผ๋ง์ ํ ์ ์์ต๋๋ค.
tailwind ์์๋
hover:์คํ์ผํด๋์ค
ํํ๋ก hover ์ํ์ผ ๋ ์คํ์ผ์ ์ง์ ํ ์ ์์ต๋๋ค.
๋ฒํผ, ๋งํฌ, ์นด๋, ์ด๋ฏธ์ง, ์์ด์ฝ, ํญ ๋ฑ์ UI ์์์ hover ์คํ์ผ์ ์ ์ฉํ๋ฉด ์ฌ์ฉ์์๊ฒ ๋ ์ง๊ด์ ์ธ UI ๋ฅผ ์ ๊ณตํ ์ ์์ต๋๋ค.
Tailwind - hover
Tailwind - focus
Tailwind - Responsive ๋ฐ์ํ