컀μ€ν°λ§μ΄μ§μ΄λ?
κ³ κ°μ΄ μ 곡λ λμμΈ λ μ΄μμ UI/UX μ½λλ₯Ό μμ μ κΈ°νΈμ λ§κ² μ§μ μμ νκ³ μ
λ°μ΄νΈν μ μλ λ§μΆ€ μ μ μλΉμ€μ
λλ€.
UI/UX 컀μ€ν°λ§μ΄μ§
ν
μ€νΈλ§ μμ νλ κ²μ λΉκ΅μ κ°λ¨νμ§λ§, μ λ¬Έκ°κ° μλλΌλ©΄ μ€ννΈμ
νμ΄ μ 곡νλ UI/UX μ½λμμ ν
μ€νΈ ν¬κΈ°, μμ, λ°°κ²½ μ, λ μ΄μμ λ°°μΉ, ν¬κΈ° λ±μ μμ νλ κ²μ μ΄λ €μ΄ κ³Όμ μΌ μ μμ΅λλ€.
μ΄λ₯Ό μν΄ μ΄λ³΄μλ μ½κ² μμ λ° μ
λ°μ΄νΈν μ μλλ‘, κ³ κ°μ΄ μνλ μ€νμΌμ λ§μΆ° 컀μ€ν°λ§μ΄μ§ν μ μλ κ°μ΄λλ₯Ό μ 곡νκ³ μ§μν©λλ€.
Tailwind CSS
μ€ννΈμ
νμμ μ 곡νλ λͺ¨λ λμμΈ λ¦¬μμ€(μ΄λ©μΌ ν
νλ¦Ώ μ μΈ)λ Tailwind CSS λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ μ μλμμ΅λλ€. Tailwind CSSλ μ μ°ν μ νΈλ¦¬ν° κΈ°λ°μ CSS νλ μμν¬λ‘, ν΄λμ€λͺ
μ νμ©ν΄ μ½λμ μμ½κ² λμμΈμ μ μ©ν μ μμ΅λλ€.
μ΄λ©μΌ ν
νλ¦Ώμ κ²½μ°, μΈλΌμΈ μ€νμΌμ μ μ©ν΄μΌ νλ―λ‘ Tailwind CSSλ₯Ό μ¬μ©νμ§ μκ³ μΈλΌμΈ μ€νμΌλ‘ μμ±λμμ΅λλ€. μ΄λ μ΄λ©μΌ ν΄λΌμ΄μΈνΈμ νΈνμ±μ 보μ₯νκΈ° μν μ‘°μΉμ
λλ€.
<div class="max-w-7xl w-full mx-auto p-4 bg-white dark:bg-[#1E2028]">
μ½λμ λνλ ν΄λμ€ μμ±λ€μ ν΄λΉ μμμ λμμΈ λλ λ μ΄μμμ μ μ©λλ μ€νμΌμ μλ―Έν©λλ€. μλ₯Ό λ€μ΄, w
λ width(λμ΄)λ₯Ό λνλ΄λ©° w-full
μ μμκ° λΆλͺ¨ μμμ μ 체 λμ΄λ₯Ό μ°¨μ§νλλ‘ μ€μ λ κ²μ
λλ€. λν, max-w-7xl
(1280px)μ μμμ μ΅λ λμ΄λ₯Ό 7xlλ‘ μ ννλ μ€μ μ
λλ€.
μμ
μ μ§ννλ€ λ³΄λ©΄ μμ°μ€λ½κ² κ° ν΄λμ€κ° μ΄λ€ μ€νμΌμ μ μ©νλμ§ νμ
ν μ μμ§λ§, μ²μμλ μ΄λ₯Ό μΈμ°κ±°λ νμ΅ν νμλ μμ΅λλ€. 컀μ€ν°λ§μ΄μ§ λ¬Έμμμ κ° ν΄λμ€μ λν μ€λͺ
μ μ 곡νμ¬, μ²μ μ νμλ λΆλ€λ μ½κ² μμ λ° μ
λ°μ΄νΈν μ μλλ‘ μ§μν μμ μ
λλ€. μ΄λ₯Ό ν΅ν΄ κ³ κ°λμ΄ μνλ μ€νμΌμ λΉ λ₯΄κ³ κ°νΈνκ² μ‘°μ ν μ μκΈ°λ₯Ό λ°λλλ€.