λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
✏️ DevLog/Devcourse

[DevCourse] μƒμ„±ν˜• AI ν™œμš© λ°±μ—”λ“œ λ°λΈŒμ½”μŠ€ 4일차

by hyebin (Helia) 2025. 4. 9.
λ°˜μ‘ν˜•

μ˜€λŠ˜μ€ 본격적으둜 CSS μˆ˜μ—…μ΄ μ‹œμž‘λλ‹€.

사싀 λ‚˜λŠ” κ·Έλ™μ•ˆ λ””μžμΈμ— μžμ‹ μ΄ μ—†μ–΄μ„œ μŠ€νƒ€μΌμ„ μž…νžˆλŠ” 데 μ†Œκ·Ήμ μΈ νŽΈμ΄μ—ˆλ‹€. “일단 μž‘λ™ν•˜κ²Œ λ§Œλ“€κ³ , κΎΈλ―ΈλŠ” 건 λ‚˜μ€‘μ—…”λΌλŠ” λ§ˆμΈλ“œλ‘œ μ½”λ”©ν•΄μ™”λ˜ 것 κ°™λ‹€.

 

그런 λ‚˜μ—κ²Œ 였늘 μˆ˜μ—…μ€, ‘μŠ€νƒ€μΌλ„ μ½”λ“œμ˜ 일뢀’ λΌλŠ” κ±Έ λ‹€μ‹œ μƒκ°ν•˜κ²Œ ν•΄μ€€ μ‹œκ°„μ΄μ—ˆλ‹€.


🎨 였늘 배운 λ‚΄μš© 간단 정리

  • CSSλŠ” μ›Ή νŽ˜μ΄μ§€μ˜ λ””μžμΈκ³Ό λ ˆμ΄μ•„μ›ƒμ„ λ‹΄λ‹Ήν•˜λŠ” μ–Έμ–΄
  • 인라인 / λ‚΄λΆ€ / μ™ΈλΆ€ μŠ€νƒ€μΌ 적용 방식
  • κΈ°λ³Έ μ„ νƒμžμ™€ 속성듀: κΈ€κΌ΄, 크기, 색상, λ°°κ²½, λ°•μŠ€ λͺ¨λΈ λ“±
  • μš”μ†Œ 배치 방식: float, position, display, z-index λ“±

이미 μ–΄λŠ 정도 μ•Œκ³  있던 κ°œλ…λ„ μžˆμ—ˆμ§€λ§Œ, μ΄λ ‡κ²Œ ν•œ λ²ˆμ— μ •λ¦¬ν•˜λ©° μ²΄κ³„ν™”ν•˜λŠ” 과정이 였히렀 더 μ’‹μ•˜λ‹€.

머릿속에 흩어져 있던 퍼즐이 μ‘°κΈˆμ”© λ§žμΆ°μ§€λŠ” λŠλ‚Œ.


🧑 λŠλ‚€ 점

λ””μžμΈ 감각이 λΆ€μ‘±ν•˜λ‹€λŠ” 이유둜 CSSλ₯Ό λ©€λ¦¬ν–ˆμ—ˆλŠ”λ°, 였늘 μˆ˜μ—…μ„ λ“£κ³  λ‚˜λ‹ˆ 생각이 쑰금 λ°”λ€Œμ—ˆλ‹€.

 

μŠ€νƒ€μΌλ§λ„ 결ꡭ은 μ‚¬μš©μž κ²½ν—˜μ„ μœ„ν•œ ν‘œν˜„ 방식이고, μ½”λ“œμ²˜λŸΌ 둜직 있게 μ‘°ν•©ν•  수 μžˆλ‹€λŠ” 게 였히렀 재밌게 λŠκ»΄μ‘Œλ‹€.

μ•žμœΌλ‘œλŠ” 겁먹지 말고, CSS도 μ½”λ“œμ²˜λŸΌ μžμ—°μŠ€λŸ½κ²Œ 닀뀄보고 μ‹Άλ‹€.

λ°˜μ‘ν˜•