CSS Height와 Width

요소의 높이, 너비 설정

height와 width 속성은 요소(Element)의 높이 및 너비를 설정하는데 사용됩니다. 높이와 너비는 auto나 px, cm 등의 길이 값 또는 포함된 블록의 백분율(%)로 지정합니다. (auto : 브라우저가 높이와 너비를 계산한다는 의미)

여기서 주의할 점은 height 및 width 속성에는 padding, border 또는 margin의 길이가 포함되지 않습니다. 즉 width, height 속성은 오직 내의 높이와 너비를 설정합니다.

max-width 설정

max-width 속성은 요소의 최대 너비를 설정하는 데 사용됩니다. max-width는 px, cm 등의 길이 값이나 포함하는 블록의 퍼센트(%) 값으로 지정하거나 none으로 설정 될 수 있습니다 (none은 기본값으로 최대 너비가 없음을 의미). 가령 width의 값으로 500픽셀을 설정한 경우 브라우저 창이 요소의 너비 500 픽셀보다 작을 때 문제가 발생합니다. 이 때 브라우저는 페이지에 가로 스크롤 막대를 추가합니다. 이러한 경우에 max-width를 사용하면 브라우저가 작은 창을 보다 잘 처리 할 수 있습니다. 그 이하로 줄어들지 않습니다.