resize

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

resize CSS 속성은 요소의 크기 조절 여부와 방향을 설정할 수 있습니다.

시도해 보기

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">Try resizing this element.</div>
</section>

#example-element {
  background: linear-gradient(135deg, #0ff 0%, #0ff 94%, #fff 95%);
  border: 3px solid #c5c5c5;
  overflow: auto;
  width: 250px;
  height: 250px;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

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 의 값에 따른) 수평이나 수직의 인라인 방향입니다.

형식 정의

초기값	`none`
적용대상	elements with `overflow` other than `visible`, and optionally replaced elements representing images or videos, and iframes
상속	no
계산 값	as specified
Animation type	discrete

형식 구문

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;
}

결과

명세서

Specification
CSS Basic User Interface Module Level 4 # resize

브라우저 호환성

같이 보기

<textarea>