BoxModel

---

문서의 요소를 하나의 직사각형 박스 로 여기는 모델입니다.

---

 

CSS는 박스의 크기, 위치, 속성( 색, 배경, 테두리 모양 등 ) 을 결정합니다.

 

박스는 위의 영역을 갖습니다.

1. 내용 영역 ( Content Area ) : 글, 이미지, 비디오 등 요소처럼 실질적인 내용 부분 입니다. 
2. 패딩 영역 ( Padding Area ) : 내용과 테두리 사이의 간격입니다. ( 눈에 보이지 않습니다.)
3. 테두리 영역 ( Border Area ) : 내용과 패딩 주변을 감싸는 테두리 입니다.
4. 마진 영역 ( Margin Area ) : 테두리 영역과 인근 요소 사이의 빈 공간까지 포함합니다. ( 눈에 보이지 않습니다.)

 

box-sizing

기본값은 content-box 이며, 상속, 애니메이션 은 적용되어 있지 않습니다.

box-sizing: content-box | border-box | initial | inherit

// content-box : 콘텐트 영역을 기준으로 크기를 정합니다.
// border-box : 테두리를 기준으로 크기를 정합니다.
// initial : 기본값으로 설정합니다.
// inherit : 부모 요소의 속성값을 상속받습니다.