textarea 가로 또는 세로만 조절가능하게 만들기

textarea 태그는 사용자가 입력한 값을 받는데 유용하게 사용할 수 있다. 기본적으로 textarea의 창 크기는 텍스트에 따라 자동으로 변하지 않는다. 하지만 textarea 엘리먼트는 resize가 가능한 인터페이스를 가지고 있어 이를 늘리거나 줄이는 기능을 css를 통해 사용할 수 있다. 만약 textarea 태그를 리사이즈(resizing) 할 경우 좌우 길이나 상하 높이만 조절하려면 어떻게 해야할까?

복잡한 스크립트를 떠올릴 수도 있으나 사실 css의 resize 속성을 사용하면 간단하게 해결할 수 있다. resize 옵션은 textarea의 사이즈 변경이 가능한 옵션으로 설정할 경우 크기를 변경하거나 반대로 못하게 할 수 있는 편리한 css 속성이다. 게다가 수평 또는 수직으로만 변경가능한 옵션도 존재한다. 아래는 설정 가능한 옵션값이다.

# resize 속성 사용 가능한 값 보기

아래는 textarea 태그 resize 속성에 적용 가능한 값들이다.

• resize: both;  //  리사이즈 모두 사용
• resize: none;  //  리사이즈 사용 안함
• resize: vertical;  //  수직 상하 길이만 수정 가능
• resize: horizontal;  //  수평값인 좌우 길이만 수정 가능
  

 

# resize 속성 사용예제

위 속성 resize를 css에 선언할 경우 아래와 같이 textarea 엘리먼트에 리사이즈가 가능한 인터페이스가 구현된다. 만약 none으로 설정하면 이는 당연히 사라지게 된다. 이 부분을 클릭하여 드래그하면 원하는 값으로 설정이 가능하며 vertical 또는 horizontal 선언을 통해 원하는 한가지 방향, 수직 또는 수평으로만 설정하는 것도 가능하게 된다. 아래는 예제소스이다. 예제를 통하여 실제로 리사이즈를 해보자.

1. resize 속성값이 both인 경우

resize: both;


2. resize 속성값이 none인 경우




3. resize 속성값이 vertical인 경우

reseize: vertical;


4. resize 속성값이 horizontal인 경우

reseize: vertical;


이처럼 resize를 한쪽 방향으로만 설정하는 것은 인터페이스에 제약을 두는 경우로 반응형 웹에서 많이 사용된다. 반응형 웹의 경우 브라우저 크기 변화에 따라 연관된 요소들이 모두 영향을 받기 때문에 많은 UI가 세로만 수정가능하도록 사용한다.

참고로 max 또는 min 값을 사용하여 최소 최대를 함께 사용하는 것도 퍼블리싱하는데 큰 도움이 될 수 있으니 알아두도록 하자.