강좌 전 태오의 잡담>

이 강좌는 Danny(전성대) 님께서 제공하는 유용한 팁들의 퍼레이드 랍니다. ^^

전성대님의 메일주소는 junsd@korea.com 이니까요.
강좌와 관련하여 추가적으로 궁금한 부분이 있거나 하시면 메일로 문의하세요 ^^
혹은, 전성대님의 사이트인 http://sanso.pe.kr 을 이용하셔도 된답니다. ^^

안녕하세요. 대니입니다.

오늘도 간단한 팁 하나를 올려드린답니다. 오늘은 게시판에서 Textarea 에 줄을 넣는 팁이랍니다.

보기에도 깔끔하고 글쓰기할때도 왼지 기분 좋고^^ 머 보기좋은떡이 어쩐다구.. 그러잖아요.

CSS에 관련된 책을 가지고 있으시다면 이미 알고 계실법도 하지만 저처럼 단지 상사의 지시로 일단 줄만을 넣어야만 했다면 아래의 코딩정도로 충분합니다. 그럼 살펴보도록 할께요.

먼저 CSS 설정을 아래와 같이 합니다.

textarea.content {     font-family : "돋움";     font-size : 9pt;     color : #666666;     border : 1px #c9c9c9 solid;     background-image: url(image/textline.gif); <= 요 부분이 라인 이미지를 넣는것이지요.     line-height: 15pt;     scrollbar-face-color: #FFFFFF;     scrollbar-shadow-color: #C9C9C9;     scrollbar-highlight-color: #C9C9C9;     scrollbar-3dlight-color: #FFFFFF;     scrollbar-darkshadow-color: #FFFFFF;     scrollbar-track-color: #FFFFFF;     scrollbar-arrow-color: #666666 }

뭐 군더더기도 같이 넣어 보았습니다. CSS관련책보면 아주 상세하게 나와있을법하지만 책이 없으신 분들도 조금은 참고할수 있게 적어보았습니다.

이제 CSS를 설정하였으니 실제 적용을 해 보아야 겠지요.

<textarea name=context Class=content></textarea>

이렇게 Class로 넣어주시면 content 로 선언된 CSS가 적용되어질 것입니다. 저는 제가 임의적으로 textline.gif 란 이미지를 넣었는데.. 제가 만든 이미지 다운받아가실분은

http://sanso.pe.kr/board/image/textline.gif

이걸 다운받아가셔서 사용해보세요.^^ 나름대로 심혈을 기울여서 만든 라인입니다.

단, 이 이미지는 textarea를 사용하는 페이지가 있는 곳의 image 라는 폴더에 넣으셔야 합니다. 만일, 다른 폴더에 넣으시려면, 그에 맞게 위의 CSS에서 background-image: url(image/textline.gif); 라는 부분의 경로를 적절하게 바꾸어 주셔야 한답니다

모두들 줄거운 하루 되시구요. 다음에는 좀더 멋진 팁 가지고 컴백하겠습니다^^

강좌 목록으로..