21.03.15 TIL - textarea resize

배경

textarea 의 높이는 조절가능하지만 가로의 넓이는 고정해달라는 요청을 받았다.
쉽게 생각하면 min-width와 max-width 를 특정 값으로 지정하면 해결이 가능하기는 한데, textarea 를 제어 할 수 있는 다른 속성이 있을 것 가능할 것 같아서 찾아보았다.

resize css 속성

resize 속성을 통해 크기 조절을 설정 할 수 있다. 아래는 예시다.

1. 높이 및 너비 조절 모두 불가능하도록 처리

<textarea style="resize: none;"></textarea>

2. 높이 및 너비 조절 모두 가능하도록 처리 (기본값)

<textarea style="resize: both;"></textarea>

3. 높이 조절만 가능하도록 처리

<textarea style="resize: vertical;"></textarea>

4. 너비 조절만 가능하도록 처리

<textarea style="resize: horgizontal;"></textarea>

참고로 이 resize 속성은 textarea 뿐만 아니라 다른 html 요소들에도 적용이 가능하다.

textarea clos rows

html attribute 로 textarea 의 가로글씨 수와 세로글씨 수를 정할 수 있다.

<textarea id="story" name="story" rows="5" cols="33">