속성 min-width

속성 min-width는 요소의 최소 너비를 설정합니다. 속성 값은 크기 단위 중 하나 또는 값을 지정하지 않음을 의미하는 키워드 none를 사용합니다.

주로 유동적인 너비를 가진 요소(너비가 백분율로 지정되었거나 전혀 지정되지 않아 내용에 따라 너비가 늘어나는 요소)에 대해 설정합니다. 요소의 너비가 백분율로 지정된 경우 - 브라우저 창의 크기를 줄이면 너비가 min-width 값에 도달할 때까지 줄어듭니다.

문법

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

예시

이 예시에서 너비는 부모 요소 너비의 백분율을 나타냅니다. 브라우저 창의 너비를 줄이면 컨테이너도 브라우저 창 너비에 맞춰 줄어듭니다. 그러나 컨테이너는 min-width, 즉 400px로 정의된 크기까지만 줄어듭니다. 컨테이너가 이 너비에 도달하면 줄어드는 것을 멈춥니다:

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

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

Результат:

예시

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

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

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

Результат:

함께 보기