CSS - 유동적으로 박스 크기 조절하기

resize 속성은 사용자가 요소의 박스 크기를 조절할 수 있게 해줍니다. 이 속성을 사용하려면 overflow 와 함께 사용합니다.

속 성	설 명
none	크기를 변경할 수 없습니다.
both	가로/세로 크기를 변경할 수 있습니다.
horizontal	가로만 변경할 수 있습니다.
vertical	세로만 변경할 수 있습니다.

<style>
.use-resize {
  width: 100px;
  height: 100px;
  border: 1px solid;

  resize: both;
  overflow: auto;
}
</style>
<div class="use-resize">
  박스 모서리를 잡아 크기를 조절해 보세요. 원하는 크기로 변경할 수 있습니다.
</div>

박스 모서리를 잡아 크기를 조절해 보세요. 원하는 크기로 변경할 수 있습니다.