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

[iOS] Xcode ‘You do not have required contracts to perform an operation’ 해결

Xcode에서 iOS 애플리케이션을 빌드(Archive)하고 App Store Connect에 앱을 업로드하는 도중, 아래와 같은 에러가 발생하면서 더…

2주 ago

[안드로이드] INSTALL_FAILED_INSUFFICIENT_STORAGE 해결

INSTALL_FAILED_INSUFFICIENT_STORAGE 문제 안드로이드 스튜디오에서 에뮬레이터를 실행하고 개발중인 애플리케이션을 실행하려 하면 로그 창에 아래와 같이 표시되면서…

6개월 ago

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

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

8개월 ago

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

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

8개월 ago

JavaScript typeof null이 ‘object’인 이유

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

8개월 ago

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

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

8개월 ago