πŸŽ„ μ„±μž₯일지 3.1

μ±… ν–‰λ³΅ν•œ 이기주의자(웨인 닀이어)의 λ‚΄μš©μ— μžκ·Ήλ°›μ•„ μ‹œμž‘ν•˜λŠ” μ†Œλ°•ν•œ μ„±μž₯기둝

μ‚΄μ•„μžˆλŠ” 꽃과 죽은 꽃은 μ–΄λ–»κ²Œ κ΅¬λ³„ν•˜λŠ”κ°€?
μ„±μž₯ν•˜κ³  μžˆλŠ” 것이 μ‚΄μ•„ μžˆλŠ” 것이닀.
생λͺ…μ˜ μœ μΌν•œ μ¦κ±°λŠ” μ„±μž₯이닀!

🌳 ν‚€μ›Œλ“œ (1.0)
μ΅œλŒ€ν•œ κ°„λ‹¨ν•˜κ²Œ 정리, 좔후에 λ³΄λ©΄μ„œ 슀슀둜 μ„€λͺ…
πŸ‰ κ²½ν—˜ μœ„μ£Όλ‘œ (2.0)
λ‹¨μˆœ 정보λ₯Ό μ „λ‹¬ν•˜κΈ°λ³΄λ‹€ 무엇을 λ°°μ› κ³  μ–΄λ–»κ²Œ ν•΄κ²°ν–ˆλŠ”μ§€ 짧고 κ°„λ‹¨ν•˜κ²Œ μž‘μ„±
❄️ 정해진 ν…œν”Œλ¦Ώμ— λ§žμΆ°μ„œ (3.0)
ν‚€μ›Œλ“œ, κ²½ν—˜ λͺ¨λ‘ μ’‹λ‹€. λ‹€λ§Œ 맀일 μž‘μ„±ν•˜κΈ°λ‘œ 마음 λ¨Ήμ€λ§ŒνΌ ν•΅μ‹¬λ§Œ κ°„κ²°ν•˜κ²Œ 정리할 수 있게 ν…œν”Œλ¦Ώμ„ μž‘μ„± (3.1) 230102λΆ€ν„° μ‹œμž‘λ˜λŠ” ν•™μŠ΅μ— κ΄€ν•œ λ‚΄μš© μΆ”κ°€

πŸ”‘ 였늘의 ν‚€μ›Œλ“œ

position: relativeλŠ” 주둜 μ–Έμ œ ν™œμš©ν• κΉŒ?

  • ν•˜μœ„ μš”μ†Œλ“€μ„ absolute둜 μ£Όκ³  κ·Έ μš”μ†Œλ“€μ˜ 기쀀을 μž‘μ„ λ•Œ, μƒμœ„ μš”μ†Œμ— μ‚¬μš©ν•œλ‹€.

.test div와 .test > div의 μ°¨μ΄λŠ”?

  • .test div: test νƒœκ·Έμ˜ μ•„λž˜ μžˆλŠ” λͺ¨λ“  div νƒœκ·Έλ“€μ„ 선택
  • .test > div: test νƒœκ·Έμ˜ λ°”λ‘œ μ•„λž˜ κΉŠμ΄μ— μžˆλŠ” div νƒœκ·Έλ“€μ„ 선택

head νƒœκ·Έ μ•ˆμ— λ“€μ–΄κ°€λŠ” νƒœκ·Έλ“€?

  • title: μ‚¬μ΄νŠΈμ˜ 이름을 κ²°μ •
  • link: 주둜 stylesheet을 톡해 μ™ΈλΆ€μ˜ cssλ₯Ό μ΄μš©ν•  λ•Œ μ‚¬μš©
  • script: μ›ΉνŽ˜μ΄μ§€μ˜ 동적인 μš”μ†Œλ₯Ό μœ„ν•΄ javascript νŒŒμΌμ„ μ—°κ²°ν•  λ•Œ μ‚¬μš©
  • meta: λ¬Έμ„œλ₯Ό ν‘œν˜„ν•˜λŠ” νƒœκ·Έκ°€ μ•„λ‹Œ, λ¬Έμ„œλ₯Ό μ„€λͺ…ν•˜κΈ° μœ„ν•΄ μ‘΄μž¬μœ„ν•΄ μ‚¬μš©

