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로 설정된 블록 요소
구문
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 |
형식 구문
resize =
none |
both |
horizontal |
vertical |
block |
inline
예제
텍스트 영역 크기 조절을 비활성화하기
다수의 브라우저에서 <textarea> 요소는 기본적으로 크기 조절이 가능합니다. resize 속성을 이용하면 이 동작을 변경할 수 있습니다.
HTML
html
<textarea>텍스트를 입력해 보세요.</textarea>
CSS
css
textarea {
resize: none; /* 크기 조절 불가 */
}
결과
임의의 요소의 조절하기
resize 속성을 이용하면 어떤 요소의 크기도 조절이 가능합니다. 아래 예제는 크기 조절이 가능한 <div>가 크기 조절이 가능한 단락 (<p> 요소)를 포함합니다.
HTML
html
<div class="resizable">
<p class="resizable">
이 단락은 어느 방향으로든 크기 조절이 가능합니다. CSS `resize` 속성이 요소에
`both` 로 설정되어 있습니다.
</p>
</div>
CSS
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 |
브라우저 호환성
Loading…