사실 웹 페이지를 디자인하다보면 고민거리중 하나는
FORM이다. 특히
FORM의 구성 요소중 하나인
TEXTAREA 창은 사용자가 입력하는 다량의 데이타를 받아들이는 입력창이기때문에 크기를 설정하는 것이 쉽지않다.
크게 설정하면 디자인이 어울리지 않고, 작게 설정하면 불편을 호소하는 경우가 많다. 가장 좋은 방법은 아래의
TEXTAREA 창처럼 사용자가 데이타를 입력하면 자동적으로 증가하는 경우일 것이다.
따라서 오늘은 사용자가 데이타를 입력하면
TEXTAREA 창을 자동적으로 증가시키는 방법을 설명하겠다.
<TEXTAREA
STYLE='OVERFLOW: visible; WIDTH: 90%; HEIGHT: 150px'
COLS=80
ROWS=10>
</TEXTAREA>
OVERFLOW는 CSS에서 지원하는 추가적인 속성으로 다음과 같은 값을 갖는다.
- OVERFLOW컨텐트가 객체의 높이나 너비를 초과할 때 컨텐트를 처리하는 방섭을 설정한다.
- visible: 기본값. 컨텐트는 잘리지 않으며, 수직 이동 막대가 추가되지 않는다.
- scroll: 컨텐트가 객체의 높이나 너비를 초과하지 않아도 컨텐트는 잘리며 수직 이동 막대가 추가된다.
- hidden: 객체의 높이나 너비를 초과하는 컨텐트는 숨겨진다.
- auto: 필요시 컨텐트는 잘리며 수직 이동 막대가 추가된다.
여기서
WIDTH와
HEIGHT는 창의 너비와 높이를 나타낸다. 설사
COLS와
ROWS가 지정되어도 이 값이 우선한다. 한가지 주의할 것은
OVERFLOW 속성은 MSIE에서만 지원되는 속성이므로 MSIE 이외의 브로우저를 위해 반드시 COLS와 ROWS를 지정하기 바란다.
(