box modelκ³Ό κ΄€λ ¨ν•œ css 속성이 μƒμ†λ˜μ§€ μ•ŠλŠ” μ΄μœ λŠ”?

  • 기본적으둜 css의 상속은 μŠ€νƒ€μΌλ§μ„ νŽΈν•˜κ²Œ ν•΄μ£ΌλŠ” κΈ°λŠ₯μž…λ‹ˆλ‹€. ν•˜μ§€λ§Œ, 잘 생각해보면 box model을 κ±΄λ“œλ¦¬λŠ” μš”μ†Œλ§ˆμ € λΆ€λͺ¨μ—μ„œ μžμ‹μœΌλ‘œ 상속이 λ˜λŠ” 게 크게 μ˜λ―Έκ°€ μ—†κΈ° λ•Œλ¬Έμ— μƒμ†λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

class와 idλ₯Ό μ‚¬μš©ν•˜λŠ” κΈ°μ€€?

  • class: μ—¬λŸ¬ νƒœκ·Έμ— λ™μ‹œμ— μ–΄λ–€ 집단적인 속성을 λΆ€μ—¬ν•  λ•Œ
  • id: κ³ μœ ν•œ ν•˜λ‚˜μ˜ νƒœκ·Έμ—λ§Œ 속성을 λΆ€μ—¬ν•  λ•Œ
  • (μΆ”κ°€)css BEM λͺ…λͺ…λ²•μ—μ„œλŠ” class만 μ‚¬μš©ν•˜μ—¬ νƒœκ·Έλ“€μ„ 선택

μ°Έκ³ 

  • μ—†μŒ

πŸ“ μš”μ•½ 및 ν•˜λ£¨ 간단 회고

μš”μ¦˜μ—” 거의 λ―Έμ…˜ κ΅¬ν˜„ μœ„μ£Όλ‘œ ν•˜λ£¨λ₯Ό λ³΄λ‚΄λ‹€λ³΄λ‹ˆ μ„±μž₯일지에 κ°œλ…μ •λ¦¬ν•  λ‚΄μš©μ΄ μ—†μ—ˆλ‹€..!(핑계…πŸ€ͺ) μ•žμœΌλ‘œ 맀일 μ λŠ” μ„±μž₯일지에 λ„ˆλ¬΄ κ°œλ…μ μΈ 것뿐 μ•„λ‹ˆλΌ κ·Έ λ‚ μ˜ κ²½ν—˜κ³Ό 감정, 어렀움 등도 ν•¨κ»˜ μ μ–΄μ„œ 정리해보렀 ν•œλ‹€..! μžŠμ§€λ§κ³  λ‚˜λ§Œμ˜ ν•˜λ£¨λ₯Ό λ‚˜λ§Œμ˜ ν‘œν˜„λ²•μœΌλ‘œ 정리할 수 있게 ν•˜μž!

였늘의 μž˜ν•œ 점

  • μ£Όλ§μ΄μ§€λ§Œ μŠ€ν„°λ”” 카페 κ°€μ„œ κ³΅λΆ€ν•œ 점
  • μ§„μ§œ λͺ‡λ…„λ§Œμ— μ½”λ…Έ κ°€μ„œ 슀트레슀 ν’€κ³  온 점

였늘의 μ•„μ‰¬μš΄ 점

  • 주말이라 κ·ΈλŸ°κ°€ λ‚΄κ°€ λͺ©ν‘œλ‘œ ν•œ κ²ƒλ³΄λ‹€λŠ” 곡뢀λ₯Ό ν•˜μ§€ μ•Šμ€ 점