[🦁 ν”„λ‘ νŠΈμ—”λ“œ 슀쿨] 5κΈ° DAY 10 - TIL & 회고

Hoon KangΒ·2023λ…„ 3μ›” 10일
0
post-thumbnail

πŸ‘¨πŸ»β€πŸ’» TIL

CSS νŠΉκ°•

by 이쒅찬 Veamcamp λŒ€ν‘œλ‹˜

  • μ›Ή νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€ λ•Œ 생각해야 ν•  것
    1. λ ˆμ΄μ•„μ›ƒ λ§Œλ“€κΈ°
    2. λ§ˆν¬μ—… μΆ”κ°€ν•˜κΈ°
    • μ„€λ§ˆ 도배도 μ•ˆ ν•˜κ³ , μž₯νŒλ„ μ•ˆ κΉ”μ•˜λŠ”λ° 가ꡬ뢀터 듀여놓을 생각은 μ•„λ‹ˆμ§€?
  • 기초 지식과 μš©μ–΄μ— μ‹ κ²½μ“°μž
  • μ½˜ν…μΈ μ˜ 높이 지정
    • μœ μ§€λ³΄μˆ˜λ₯Ό μƒκ°ν•œλ‹€λ©΄ λ†’μ΄λŠ” μ½˜ν…μΈ μ— λ”°λΌμ„œ μ•Œμ•„μ„œ 쑰절되게 ν•˜μž.
  • Initial Value
    • ν”„λ‘œνΌν‹°λŠ” λ‚΄κ°€ μ„€μ •ν•˜μ§€ μ•Šμ•„λ„ μ΄ˆκΈ°κ°’μ΄ 미리 μ„€μ •λ˜μ–΄ μžˆλ‹€.
    • autoλŠ” λΆ€λͺ¨κ°€ μ œκ³΅ν•΄μ£ΌλŠ” μ½˜ν…μΈ  μ˜μ—­λ§ŒνΌ μ±„μš΄λ‹€!
    • width: auto = width: 100%일까?
    • λ‚΄κ°€ μ›ν•˜λŠ”λŒ€λ‘œ κ²°κ³Όκ°€ λ‚˜μ˜€μ§€ μ•ŠλŠ”λ‹€λ©΄ user agent stylesheetλ₯Ό ν™•μΈν•˜μž.
  • Inheritance
    • 상속은 좔상적인 κ°œλ…μ΄ μ•„λ‹ˆλ‹€.
    • 상속이 μ§€μ›λ˜λŠ” Propertyλ₯Ό μ •ν™•ν•˜κ²Œ μ•Œμž.
    • λΆ€λͺ¨μ— μ˜ν•΄μ„œ μžμ‹μ΄ 영ν–₯을 λ°›λŠ”λ‹€κ³  무쑰건 상속이 μ•„λ‹ˆλ‹€!
  • CSS Selector의 λͺ©μ 
    • Type SelectorλŠ” CSS Propertyλ₯Ό λ¦¬μ…‹ν• λ•Œ 정도에 μ‚¬μš©ν•˜μž.
    • ꡬ체적인 λ””μžμΈμ„ λ§Œλ“€λ•ŒλŠ” Classλ₯Ό ν™œμš©ν•˜μž
    • 그룹을 λ§Œλ“€κΈ° μœ„ν•΄μ„œ Classλ₯Ό λͺ…μ‹œν•˜λŠ” κ²½μš°λ„ μžˆλ‹€.
  • CSS Specificity
    • CSSλŠ” Selectorλ₯Ό 보고 μš°μ„ μˆœμœ„μ— λŒ€ν•œ κ°€μΉ˜νŒλ‹¨μ„ ν•œλ‹€.
    • μ–Όλ§ˆλ‚˜ ꡬ체적으둜 μž‘μ„±λ˜μ—ˆλŠ”κ°€μ— 따라 μš°μ„ μˆœμœ„λ₯Ό κ²°μ •ν•œλ‹€.
    • 같은 클래슀λ₯Ό μ—¬λŸ¬ 번 μ„ μ–Έν•˜λ©΄ ν•œ 번만 μ„ μ–Έν•œ ν΄λž˜μŠ€μ— λΉ„ν•΄μ„œ μš°μ„ μˆœμœ„κ°€ μ˜¬λΌκ°„λ‹€.

πŸ“— 회고

