[CSS] textarea 사이즈 변경 불가능하게 하는 방법

문제

<textarea> 태그를 이용할 경우 우리가 가로와 높이 길이를 고정된 값으로 설정했는데도 불구하고, 우측 하단을 마우스로 잡고 드래그할 경우 사용자 임의로 텍스트 박스의 사이즈 조절을 할 수 있다. 물론, 일반적인 사용자의 경우 텍스트 박스를 잡고 끌 생각을 하지는 않겠지만 간혹 일부 호기심 강한 사용자들의 UI 파괴술(?)을 방지하고자 아무리 마우스로 잡고 끌어도 사이즈가 바뀌지 않는 방법을 소개하려 한다.

 

방법

textarea {
    resize: none; /* 변경 불가능 */
    resize: both; /* 변경 가능 */
    resize: vertical; /* 높이만 변경 가능 */
    resize: horizontal; /* 너비만 변경 가능 */
}

방법은 간단하다. 바로 resize 속성을 사용하면 된다. 사이즈 고정을 위해서는 resize의 속성을 none으로 해주면 된다.

both의 경우 기본값이므로 굳이 따로 줄 필요는 없고, 너비와 높이만 따로 고정하고 싶을 때는 값에 vertical, horizontal을 각각 주면 된다. 텍스트 박스의 크기를 조절하는 것도 사용자의 입장에서는 어떻게 보면 권리일 수도 있기 때문에, 굳이 resize 속성을 필수적으로 넣지는 않는다. 하지만, 자유로운 크기 조절이 UI 미관상 해치는 경우가 있다면 그때 한 번 resize 속성을 고려해보는 것도 괜찮을 듯 싶다.