resize

resize 는 다음 요소들에는 적용되지 않습니다.

• 인라인 요소
• overflow 속성이 visible 혹은 clip 로 설정된 블록 요소

/* 키워드 값 */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* 전역 값 */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

resize 속성은 다음 리스트에서 단일 키워드 값으로 지정됩니다.

none

해당 요소는 사용자가 크기를 조절할 수 있는 방법을 제공하지 않습니다.

both

해당 요소는 사용자가 크기를 조절하는 방법을 표시하며, 수평이나 수직 방향으로 모두 크기를 변경할 수 있습니다.

horizontal

해당 요소는 사용자가 크기를 조절하는 방법을 표시하며, 이는 수평 방향입니다.

vertical

해당 요소는 사용자가 크기를 조절하는 방법을 표시하며, 이는 수직 방향입니다.

block

해당 요소는 사용자가 크기를 조절하는 방법을 표시하며, 이는 (writing-mode 와 direction 의 값에 따른) 수평이나 수직의 블록 방향입니다.

inline

해당 요소는 사용자가 크기를 조절하는 방법을 표시하며, 이는 (writing-mode 와 direction 의 값에 따른) 수평이나 수직의 인라인 방향입니다.

resize = 
  none        |
  both        |
  horizontal  |
  vertical    |
  block       |
  inline      

다수의 브라우저에서 <textarea> 요소는 기본적으로 크기 조절이 가능합니다. resize 속성을 이용하면 이 동작을 변경할 수 있습니다.

HTML

<textarea>텍스트를 입력해 보세요.</textarea>

CSS

textarea {
  resize: none; /* 크기 조절 불가 */
}

결과

resize 속성을 이용하면 어떤 요소의 크기도 조절이 가능합니다. 아래 예제는 크기 조절이 가능한 <div>가 크기 조절이 가능한 단락 (<p> 요소)를 포함합니다.

HTML

<div class="resizable">
  <p class="resizable">
    이 단락은 어느 방향으로든 크기 조절이 가능합니다. CSS `resize` 속성이 요소에
    `both` 로 설정되어 있습니다.
  </p>
</div>

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

결과

• <textarea>