μ˜€λŠ˜μ„ 기점으둜 벌써 λ©‹μŸμ΄μ‚¬μžμ²˜λŸΌ ν”„λ‘ νŠΈμ—”λ“œμŠ€μΏ¨μ˜ 2μ£Όμ°¨ 과정이 μ’…λ£Œλ˜μ—ˆλ‹€. 아직 회고 μŠ€ν”„λ¦°νŠΈλ„ μ‹œμž‘ν•˜μ§€ μ•Šμ•˜λŠ”λ° 벌써 2μ£Όλ‚˜ μ§€λ‚¬λ‹€λŠ” 사싀이 μƒˆμ‚ΌμŠ€λŸ½κ²Œ λŠκ»΄μ§€λ©΄μ„œλ„ 두렀웠닀. μ΄λ ‡κ²Œ 빨리 μ§€λ‚˜κ°€λŠ”λ° λ‚΄κ°€ μ œλŒ€λ‘œ ν•˜κ³  μžˆλŠ”κ±ΈκΉŒ? μˆ˜μ—… λ‚΄μš©μ„ μ†Œν™”ν•˜κ³  λ³΅μŠ΅ν•˜λŠ” 것 λ§ŒμœΌλ‘œλ„ 벅찬데 λ‹€λ₯ΈλΆ„듀은 λ‹€ 잘 λ”°λΌκ°€λŠ” 것 κ°™κ³ , λ‚˜λ³΄λ‹€ 더 잘 ν•˜μ‹œλŠ” 것 κ°™λ‹€λŠ” 생각이 듀기도 ν–ˆμ§€λ§Œ, λ§ˆμŒμ„ λ‹€μž‘κ³  μ§€κΈˆμ˜ λ‚΄κ°€ ν•  수 μžˆλŠ” 것듀에 μ§‘μ€‘ν•˜κΈ°λ‘œ ν–ˆλ‹€. μ§€κΈˆ λ©‹μ‚¬μ—μ„œ ν•¨κ»˜ν•˜λŠ” λΆ„λ“€μ˜ μΆœλ°œμ„ μ€ 각자 λ‹€λ₯΄κΈ° λ•Œλ¬Έμ—, λ‚¨κ³Όμ˜ λΉ„κ΅λŠ” μœ μ˜λ―Έν•˜μ§€λ„ μ•Šκ³ , 끝도 μ—†λ‹€λŠ” ν˜Έμ€€λ‹˜μ˜ 말씀이 생각났닀.

λ‚΄κ°€ 버렀야 ν•  것

  • μˆ˜μ—… μ‹œκ°„μ— λ”΄ 짓 κΈˆμ§€ - μš”μ¦˜ 집쀑λ ₯이 떨어지고 μžˆλ‹€λŠ” 사싀을 많이 λŠλ‚€λ‹€.
  • 자투리 μ‹œκ°„μ„ μ˜λ―Έμ—†μ΄ λ³΄λ‚΄λŠ” 것 - μ‰¬λŠ” μ‹œκ°„μ—λŠ” μ „ μ‹œκ°„μ— 배운 λ‚΄μš©μ„ μ •λ¦¬ν•˜λ €κ³  ν•΄ 보자.

λ‚΄κ°€ κ°€μ Έκ°€μ•Ό ν•  것

  • κ·Έλ‚  배운 μˆ˜μ—… λ‚΄μš©μ€ κ·Έλ‚  λ³΅μŠ΅ν•˜κΈ° - μ˜ˆμ œλ‚˜ κ³Όμ œλ“±μ€ κΌ­ μ†μœΌλ‘œ 직접 λ§Œλ“€μ–΄ 보자!
profile
μ„Έμƒμ˜ λͺ¨λ“  것듀이 κΆκΈˆν•œ 개발자

1개의 λŒ“κΈ€

comment-user-thumbnail
2023λ…„ 3μ›” 17일

μˆ˜μ—… μ‹œκ°„μ— λ”΄ 짓... 이거 제 μ–˜κΈ° μ•„λ‹Œκ°€μš”πŸ₯Ή
같은 고민을 κ°–κ³  μžˆλŠ” 뢄이 κ³„μ‹œλ‹€λ‹ˆ ..!!!
같이 ν—€μ³λ‚˜κ°ˆ 수 μžˆμ„ 것 κ°™μ•„ 내심 λ“ λ“ ν•œ 마음이 듀기도 ν•©λ‹ˆλ‹€

κΉ”λ”ν•œ λ‚΄μš©μ˜ 볡슡 정리 보기 μ’‹μŠ΅λ‹ˆλ‹€! 같이 νž˜λ‚΄λ΄μš”πŸ”₯

λ‹΅κΈ€ 달기