Categories: HTML5

[HTML] textarea 영역 크기 조절 방지 하기

html textarea 영역 크기 조절 방지


html textarea 영역의 사이즈를 조절(드래그하여 영역 크기를 조절)하는 부분을 없앨 때는 textarea 코드에 resize 스타일 속성을 추가하면 됩니다.

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

 

이렇게 하면 위 사진의 드래그 가능한 영역이 제거되어 고정된 크기로 나타나게 됩니다.

해당 옵션만으로만 설정하면 textarea 크기가 매우 작아지므로 style 속성에 width, height 를 추가하거나 별도의 css 스타일을 지정해주어야 합니다.

 

너비 또는 높이에 대해서만 크기 조절 방지


위 코드를 적용하면 textarea너비와 높이 조절이 모두 제한되게 됩니다. 그러나 너비만 제한하고 싶다면(또는 높이만 제한) 아래 방법으로도 설정이 가능합니다.

동일한 방법으로 resize 속성을 지정합니다.

<!-- 높이 및 너비 조절 모두 가능하도록 처리 -->
<textarea style="resize: both;"></textarea>
<!-- 높이 조절만 가능하도록 처리 -->
<textarea style="resize: vertical;"></textarea>
<!-- 너비 조절만 가능하도록 처리 -->
<textarea style="resize: horizontal;"></textarea>

 

 

JooTC

안녕하세요. 테크놀로지에 관심이 많은 블로거입니다.

View Comments

  • 지금은 잊었지만, 본래는 다른 목적이 있어 저 자신의 블로그를 열었었는데 거기 달아 둔 방명록으로 쓰는 글 상자(텍스트에리어)가 방문자 맘대로 늘리거나 줄일 수 있게끔 됐던 겁니다.
     
    어휴 뭐 이런 개떡같이&^^-
     
    어^ 여기서는 댓글 쓰면서 문장 앞에 옆줄(-, 붙임표- 또는 하이픈(hyphen-) 넣으니까 목록 탭으로 바뀌네요.
     
    어쨌든 그것 고쳐보고자 찾았던 사이트가 이곳입니다.
     
    아무리 생각해도 고맙고 또 고맙습니다.
     
    그럼 오늘도 흐뭇하게 잘 보내시길….

Recent Posts

Zalgo 텍스트와 이를 방지하는 방법

인터넷 커뮤니티 사이트에서 게시글이나 댓글에 간혹 장난을 목적으로 작성된 특이한 글자를 볼 수 있습니다. 위…

4주 ago

리눅스 kill, killall 명령어 – 특정 프로세스 종료하기

리눅스 명령어 - kill, killall 리눅스 kill 명령어는 특정 프로세스를 종료해주는 명령어입니다. 백그라운드에서 실행되고 있는…

1개월 ago

JavaScript typeof null이 ‘object’인 이유

JavaScript는 역사가 긴 스크립트 프로그래밍 언어입니다. 세월이 흐르면서 많은 자바스크립트 표준이 만들어졌고, 현재는 많은 문법적…

1개월 ago

Mocha Error: Resolution method is overspecified. 해결 방법

NodeJS 테스트 프레임워크인 Mocha는 비동기 테스트를 지원합니다. 간혹 특정 테스트 스크립트를 작성하고 실행하면 아래와 같이…

1개월 ago

윈도우 11 설치 시 Microsoft 계정 로그인 없이 로컬 계정 만들기

언제부턴가 윈도우 11을 처음 설치할 때 마이크로소프트(Microsoft) 계정 로그인을 강제로 요구하게 되었습니다. 물론 마이크로소프트 계정이…

6개월 ago

에어팟 프로 2 케이스 스피커 소리를 완전히 끄는 방법

애플 에어팟 프로 2 (AirPods Pro 2) 케이스에는 스피커가 내장되어 있습니다. 그런데 간혹 아무 것도…

9개월 ago