max-width 속성

max-width 속성은 요소의 최대 너비를 설정합니다. 속성 값으로는 크기 단위 또는 값을 없음을 의미하는 키워드 none를 사용할 수 있습니다.

일반적으로 이 속성은 유동적인 너비를 가진 요소(너비가 백분율로 설정되었거나 전혀 설정되지 않았으며, 요소가 자신의 내용에 따라 너비가 늘어나는 경우)에 대해 지정합니다. 요소의 너비가 백분율로 설정된 경우 - 브라우저 창을 넓히면 max-width 값에 도달할 때까지 너비가 증가합니다.

구문

css선택자 {
  max-width: 값;
}

예제

이 예제에서 너비는 부모 요소 너비의 백분율입니다. 브라우저 창의 너비를 늘리면 컨테이너도 브라우저 창 너비에 맞춰 늘어납니다. 그러나 컨테이너는 max-width에 정의된 값, 즉 900px까지만 늘어납니다. 컨테이너가 이 너비에 도달하면 더 이상 늘어나지 않습니다:

html<div id="elem"></div>

css#elem {
  width: 70%;
  max-width: 900px;
  height: 300px;
  border: 1px solid black;
}

Результат:

예제

이 예제에서 컨테이너의 너비는 양쪽으로 제한됩니다: 900px보다 커지거나 400px보다 작아질 수 없습니다:

html<div id="elem"></div>

css#elem {
  width: 70%;
  max-width: 900px;
  min-width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

함께 보기