πŸ“• HTML/CSSλ₯Ό κ³΅λΆ€ν•˜λ©΄μ„œ λŠλ‚€ 점

HTMLκ³Ό CSSλ₯Ό 잘 닀룬닀고 μƒκ°ν–ˆλŠ”λ° 쑰건이 λΆ™μœΌλ‹ˆ 생각보닀 μ–΄λ €μ› λ‹€.
길게 μ½”λ“œλ₯Ό 쳐본 것이 처음이고, 쑰건에 맞좰 μž‘μ„±ν•˜λ‹€ λ³΄λ‹ˆ μž‘μ„±ν•œ 뢀뢄이 κΌ¬μ—¬μ„œ λ‚΄ μƒκ°λŒ€λ‘œ λ˜μ§€ μ•Šμ•˜λ‹€.
λ‚΄ λ§ˆμŒλŒ€λ‘œ μž‘μ„±ν•˜κ²Œ 되면 λΆ„λͺ… μ‹€λ¬΄μ—μ„œλ„ λ¬Έμ œκ°€ 많이 λ°œμƒν•  κ²ƒμ΄λ‹ˆ 쑰금 더 깊게 μƒκ°ν•΄μ„œ μž‘μ„±ν•˜μ—¬μ•Όκ² λ‹€.


πŸ“™ HTML/CSS κ³΅λΆ€ν•˜λ©΄μ„œ μ–΄λ €μ› λ˜ κ°œλ…κ³Ό 이유

  • (HTML) λΆ€λͺ¨ μžμ‹ 관계에 λŒ€ν•΄ 쑰금 더 곡뢀해야겠닀.
    • μš”μ†Œλ₯Ό μ€‘μ²©ν•΄μ„œ μŒ“κ²Œ 되면 많이 ν—·κ°ˆλ¦°λ‹€.
  • (CSS) κ·Έλ¦¬λ“œ
    • κ·Έλ¦¬λ“œλ₯Ό μ‚¬μš©ν•  λ•Œ, κ°œλ…μ—μ„œ μ•½ν•˜λ‹€ λ³΄λ‹ˆ μ‚¬μš©μ€ ν•˜μ§€λ§Œ λ‚΄ μƒκ°λŒ€λ‘œ μ•ˆ 될 λ•Œκ°€ μžˆμ—ˆλ‹€.
  • (CSS) background-image
    • background-imageλ₯Ό μ‚¬μš©ν•΄μ„œ λ²„νŠΌμ„ λ§Œλ“€ λ•Œ μœ„μΉ˜λ₯Ό μž‘λŠ” 뢀뢄이 μ–΄λ €μ› λ‹€.
      κ·Έ μ΄μœ λŠ” λ²„νŠΌ μ•ˆμ—μžˆλŠ” μš”μ†Œμ˜ μœ„μΉ˜, 간격을 μ „λΆ€ κ³ λ €ν•΄μ„œ λ§Œλ“€μ–΄μ•Ό ν–ˆκΈ° λ•Œλ¬Έμ΄λ‹€.

πŸ“— 제둜베이슀 온라인 κ°•μ˜ 쀑 κ°€μž₯ 도움이 λ˜μ—ˆλ˜ κ°•μ˜μ™€ 이유

  • 클둠 μ½”λ”©(ν”„λ‘œμ νŠΈ)이 ν™•μ‹€νžˆ 도움이 많이 λ˜μ—ˆλ‹€.
    • λ‚΄ μŠ€νƒ€μΌμ˜ μ½”λ“œκ°€ μ•„λ‹Œ λ‹€λ₯Έ μ‚¬λžŒμ΄ μΉ˜λŠ” μ½”λ“œλ₯Ό 보며, 'μ•„ μ΄λ ‡κ²Œλ„ μž‘μ„±ν•  수 μžˆκ΅¬λ‚˜' μƒκ°ν•˜λ©° 더 κ°„κ²°ν•˜κ³  νŽΈν•˜κ²Œ μž‘μ„±ν•  수 μžˆλŠ” 방법을 μ•Œκ²Œ λ˜μ—ˆλ‹€.
    • 코딩에 ν₯λ―Έλ₯Ό 뢙일 수 μžˆλ‹€.
    • λ‚΄κ°€ λͺ°λžλ˜ 뢀뢄에 λŒ€ν•΄ 직접 μž‘μ„±ν•˜λ©° 읡힐 수 μžˆλ‹€.
    • μ΄λ ‡κ²Œ μž‘μ„±ν•˜λŠ” μ΄μœ μ— λŒ€ν•΄ μžμ„Ένžˆ μ„€λͺ…을 ν•΄μ€€λ‹€.

πŸ“˜ λ‚˜λ§Œμ˜ 곡뢀 팁

  • μ•Œκ³  μžˆλŠ” 뢀뢄이라고 μ†Œν™€νžˆ 곡뢀할 것이 μ•„λ‹ˆλΌ, λ‹€μ‹œ ν•œλ²ˆ κ°•μ˜λ₯Ό 보며 읡히고 μ‹€μŠ΅ν•œλ‹€.
  • λͺ¨λ₯΄λŠ” 뢀뢄이 있으면 λ‹€λ₯Έ ν™ˆνŽ˜μ΄μ§€μ— λ“€μ–΄κ°€μ„œ μ½”λ“œλ₯Ό λœ―μ–΄λ³΄λ©΄μ„œ μƒκ°ν•œ λ’€ μž‘μ„±ν•œλ‹€.
  • js μ½”λ“œλ₯Ό 자주 보며 μžμ—°μŠ€λŸ½κ²Œ 해석할 수 μžˆλ„λ‘ μ½”λ“œλ₯Ό λˆˆμ— μ΅νžŒλ‹€.
  • 보고 μ œλŒ€λ‘œ μ΅νžˆμ§€ λͺ»ν•œ 뢀뢄은 이해할 λ•ŒκΉŒμ§€ κ²€μƒ‰ν•΄μ„œ μ΅νžŒλ‹€.
  • 전에 μž‘μ„±ν•œ μ½”λ“œλ₯Ό λ‹€μ‹œ ν•œλ²ˆ 보고, μ™œ κ·Έλ ‡κ²Œ μž‘μ„±ν–ˆλŠ”μ§€ 생각해본닀.
  • todo-listλ₯Ό μ ˆλŒ€ μ†Œν™€νžˆ ν•˜μ§€ μ•ŠλŠ”λ‹€.(당일 todoλŠ” 무쑰건 λ‹¬μ„±ν•˜κΈ°)
  • 가끔은 머리λ₯Ό μ‹νžˆλ©°, μ—¬μœ λ‘­κ²Œ κ³΅λΆ€ν•œλ‹€.
  • ν•˜λ‚˜λ₯Ό 배우면 잊기 전에 λ°”λ‘œ λΈ”λ‘œκ·Έμ— μš”μ•½ μ •λ¦¬ν•œλ‹€. (μ •λ¦¬ν•˜λ©° λ‹€μ‹œ 생각해보기)
profile
#UXUI #코린이

0개의 λŒ“κΈ€