resize 속성

resize 속성은 textarea 나 다른 요소들의 크기 변경을 허용하거나 금지합니다 (다른 요소들은 모든 브라우저에서 동작하지 않을 수 있습니다).

구문

css선택자 {
  resize: both | horizontal | vertical | none;
}

값

기본값: none. 일부 브라우저에서는 textarea에 대해 both입니다. resize를 지원하지 않는 브라우저에서는 textarea가 none 값이 지정된 것처럼 동작합니다.

예제 . both 값

요소가 양방향으로 늘어납니다:

html<textarea></textarea>

csstextarea {
  resize: both;
  width: 200px;
  height: 200px;
}

Результат:

예제 . horizontal 값

요소가 수평 방향으로만 늘어납니다:

html<textarea></textarea>

csstextarea {
  resize: horizontal;
  width: 200px;
  height: 200px;
}

Результат:

예제 . vertical 값

요소가 수직 방향으로만 늘어납니다:

html<textarea></textarea>

csstextarea {
  resize: vertical;
  width: 200px;
  height: 200px;
}

Результат:

예제 . none 값

요소가 전혀 늘어나지 않습니다:

html<textarea></textarea>

csstextarea {
  resize: none;
  width: 200px;
  height: 200px;
}

Результат:

예제 . 너비와 높이 제한

max-width, min-width, max-height, min-height 속성을 사용하여 최소 및 최대 너비와 높이를 제한할 수 있습니다:

html<textarea></textarea>

csstextarea {
  resize: both;
  min-height: 100px;
  max-height: 300px;
  min-width: 100px;
  max-width: 300px;
}

Результат: