textarea 에는 cols 도 있는게 좋아요! > web20

우리가 글작성 폼을 만들때 쓰는 태그는 textarea 가 있습니다.

장문의 글을 작성하기 위해서는 이 textarea 태그를 사용하여

디자인합니다. 그런데, textarea 는 rows 와 cols 라는,

줄 수와 폭 수치를 정하는 속성이 기본으로 있습니다.

보통 저는 아래처럼 CSS 로 폭을 정하곤 합니다.

textarea {width: 100%;}

그러고는 textarea 에는 rows 속성만 사용하곤 했지요.

그러나!

IE 를 제외한 나머지 브라우저들은 폭을 정하는데 어려움이 있어 보였습니다.

오페라 브라우저의 경우가 특히 그랬는데요, textarea 태그에

cols 속성으로 폭을 지정해두니 매끈하게 렌더링을 하는 겁니다.

그래서 왜 그런가 찾아보았더니 textarea 에는 rows 와 cols 속성이

필수적이다라는 결론을 얻게 되었습니다. (적어도 xhtml 1.0 에서요.^^; )

그래서 이제부터는 CSS 를 이용해서 폭을 정하는 것과 별도로

textarea 태그마다 cols 속성을 추가해 주고 있습니다.

가령 아래 처럼요.

<textarea name="content" class="textarea" rows="12" cols="85"></textarea>

맨 땅에 헤딩박기식 습득이었지만 저처럼 브라우저마다 textarea 디자인이

달리 해석되는 경험을 하신 분들은 참고하시면 좋겠네요~ ^^;

===========================================================================

css에서

input, textarea { font-size:.9em; font-family:Gulim,sans-serif; line-height:140%; }

와 같이 폰트 스타일을 지정 하면 더욱 더 원하는 모습으로 보여줄 수 있죠.
body와 td 그리고 input,textarea는 서로 폰트 스타일이 적응이 않되기에 함께 또는 따로 지정해 주어야 되더군요.

그런데 지금도 모르겠는건 body,textarea { font-size:.85em; font-family:Gulim,sans-serif; }
하면 body와 textarea의 글자 크기가 서로 다릅니다.
이건 어떻게해야 할지 모르겠더군요.;

출처 : 시리니닷넷