크기 단위
백분율 단위(%) : 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기
배수 단위(em) : 해당 글꼴(font)의 기본 크기를 1em으로 놓고, 그에 대한 상대적인 크기
픽셀 단위(px) : 스크린의 픽셀(pixel)을 기준으로 하는 절대적인 크기
크기 조절
height / width
HTML 요소의 높이와 너비
기본 설정값은 auto -> 웹 브라우저가 각 HTML 요소에 맞게 자동으로 높이와 너비를 설정
설정된 너비 이하로 브라우저의 크기가 줄어들 때 해당 요소에 스크롤 바를 생성
<span> 태그등 inline 요소는 적용 되지 않음
#box{ width: 100px; height: 60px }
max-width
HTML 요소가 가질 수 있는 최대 너비
기본 설정값은 none
해당 HTML 요소의 너비에 제한을 두지 않음
웹 브라우저의 크기가 줄어들면 거기에 맞춰 HTML 요소의 너비도 자동으로 줄어듬
min-width
HTML 요소가 가질 수 있는 최소 너비
기본 설정값은 0
해당 HTML 요소의 너비에 제한을 두지 않음
min-width 속성이 설정된 요소에 width 속성값을 따로 설정하지 않으면 초기 너비는 100%
웹 브라우저의 크기가 줄어들면 거기에 맞춰 HTML 요소의 너비도 자동으로 줄어듬
웹 브라우저가 min-width 속성으로 설정된 너비 이하로 줄어들면, HTML 요소의 너비는 더는 줄어들지 않고 수평 스크롤 바를 생성
max-height
HTML 요소가 가질 수 있는 최대 높이
기본 설정값은 none
해당 HTML 요소의 크기에 따라 높이가 자동으로 설정
max-height 속성으로 최대 높이를 설정하면, 해당 HTML 요소의 높이를 설정된 높이 이하로 제한
해당 요소의 높이가 설정된 최대 높이보다 클 경우에는 수직 스크롤 바를 생성
min-height
HTML 요소가 가질 수 있는 최소 높이
기본 설정값은 0
해당 HTML 요소의 높이에 제한을 두지 않음
min-height 속성을 설정하면 해당 HTML 요소의 높이를 설정된 높이 이하로 제한
즉 height 속성값이 min-height 속성값 이하로 낮아지면 안됌
이러한 min-height 속성값은 max-height 속성값과 height 속성값보다 먼저 적용
https://www.tcpschool.com/css/css_boxmodel_dimension
