모든 CSS 요소를 리사이즈 가능하게 만드는 방법 🔧 (JavaScript 없이)

Source: Dev.to

The resize property

기본적으로 요소는 크기를 조절할 수 없습니다.
요소를 크기 조절 가능하게 만들고 싶다면(예: <textarea>처럼) CSS resize 속성을 사용할 수 있습니다:

/* Make the element resizable in both directions */
resize: both;

/* The element must also have an overflow value that allows scrolling */
overflow: auto; /* or overflow: scroll; */

두 번째 줄이 핵심입니다—resize는 overflow를 스크롤이 가능한 값(auto 또는 scroll 등)으로 설정하지 않으면 작동하지 않습니다.

The three values of resize

/* Allow resizing both horizontally and vertically */
resize: both;

/* Allow only horizontal resizing */
resize: horizontal;

/* Allow only vertical resizing */
resize: vertical;

resize: both;를 사용하면 사용자는 요소의 오른쪽 아래 모서리를 잡아 끌어 크기를 조절할 수 있습니다. 유일한 제한은 크기 조절이 측면이 아니라 모서리에서만 가능하다는 점입니다. 이 동작은 많은 사용 사례에 충분히 적합할 수 있습니다.