태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


2007.10.10 09:42

[강좌]블로그 댓글창에 배경을 삽입하자!

러쉬입니다!

이번에는 블로그 댓글창에 배경이미지를 삽입하는 방법에 대해 알아 보겠습니다.
아무도 알려주는 사람이 없는 관계로 혼자 맨땅에 헤딩 했답니다.
제가 이걸 하느라 얼마나 죽을똥을 쌌던지...

댓글 입력창에 배경이미지를 넣고 싶으신 분들! 따라해보십시다!

이해가 안가실지 몰라서 캡춰이미지를 준비 했습니다.
사용자 삽입 이미지

위에 보이듯이 댓글창에도 배경을 삽입 할 수 있습니다.
이제껏 댓글 입력창을 수정 하려면 Skin.HTML을 편집 해야 하는 줄 알고 스킨을 뜯어보고 있었는데, 알고보니 Style.CSS를 편집 해야 하는 것 이더군요.  ㅠㅠ

그럼 본격적인 강좌에 들어 갑니다!



댓글 입력창에 배경 이미지 넣기!


위에서 말씀 드렸다 시피 style.css를 편집 해야 합니다.

스킨 편집화면으로 가셔서 style.css를 봅시다.

.comment                          { border-top:1px solid #ddd;  background-color:#f5f5f5; padding:10px; margin-bottom:4px;  width:/*@post-width:-60=*/ 640px /*@*/; overflow:hidden;}
.comment p                        { margin:3px 0 0 0; padding:0;}

.comment h3                       { display:none;}
.comment ol,
.comment ul                       { margin:0;  padding:0;  list-style:none;}
.comment .date                    { font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#777;}
.comment .name                    { font-weight:bold;}
.comment ol li                    { padding:10px 5px;}
.comment li ul li                 { padding:5px 10px 5px 25px;  background:url("images/iconIndentArrow_local.gif") no-repeat 12px 6px;}
.comment .control a.address       { background:url(images/iconAddress.gif) no-repeat;  padding-left:52px;  padding-bottom:2px;  text-decoration:none;}
.comment .control a.address span  { display:none;}
.comment .control a.modify        { background:url(images/iconModify.gif) no-repeat;  padding-left:52px;  padding-bottom:2px;  text-decoration:none;}
.comment .control a.modify span   { display:none;}
.comment .control a.write         { background:url(images/iconWrite.gif) no-repeat;  padding-left:52px;  padding-bottom:2px;  text-decoration:none;}
.comment .control a.write span    { display:none;}

.commentWrite                     { padding:5px; margin-top:20px;}
.commentWrite input               { width:150px;}
.commentWrite textarea            { width:/*@post-width:-75=*/ 625px /*@*/;  height:170px;   padding:5px; position:relative; top:-16px;}
.commentWrite .homepage           { width:300px;}
.commentWrite .submit             { width:/*@post-width:-63=*/ 637px /*@*/;  height:22px;  background-color:#ccc;  font:1.1em Dotum, Arial, sans-serif; padding-top:3px; position:relative; top:-18px;}
.commentWrite .secretWrap         { float:right; position:relative; top:-23px; left:-10px;}
.commentWrite .checkbox           {    border:none; padding:0;    margin:0; width:25px;}

이상이 현재 저의 style.css에 있는 댓글관련 내용 입니다.
댓글창에 배경을 넣으려면 아래의 부분을 바꾸어 주어야 합니다.

.commentWrite textarea            { width:/*@post-width:-75=*/ 625px /*@*/;  height:170px;   padding:5px; position:relative; top:-16px;}

이 부분이 바로 댓글 입력창의 스타일.
각자의 스킨마다 width,height의 값이 다를 수 있습니다. 이곳에 알맞은 이미지를 삽입하면 OK인겁니다.
이미지 삽입시의 구문 입력은 아래와 같습니다.

.commentWrite textarea            { width:/*@post-width:-75=*/ 625px /*@*/;  height:170px; background:url(이미지경로) no-repeat;  padding:5px; position:relative; top:-16px;}

하나의 구문이 끝나면 ; 로 닫는것을 잊지 마시길 바랍니다.




[주의사항]
  1. 미리보기로 테스트를 한 다음 저장 합시다. :

    미리보기로 확인을 하지 않고 저장했다가는 저처럼 낭패를 봅니다. *^^* 
    미리보기 화면에서 댓글창이 열려있질 않다면,
    관리자 매뉴의 환경설정에 들어가셔서 아래처럼 설정을 바꾸어 주세요
    사용자 삽입 이미지


  2. 배경으로 사용하실 이미지 사이즈는 적당히! :

    세로 사이즈는 그다지 상관 없습니다.
    뭐 그림이 잘리면 댓글입력 폼을 늘리면 되고, 그림이 작으면 폼을 줄이면 됩니다. 
    하지만, 배경의 가로사이즈가 스킨이 지원하는 사이즈보다 커버리게 되면 폼을 늘릴 때 폼자체가 잘려나가게 됩니다. 아래는 폼 사이즈 변경하는 구문의 위치 입니다. 굵게 밑줄이 그어져 있는 곳만 수정 하시길 권장 합니다. 다시말해 그림의 가로사이즈는 style.css를 확인하고 정하는것이 좋다는 거지요.

    .commentWrite textarea            { width:/*@post-width:-75=*/ 625px /*@*/;  height:170px; background:url(이미지경로) no-repeat;  padding:5px; position:relative; top:-16px;}


  3. 구문을 추가하면 " ; "을(를) 사용하여 꼭 닫아준다.:

    많이들 빼먹는 부분 입니다 ;ㅁ;
    이거 빼먹으시면 수정도 안되고해서 혼자서 눈물흘리다가 한강다리 찾아가게 됩니다 ^_^

    .commentWrite textarea            { width:/*@post-width:-75=*/ 625px /*@*/;  height:170px; background:url(이미지경로) no-repeat;  padding:5px; position:relative; top:-16px;}


  4. 그림편집시 그림은 좀 흐리게:

    배경이 너무 진하면 댓글을 다시는 방문자님들이 불편 할 수가 있습니다. 대부분 포토샵등의 프로그램을 이용 하실텐데, 포토샵에서 레이어의 Fill값을 조정 해서 약간 흐리게 만들어 주시는게 좋습니다. 너무 흐리면 보이지 않으니 4~60%가 적당 한 듯 싶습니다.

이번 시간은 여기까지 입니다.
다들 재미난 그림 만들어 댓글창에 달아 보세요 ^^

저처럼 굽신대는 이미지도 좋아요!

Trackback 1 Comment 22