모든 HTML 요소는 Box(사각형) 형태의 영역을 가지고 있으며,
이 Box는 안쪽부터 Content, Padding, Border, Margin 으로 구성된다는 CSS의 디자인 모델을 박스 모델이라고 한다.
박스 모델의 관점에서 웹디자인은 콘텐츠를 담을 박스 모델을 정의하고, CSS프로퍼티를 통해 스타일과 위치 및 정렬을 지정하는 것이라고 정의할 수 있다.


요소의 너비와 높이를 지정하기 위해 사용된다.
box-sizing 프로퍼티의 기본값이 content-box이기 때문에 width와 height로 지정되는 기본 너비와 높이는 content 영역만을(padding도 제외) 대상으로 한다.
전체 박스를 대상으로 하려면 box-sizing: border-box;를 해주면 된다.
⇒ 그렇게 하면 padding과 border까지 포함된 크기를 기준으로 너비와 높이를 정할 수 있다. (margin은 제외)
만약 width와 height로 지정된 content영역보다 실제 content가 크면 넘치게 된다.
width와 height 프로퍼티의 default value는 auto이다.


margin: 0 auto;
⇒ 상하는 0, 좌우는 자동, 즉 가로로 중앙에 위치시켜주는 코드다.
max-width, min-width 프로퍼티도 있다.