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;
Try resizing this element.
#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로 설정된 블록 요소
구문
css
/* 키워드 값 */
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 |
형식 구문
예제
텍스트 영역 크기 조절을 비활성화하기
CSS
css
textarea {
resize: none; /* 크기 조절 불가 */
}