• CSS Height / Width

CSS height와 width속성들은 한 요소의 높이와 너비를 설정하기 위해 사용됩니다

CSS max-width속성은 한 요소의 최대 너비를 설정하기 위해 사용됩니다.

height와 width 속성들은 한 요소의 높이와 너비를 설정하기 위해 사용됩니다.

높이와 너비 속성들은 패딩(padding), 테두리(borders) 또는 여백(margins)을 포함하지 않습니다. 해당 요소의 패딩(padding), 테두리(borders), 여백(margins) 내부 영역의 높이/너비를 설정합니다.

height와 width 속성들은 하기의 값들을 가질 수 있습니다.

• auto - 기본 값입니다. 브라우저가 높이와 너비를 계산합니다.
• length - px, cm 등의 단위로 높이/너비를 정의합니다.
• % - 포함하고 있는 블럭(block)의 백분율로 높이/너비를 정의합니다.
• initial - 높이/너비를 기본 값으로 설정합니다.
• inherit - 높이/너비는 부모 요소의 값을 상속받습니다.

<div> 요소의 높이와 너비를 설정합니다.

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

다른 <div> 요소의 높이와 너비를 설정합니다.

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

• height와 width속성들은 패딩(padding), 테두리(borders) 또는 여백(margins)을 포함하지 않습니다.
  
• height와 width속성들은 패딩(padding), 테두리(borders), 여백(margins) 안쪽에 있는 영역의 높이/너비를 설정합니다.
  

max-width 속성은 한 요소의 최대 너비를 설정하기 위해 사용됩니다.

max-width는 px, cm 등과 같은 길이 값(length values)으로 지정되거나, 포함하고 있는 블럭(block)의 백분율로, 또는 아무것도 없는 것(이것이 기본 설정입니다. 최대 너비가 없다는 것을 의미합니다)으로 설정됩니다.

상기 예제에서 <div>의 문제는 브라우저 화면이 해당 요소의 너비(500px)보다 더 작을 때 생깁니다. 그렇게 되면 브라우저는 페이지에 수평 스크롤바를 추가합니다.

이런 상황에서 대신에 max-width를 사용하는 것은 작은 화면에서 브라우저를 다루는 것을 개선합니다.

• Note : max-width속성 값은 width 속성을 무시합니다.

<div> 요소는 100px의 높이와 최대너비 500px를 가집니다.

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}