resize 속성은 사용자가 요소의 크기를 조정할 수 있게 해주는 CSS3 UI의 속성입니다. resize 속성은 사용자가 요소의 크기를 조정할 수 있게 해주는 CSS3 UI의 속성입니다.
크기 조정:없음|둘 다|수평|수직;
구문은 다음과 같이 설명됩니다.
● 없음: 사용자가 요소의 크기를 조정할 수 없습니다.
●both: 사용자가 요소의 높이와 너비를 조정할 수 있습니다.
●horizontal: 사용자가 요소의 너비를 조정할 수 있습니다.
●수직: 사용자가 요소의 높이를 조정할 수 있습니다.
resize 속성을 사용할 때는 다음 사항에도 주의해야 합니다.
●크기 조정 속성만 설정하는 것은 유효하지 않습니다. 효과를 얻으려면 크기 조정 속성을 오버플로 속성과 함께 사용해야 하며, 오버플로 속성 값을 자동, 숨김 또는 스크롤로 설정해야 합니다.
●모든 요소에 resize 속성을 설정할 수 있는 것은 아닙니다. 예를 들어 img 및 table 속성은 resize 속성을 사용할 수 없습니다.
(크기 조정) 요소의 크기를 조정합니다.
1. 크기 조정: 없음 크기 조정: 없음
예:
<!DOCTYPEhtml><html><head><style>div{border:3pxsolid;padding:15px;width:300px;resize:none;}</style></head><body><h1>TheresizeProperty</h1 ><div><p>크기 조정:없음</p></div></body></html>실행 결과:
2. 크기 조정: 둘 다
예:
<!DOCTYPEhtml><html><head><style>div{border:3pxsolid;padding:15px;width:300px;resize:both;overflow:auto;}</style></head><body><h1> TheresizeProperty</h1><div><p>크기 조정:모두</p></div></body></html>실행 결과:
3.크기 조정: 가로 크기 조정: 가로
예:
<!DOCTYPEhtml><html><head><style>div{border:3pxsolid;padding:15px;width:300px;resize:horizontal;overflow:auto;}</style></head><body><h1> TheresizeProperty</h1><div><p>크기 조정:가로</p></div></body></html>실행 결과:
4.크기 조정: 세로 크기 조정: 세로
예:
<!DOCTYPEhtml><html><head><style>div{border:3pxsolid;padding:15px;width:300px;resize:vertical;overflow:auto;}</style></head><body><h1> Theresize속성</h1><div><p>크기 조정:세로</p></div></body></html>실행 결과:
