[블로그 꾸미기] 댓글 입력창 꾸미기

별군님의 블로그에 [블로그 꾸미기] 댓글 입력창 꾸미기 2라는 글에 보면 댓글 입력창에 배경 그림을 넣는 방법이 나옵니다. 댓글 입력창에 그림이 있으면 멋있기는 하지만 글을 입력할 때 배경과 겹치면서 글자가 잘 보이지 않게 됩니다.

그래서 별군님께서 글을 입력할 때, 그림이 보이지 않도록 하는 방법을 소개하셨는데요. CSS로 해서 IE에서는 적용되지 않는 문제점이 있다고 하셨습니다. 실제로 해보니 안됩니다. 검색해보니까 IE8 이상에서는 focus()가 적용되기 때문에 제대로 될 것 같기도 하네요.

아무튼 IE에서는 배경 그림이 사라지지 않아서 댓글을 달 때 그림 때문에 글자가 잘 보이지 않는 문제를 해결하는 방법을 알려드립니다.

일단 배경 그림을 적용하는 부분은 티스토리, 댓글입력창 꾸미기를 참고 해서 넣으세요.

그리고 스킨 편집의 skin.htm에서 textarea를 찾아서 아래처럼 고쳐줍니다.
다른 부분(rows나 cols, id, name, class 등)은 절대로 바꾸지 마시고 주황색 글씨 부분만 붙여넣세요.

<textarea cols="100%" rows="6" id="comment_[##_article_rep_id_##]" name="[##_rp_input_comment_##]" class="form_textarea" onblur="this.style.backgroundImage='url(./images/comment.jpg)'" onfocus="this.style.backgroundImage='none'"></textarea>

 

skin.htm에는 <textarea>가 두 번 나옵니다. 방명록, 댓글 입력창 이렇게요. 두 군데 모두 수정하셔야 합니다.

결과는 아래 댓글 입력창에서 확인하실 수 있습니다.

관련글

블로그 위아래 이동 단추 넣기
블로그 추천, 구독 버튼 넣기 - CSS Image Sprite
블로그 로딩 속도를 빠르게 - CSS Image Sprites
인용문 배경 예쁘게 꾸미는 html 태그와 css
[블로그 꾸미기] 꼭 알아야할 필수 CSS 첫번째 - border, margin, padding