CSS로 텍스트 영역(textarea)의 크기 조정 기능을 비활성화하는 방법

resize 속성으로 크기 조정 비활성화하기

웹 페이지에서 텍스트 영역(textarea)은 기본적으로 오른쪽 하단 모서리를 드래그하여 크기를 자유롭게 조절할 수 있습니다. 만약 이러한 크기 조정 기능을 비활성화하고 싶다면, JavaScript보다는 CSS의 resize 속성을 사용하는 것이 가장 간단하고 효과적인 방법입니다.

모든 textarea에 적용하기

페이지 내 모든 텍스트 영역의 크기 조정 기능을 끄려면 다음과 같이 CSS를 작성합니다.

textarea {
    resize: none;
}

특정 name 속성을 가진 textarea만 비활성화하기

여러 개의 텍스트 영역 중 특정 요소만 크기 조정을 막고 싶다면 속성 선택자를 활용할 수 있습니다. 예를 들어 name 속성 값이 "demo"인 textarea만 대상으로 하려면 아래와 같이 작성합니다.

textarea[name=demo] {
    resize: none;
}

id 속성을 활용한 방법

id 속성을 기준으로 특정 텍스트 영역을 지정할 수도 있습니다. 먼저 HTML에서 id가 "demo"인 textarea를 작성합니다.

<textarea id="demo"></textarea>

그리고 위 요소에 대해 다음과 같이 ID 선택자를 사용해 크기 조정 기능을 비활성화합니다.

#demo {
    resize: none;
}

참고 사항

resize 속성에는 none 외에도 both(양방향 조정 허용), horizontal(가로만 허용), vertical(세로만 허용) 등의 값을 사용할 수 있으므로, 상황에 맞게 조절하여 활용하시기 바랍니다.