CSS Box Modeling(학습 18일차 TIL)

210702 오늘은 아주 중요한 Box Modeling에 대해 학습했다.

Today's tips

• Adobe Xd에서 Shift를 누르고 화살표로 개체를 10씩 이동할 수 있다.

Must Remember

• 전체선택자(*)를 Asterisk(애스터리스크,아스테리스크)라고 한다.
• 실무에서는 Asterisk를 잘 사용하지 않는다.
  (문서에 들어가는 엘리먼트만 모아서 적용)
• margin-top은 천장에 붙으면 적용 X
• margin-top과 bottom값은 맞물리면 더 큰 마진 값으로 상쇄.
  (margin 상쇄는 인접한 두 박스가 온전한 block-level 요소일 경우에만 적용)
• box 내용물의 너비, 높이 값을 계산할 때 전체 크기에서 border, padding, margin 값을 모두 더해서 남은 값을 나누는 식으로 계산한다.
• margin 상쇄 예외

  • box가 position: absolute 된 상태
  • box가 float: left/right 된 상태 (단, clear 되지 않은 상태)
  • box가 display: flex 일 때 내부 flexbox item
  • box가 display: grid 일 때 내부 grid item