CSS 크기 조정 속성
예시
여기에서 사용자는 <div> 요소의 높이와 너비를 모두 조정할 수 있습니다.
div {
resize: both;
overflow: auto;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
resize
속성은 사용자가 요소의 크기를 조정할 수 있는지 여부(및 방법)를 정의합니다 .
참고: 이 resize
속성은 overflow="visible"인 인라인 요소 또는 블록 요소에는 적용되지 않습니다. 따라서 오버플로가 "스크롤", "자동" 또는 "숨김"으로 설정되어 있는지 확인하십시오.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-moz- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
CSS 구문
resize: none|both|horizontal|vertical|initial|inherit;
속성 값
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
더 많은 예
예시
사용자가 <div> 요소의 높이만 조정하도록 합니다.
div
{
resize: vertical;
overflow: auto;
}
예시
사용자가 <div> 요소의 너비만 크기 조정하도록 합니다.
div
{
resize: horizontal;
overflow: auto;
}
예시
많은 브라우저에서 <textarea>는 기본적으로 크기를 조정할 수 있습니다. 여기에서는 크기 조정 기능을 비활성화하기 위해 크기 조정 속성을 사용했습니다.
textarea {
resize: none;
}
관련 페이지
CSS 튜토리얼: CSS 사용자 인터페이스
HTML DOM 참조: 속성 크기 조정