ALOHA CLASS
/
Front-End
/
Tailwind
Search
Share
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 λ°μν