어떤 블로그를 방문해서 댓글을 쓰려고 보면 박스 안에 그림이 있는 경우가 있다.
어떻게 넣었을까? 신기하네?
blog.bsmind.co.kr의 댓글입력 박스
Web2.0에 맞춰서 코딩이 되어 있기에 소스에서 댓글박스(textarea)를 찾기가 어려울 줄 알았다. 하지만 찾아보니까 쉽게 눈에 띄어서 내 블로그에 이미지를 넣었고 그 방법을 설명하려고 한다.
일단, 박스에 넣을 이미지를 구해야 한다.
blog.bsmind.co.kr의 댓글입력 박스의 이미지는 어딘가에서 퍼온 이미지이며, 원저작자가 누구인지 몰라서 허락을 받지 못한 이미지이다. 텍스트큐브의 댓글입력 박스의 높이는 약 126px이며, 티스토리의 댓글입력 박스의 높이는 130px 이다. 높이는 각자의 블로그마다 다를 수 있다.
관리자화면 -> 꾸미기 -> 스킨편집 화면으로 이동한다. 하단의 [파일 업로드]에서 구한 이미지를 업로드한다.
[텍스트큐브의 파일 업로드 부분]
파일명의 경로는 "./images/업로드파일명" 이다.
만약 파일명을 "comment_bgimage.jpg" 라고 해서 업로드했으면, 경로는 "./images/comment_bgimage.jpg" 가 된다.
이제 업로드한 파일을 [style.css]에서 댓글입력 박스에 적용하면 된다.
[style.css]에서 .tt-input-div textarea 부분이 댓글 입력 박스 부분이다. 눈으로 찾기가 어려우니까 Ctrl-f 해서 익스플로러의 [찾기]를 이용하면 편리하다. 조금씩 다를 수 있지만 대부분 아래와 같이 내용이 기재되어 있을 것이다.
.tt-input-div textarea {
width:75%;
height:120px;
overflow:visible;
}
여기에 아래와 같이 백그라운드 이미지로 넣으면 설정이 끝난다.
.tt-input-div textarea {
width:75%;
height:120px;
overflow:visible;
background:url(./images/comment_bgimage.jpg) no-repeat right;
background-color:#FFFFFF;
}
위에서 말한 것처럼 이미지 파일은 자신이 올린 이미지 파일명으로 넣어야 한다. 또한 올린 이미지에 맞게 박스의 배경색도 맞춰 주면 더 깔끔하다.
(background-color:#FFFFFF;)
[style.css 영역에 적용한 화면]
관리자화면 -> 스킨 -> "HTML/CSS 편집" 화면으로 이동한다. 텍스트큐와 마찬가지로 댓글입력 박스에 넣을 이미지를 [파일 업로드] 탭에서 업로드한다.
[티스토리의 파일 업로드 부분]
텍스트큐브와 마찬가지로 파일명의 경로는 "./images/파일명" 이 된다. 만약 파일명을 "comment_bgimage.jpg" 라고 해서 업로드했으면, 경로는 "./images/comment_bgimage.jpg" 가 된다.
이제 업로드한 파일을 [skin.html] 영역에 적용하면 된다. 텍스트큐브는 style.css 파일에 적용했지만, 티스토리는 [skin.html]에 적용을 해 보자
[skin.html] 편집영역에서 "##_rp_input_comment_##" 라고 된 부분을 찾는다.
티스토리는 댓글 입력 박스의 이름의 치환자를 "##_rp_input_comment_##"으로 사용한다. 눈으로 찾기가 어려우니까 Ctrl-f 해서 익스플로러의 [찾기]를 이용하면 편리하다. 조금씩 다를 수 있지만 대부분 아래와 같이 내용이 기재되어 있을 것이다.
<textarea name="" rows="10" cols="50"></textarea>
여기에 style 형식으로 이미지를 넣으면 된다.
<textarea name="" rows="10" cols="50" style="background:url(./images/comment_bgimage.jpg) no-repeat right; background-color:#FFFFFF;"></textarea>
끝~~!