[입문] 웹 프론트 엔드 - 4주차 - box model

box model

웹 사이에서는 다양한 모양을 볼 수 있습니다.

하지만 실질적으로 웹 사이트에서는 모두 box 모양을 하고 있습니다.

이번 강의에서는 웹 사이트에서 엘리먼트가 표현되는 box model에 대해서 알아봅시다.

box model, 즉 박스 모양의 모델입니다.

웹사이트에서는 표시되는 방식이 모두 box 모양이기 때문에, box모양을 표현하기 위한 방법입니다.

가장 많이 쓰는 3가지 속성은 다음과 같습니다.

• block
  block은 기본적으로 부모 사이즈(가로)를 모두 상속받습니다.
  자기 자신의 사이즈를 가질 수 있습니다.
  
  

• inline-block
  inline-block은 기본적으로 자손의 사이즈를 가집니다.
  inline속성 때문에 텍스트 관련 속성의 영향을 받습니다.
  자기 자신의 사이즈를 가질 수 있습니다.
  
  

• inline
  inline은 기본적으로 자손의 사이즈를 가집니다.
  텍스트 관련 속성의 영향을 받습니다.
  자기 자신의 사이즈를 가질 수 없습니다.

box-sizing

엘리먼트의 사이즈의 범주를 어디까지 잡을 것인지에 대한 속성입니다.

• content-box
  기본적으로 설정되어 있는 속성입니다.
  width가 padding을 제외한 content 부분까지만 적용됩니다.
  
  

• border-box
  width가 padding과 border 까지 포함한 값으로 적용됩니다.