CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS3 resize 속성 사용 방법 및 예제

resize CSS 속성은 요소가 사용자에 의해 크기를 조정할 수 있는지(만약 가능하다면) 그리고 어느 방향으로 조정할 수 있는지를 지정합니다.

다음 표는 이 속성의 사용 설명과 버전 역사, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 문법을 설명합니다.

기본 값:	none
적용 대상:	visibleoverflow이외의 요소
thừa kế:	없음
애니메이션 가능:	아니요.참조: 애니메이션 속성。
버전:	CSS3의 새 기능
JavaScript 문법:	object.style.resize="both"

resize 사용 문법

이 속성의 문법은 다음과 같습니다:

resize:　none　|　both　|　horizontal　|　vertical　|　initial　|　inherit

다음 예제는 resize 속성을 사용하는 방법을 보여줍니다.

예제

　　textarea　{
　　　resize:　none;
　　}
　　div　{
　　　resize:　both;
　　　overflow:　auto;
　　}

테스트를 보세요‹/›

주의: resize 속성은 하나의 요소에 적용되며, 이 요소의 계산overflow값은 visible입니다. overflow가 특정 축에서(즉,overflow-xvs. overflow-y）의 값이 다를 경우, 이 속성은 값을 가지지 않는 크기 visible에 적용됩니다.

속성 값

다음 표는 이 속성의 값을 설명합니다.

값	설명
none	사용자는 요소의 크기를 조정할 수 없습니다. 기본 값입니다.
both	요소는 사용자가 요소의 높이와 너비를 조정할 수 있는 양방향 크기 조정 메커니즘을 표시합니다.
horizontal	요소는 사용자가 요소의 너비를만 조정할 수 있는 단방향 수평 크기 조정 메커니즘을 표시합니다.
vertical	요소는 사용자가 요소의 높이를만 조정할 수 있는 단방향 수직 크기 조정 메커니즘을 표시합니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 resize 속성 값을 사용합니다.

브라우저 호환성

resize 속성의 브라우저 호환성을 확인하려면 다음 표를 참조하십시오. 표에 나타난 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호입니다. 모든 주요 브라우저는 이 속성을 지원합니다.

	파이어폭스 4+ 구글 크롬3+ 인터넷 익스플로러 × 애플 사파리 3+ 오페라 15+

더 읽기

다음 튜토리얼을 참조하십시오:CSS Overflow。

관련 속성:overflow，overflow-x，overflow-y

CSS right 속성 CSS quotes 속성