startupful

πŸ‘‹πŸ» Welcome Customizing

μ»€μŠ€ν„°λ§ˆμ΄μ§•μ΄λž€?

고객이 제곡된 λ””μžμΈ λ ˆμ΄μ•„μ›ƒ 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둜 μ œν•œν•˜λŠ” μ„€μ •μž…λ‹ˆλ‹€.

μž‘μ—…μ„ μ§„ν–‰ν•˜λ‹€ 보면 μžμ—°μŠ€λŸ½κ²Œ 각 ν΄λž˜μŠ€κ°€ μ–΄λ–€ μŠ€νƒ€μΌμ„ μ μš©ν•˜λŠ”μ§€ νŒŒμ•…ν•  수 μžˆμ§€λ§Œ, μ²˜μŒμ—λŠ” 이λ₯Ό μ™Έμš°κ±°λ‚˜ ν•™μŠ΅ν•  ν•„μš”λŠ” μ—†μŠ΅λ‹ˆλ‹€. μ»€μŠ€ν„°λ§ˆμ΄μ§• λ¬Έμ„œμ—μ„œ 각 ν΄λž˜μŠ€μ— λŒ€ν•œ μ„€λͺ…을 μ œκ³΅ν•˜μ—¬, 처음 μ ‘ν•˜μ‹œλŠ” 뢄듀도 μ‰½κ²Œ μˆ˜μ • 및 μ—…λ°μ΄νŠΈν•  수 μžˆλ„λ‘ 지원할 μ˜ˆμ •μž…λ‹ˆλ‹€. 이λ₯Ό 톡해 κ³ κ°λ‹˜μ΄ μ›ν•˜λŠ” μŠ€νƒ€μΌμ„ λΉ λ₯΄κ³  κ°„νŽΈν•˜κ²Œ μ‘°μ •ν•  수 있기λ₯Ό λ°”λžλ‹ˆλ‹€.