모던 박스

• border-box: fragment(fragment-fill) 단계에서 작동. 그림 그릴 때만 영향을 줌
• border box 밖의 box-shadow는 geometry에 영향을 주지 않음
• box-shadow: inset을 주면 border-box 안에 그림자를 줄 수 있음.
  • 또한 몇 개라도 겹겹이 줄 수 있음

• outline: box shadow와 같은 위치에 그려짐. 역시 geometry에 영향을 주지 않음

⇒ modern box: geometry에 영향을 끼치지 않는 outline, box-shadow, box-shadow inset가 포함되어 보다 복잡한 박스 모델이 됨

• 콘텐츠 박스: width, height
• box-sizing: contents-box → 무조건 콘텐츠 크기를 지켜야 할 때(빨간 박스)
• box-sizing: border-box → width, height값에 padding, border를 포함시킬 때

• div 태그 사이에 공백 문자가 있으면 박스 사이에 공백이 생김

• 저 공백을 없애면 됨