box-sizing 속성:

width 속성과 height 속성이 차지하는 범위를 지정합니다.

box-sizing: content-box : 이 값은 CSS 표준에 의해 정의된 기본 스타일이다. 


width와 height 속성은 padding, border, margin을 포함하여 측정되며,

을 포함하지 않는다.

box-sizing: border-box : width와 height 속성이 padding 및 border를 포함하며,

box-sizing: padding-box :

width와 height 속성은 padding 크기를 포함한다.

하지만 border 및 margin을 포함하지 않는다.

margin을 포함하지 않는다. 이 box model 은 인터넷 익스플로러에서 문서가 쿽스 모드일 때 사용된다.

---

background-size

background-size:cover;
cover로 설정하면 이미지의 가로/세로 비율은 고정되고 , 가로 크기가 요소의 가로 크기로 맞추어진다
(가로크기=요소 가로크기)
세로크기가 요소의 세로크기보다 크면 아래가 감추어져 화면에는 보이지 않는다.

background-size:contain;
이미지의 가로/세로 비율은 고정되고 세로크기가 요소의 세로크기로 맞추어 진다.
가로 크기가 요소의 가로 크기보다 작으면 빈공간이 생긴다.