태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


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
  1. Favicon of https://www.econowide.com BlogIcon 해피쿠스 2007.10.10 10:56 신고 address edit & del reply

    올~~~ 댓글 배경 괜찮은 데요~~~ 이야~~ 나도 해야징 ^^ 뭘로 할까.. 잘배우고 갑니다~~~

  2. 2007.10.10 10:57 address edit & del reply

    비밀댓글입니다

    • Favicon of https://dddassas.tistory.com BlogIcon D-Rush 2007.10.10 11:52 신고 address edit & del

      허허 그거 제가 아까 뻘짓을 좀 해서 ^^

  3. Favicon of https://www.econowide.com BlogIcon 해피쿠스 2007.10.10 19:03 신고 address edit & del reply

    댓글장에 그림이 나오니 자꾸 쓰고 싶네... ^^ 하핫

  4. Favicon of https://insam.tistory.com BlogIcon 삶엔삼-살아 있는 2008.01.04 22:38 신고 address edit & del reply

    댓글창에 이미지 넣는 방법을 배우기 위해서 블로그를 많이 찾아 다녔습니다만
    여기의 스킨이 제것과 가장 잘 맞네요..^^
    고맙습니다.
    덕분에 제 블로그도 (쬐금~)더 보기 좋아 졌어요..^^

    • Favicon of https://dddassas.tistory.com BlogIcon D-Rush 2008.01.07 09:43 신고 address edit & del

      헤헤 ^ㅡ^
      더움이 되었다니 정말 기쁩니다 ^^

  5. Favicon of https://blutom.tistory.com BlogIcon 파란토마토 2008.01.06 19:23 신고 address edit & del reply

    정말 좋은 정보네요. 그리고 굉장히 쉽게 설명되어있어요^^

    • Favicon of https://dddassas.tistory.com BlogIcon D-Rush 2008.01.07 09:44 신고 address edit & del

      칭찬 감사드립니다 ^^
      맨땅에 헤딩한 경험으로 한 설명이라 더욱 설명이 쉽게 전달 되었을라나요 ? ^^

  6. Favicon of http://deborah.tistory.com BlogIcon 데보라 2008.01.11 01:11 address edit & del reply

    러쉬님 지금 가르쳐 주신대로 했는데 안되는군요. 스킨의 명령어가 다릅니다.

    • Favicon of https://dddassas.tistory.com BlogIcon D-Rush 2008.01.11 09:54 신고 address edit & del

      스킨별로 제작자가 택한 ID같은것들이 다릅니다
      때문에 그러신듯 하네요

      스킨의 이름을 알려주시면
      제가 한번 테스트 해 보고 적용시켜 보겠습니다.

  7. Favicon of http://deborah.tistory.com BlogIcon 데보라 2008.01.11 01:14 address edit & del reply

    저는 이렇게 되어 있는데 어떻게 해야할지 모르겠네요. 도움좀 주세요.
    .content .entry .comment .write textarea{ width:100%; margin-bottom:5px;}

    • Favicon of https://dddassas.tistory.com BlogIcon D-Rush 2008.01.11 09:55 신고 address edit & del

      .content .entry .comment .write textarea{ width:100%; margin-bottom:5px;background:url(이미지경로) no-repeat; }

      처럼 되면 될 것도 같은데,
      역시 많이 저완 많이 다른 스킨이니 CSS를 한번 봐야 알 수 있겠네요

  8. Favicon of https://deborah.tistory.com BlogIcon Deborah 2008.01.12 05:34 신고 address edit & del reply

    역시 안됩니다. 스킨이 어떤것인지 알 수가 없네요.

    @charset "utf-8";
    /* CSS Document */
    /* 반드시 들어가야 하는 스타일 시작 */
    /* 1. 본문 전체 */
    body{ font: small/1.5 '돋움', 'Dotum', verdana;
    background:/*@background-color=#3d3d3d*/ #3d3d3d /*@*/
    /*@background-image=url(./images/bg.gif)*/ url("./images/bg.gif") /*@*/
    /*@background-image-repeat=no-repeat*/ no-repeat /*@*/;
    /*@background-image-position=background-position:;*/ background-position: ; /*@*/
    /*@background-image-repeat=background-repeat:;*/ background-repeat: no-repeat; /*@*/
    padding:50px 20px; margin:0; color:#a2a2a2; letter-spacing:-1px; text-align:center
    }
    /* 2. 기본 링크 */
    a{ text-decoration:none;}
    a:link { color:#a2a2a2;}
    a:visited { color :#a2a2a2;}
    a:hover { text-decoration:underline; color:#ffffff;}
    a:active { color:#a2a2a2;}
    /* 3. 이미지 */
    img{ border:0;}
    /* 4. 이미지 버튼 */
    .ib { cursor: pointer;}
    /* 5. 입력 텍스트 */
    .text { border:1px solid #999;}
    /* 6. 트리 테이블 */
    .branch2 { }
    /* 7. 트리 셀 */
    .branch3 { cursor:pointer; height:10px;}
    /* 8. 달력 월 표시 */
    .cal_month { height:18px; text-align:center; color:#e1cdbd;}
    /* 9. 달력 요일 표시 */
    .cal_week1 { height:18px; text-align:center;}
    /* 10. 달력 일요일 표시 */
    .cal_week2 { color: #cfe01e; text-align:center;}
    /* 11. 달력 지난 달 날짜 표시 */
    .cal_day1 { color:#000; text-align:center;}
    /* 12. 달력 다음 달 날짜 표시 */
    .cal_day2 { color: #000; text-align:center;}
    /* 13. 달력 이번 달 날짜 표시 */
    .cal_day3 { text-align:center;}
    /* 14. 달력 오늘 날짜 표시 */
    .cal_day4 { background-color:#000000; text-align:center; color:#cfe01e;}
    /* 15. 달력 글쓴 날 링크 스타일 */
    a.cal_click{ font-weight:bold; color:#fff;}
    a.cal_click:link { color:#fff; text-align:center;}
    a.cal_click:visited { color:#fff; text-align:center;}
    a.cal_click:hover { color : #fff; text-align:center;}
    /* 16. 이미지 아래 캡션 스타일 */
    .cap1 { color: #876; text-align: center; }
    /* 16. 키워드 스타일 */
    .key1 { }
    /* 16. 카테고리 옆 개수 스타일 */
    .c_cnt { font:0.75em Tahoma; color:#cfe01e; letter-spacing:0;}
    /* 17. 최신글 옆 개수 스타일 */
    .ps_cnt { font:0.75em Tahoma; color:#cfe01e; letter-spacing:0;}

    /* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */
    /* 기본 스타일 */
    h1, h2, h3, h4{ font-size:100%; margin:0; padding:0;}
    hr{display:none;}
    /* 블로그의 레이아웃 */
    .container{ width:/*@post-width:390=*/ 1040px /*@*/; text-align:left; margin:0 auto;}
    .header{ clear:both;
    /*@title-background-image=background-image:;*/ background-image: none; /*@*/
    /*@title-background-image-position=background-position:;*/ background-position: center top; /*@*/
    /*@title-background-image-repeat=background-repeat:;*/ background-repeat: no-repeat; /*@*/
    background:/*@title-background-color=*/ transparent /*@*/;
    padding-top:/*@title-height:-90=padding-top:*/ -38px /*@*/;
    }
    .header h1{ }
    .header .rss{ text-align:right;}
    .Body{ margin-right:6px;}
    .Body .layoutMiddle{}
    .Body .layoutTop{}
    .Body .layoutBottom{}
    .mainBody{ float:left; width:/*@post-width:200=*/ 850px /*@*/; padding:0; margin:0; }
    /*
    .mainBody .layoutMiddle{ background:url(./images/layoutMiddle.gif) repeat-y;}
    .mainBody .layoutTop{background:url(./images/layoutTop.gif) no-repeat top;}
    .mainBody .layoutBottom{background:url(./images/layoutBottom.gif) no-repeat bottom; padding:10px;}
    */
    .mainBody .layoutBottom{margin-top:20px;}

    .blogmenu{ clear:both; background:url(./images/menu_bar.gif) top left no-repeat ; }
    .blogmenu .inner { background:url(./images/menu_bar2.gif) top right no-repeat ; height:34px; padding:5px 5px 0 10px;}
    .contentBody{ width:/*@post-width:210=*/ 860px /*@*/; }
    .contentBody .layoutMiddle{ padding:0; margin:0; background:none;}
    .contentBody .layoutTop{ padding:0; margin:0; background:none;}
    .contentBody .layoutBottom{ padding:0; margin:0; background:none;}
    .content { float:right; width:/*@post-width=*/ 650px /*@*/; margin:0 15px 5px 0; padding:0; display:inline; }
    .content .layoutMiddle{background:none; padding:0; margin:0;}
    .content .layoutTop{background:none; padding:0; margin:0;}
    .content .layoutBottom{background:none; padding:0; margin:0;}
    .sideinfo{ float:left; width:180px; overflow:hidden;}
    .sideinfoEtc{ float:left; margin:0 0 0 0; width:180px; background:none;}
    .footer{ width:/*@post-width:390=*/ 1040px /*@*/; padding:20px 0; text-align:center; clear:both;}

    /* header : 블로그 제목 + 구독하기 버튼 */
    .header h1 { font-size:/*@title-font-size=45pt*/ 45pt /*@*/; font-family:/*@title-font-family=Arial*/ Book Antiqua /*@*/; font-weight:normal;}
    .header h1 a:link { color:/*@title-color=#fff*/ #FFEFE8 /*@*/;}
    .header h1 a:visited { color:/*@title-color=#fff*/ #FFEFE8 /*@*/;}
    .header h1 a:hover { color:#fff; text-decoration:none;}
    /* mainbody > blogmenu : 블로그 메뉴 + 검색 */
    .blogmenu .menu{ float:left; font-size:90%; color:#a2a2a2; margin:5px 0 0 0;}
    .blogmenu .menu a{ color:#a2a2a2; padding:0 3px;}
    .blogmenu .menu a:hover{ color:#fff; text-decoration:none;}
    .blogmenu .menu .adminmenu a{ color:#a2a2a2;}
    .blogmenu .menu .adminmenu a:hover{ color:#fff;}
    .blogmenu .search { float:right; }
    .blogmenu .search input{ border:0; margin:0; padding:0;}
    .blogmenu .search .input{ width:130px; height:20px; padding:0 4px 0 4px; background-color:#6f6f6f; color:#ffffff; }
    .blogmenu .search .btn{ background:url(./images/btn_search.gif) no-repeat; width:40px; height:20px; text-indent: -100em; overflow:hidden; }
    .blogmenu .rss{ float:right; font-size:85%; letter-spacing:-1px; margin:5px 10px 0 0;}
    .blogmenu .rss a{ color:#a2a2a2; background:url(./images/iconRss.gif) no-repeat right; padding:3px 15px 0 10px;}

    /* mainBody > contentBody > sideinfo 기본스타일*/
    .sideinfo {font:90% dotum, Verdana; }
    .sideinfo .name{ color:#999;}
    .sideinfo .date{ font:90% Tahoma; color:#999; letter-spacing:0;}
    .sideinfo .cnt{ font:80% Tahoma; color:#cfe01e; letter-spacing:0;}
    .sideinfo ul{ margin:0; padding:0; list-style:none;}
    .sideinfo li{ background:url(./images/bull.gif) no-repeat 0 7px; padding:5px 0 0 8px;}
    .sideinfo h3{ margin-top:20px; font:100% dotum; color:#618cbf; text-decoration:underline; margin-bottom:10px; font-weight:bold;}

    /* mainbody > contentBody > sideinfo > 블로그 이미지 */
    .sideinfo .blogimageTop {background:url(./images/photoframe_top.gif) no-repeat; width:180px; height:6px; line-height:0; font-size:0;}
    .sideinfo .blogimage{ width:180px; overflow:hidden; text-align:center; background-color:#323232;}
    .sideinfo .blogimageBottom {background:url(./images/photoframe_bottom.gif) no-repeat; width:180px; height:6px; line-height:0; font-size:0;}
    /* mainbody > contentBody > sideinfo > 블로그 설명 */
    .sideinfo .blogdesc{ color:#a2a2a2; margin-top:5px;}
    /* mainbody > contentBody > sideinfo > 공지사항 */
    .sideinfo .notice { margin:5px 0; }
    .sideinfo .notice h3, .sideinfoEtc .notice h3{background:url(images/t_notice.gif) no-repeat; width:180px; height:22px;
    display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
    }
    .sideinfo .notice li{ background:url(images/iconNotice.gif) no-repeat; padding:2px 0 2px 30px;}
    /* mainbody > contentBody > sideinfo > 카테고리 리스트 스타일 */

    .sideinfo .category h3, .sideinfoEtc .category h3{background:url(images/t_category.gif) no-repeat; width:180px; height:22px;
    display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
    }
    .sideinfo .category li{ background-image:none; padding-bottom:1px;}
    .sideinfo .category li ul li ul li{ margin-left:5px; padding-left:7px; border-left:1px dotted #bbb;}

    /* 최근에 올라온 글 */
    .sideinfo .recentPost h3, .sideinfoEtc .recentPost h3{background:url(images/t_post.gif) no-repeat; width:180px; height:22px;
    display:block; text-indent: -100em; overflow:hidden; text-decoration: none; margin-bottom:10px;
    }
    .sideinfo .recentPost .cnt, .sideinfoEtc .recentPost .cnt{font:80% tahoma; color:#cfe01e;}

    /* 최근에 달린 댓글 */
    .sideinfo .recentComment h3, .sideinfoEtc .recentComment h3{background:url(images/t_comment.gif) no-repeat; width:180px; height:22px;
    display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
    }
    .sideinfo .recentComment, .sideinfoEtc .recentComment{ width:180px; overflow:hidden; line-height:1.3; }

    /* mainbody > contentBody > sideinfo > 카운터 */
    .sideinfo .counter{ font:90% Tahoma; letter-spacing:0; text-align:left; padding:10px; margin-top:10px;}
    /* mainbody > contentBody > sideinfo > 태터툴즈 로고 */
    .sideinfo .poweredBy{ text-align:center; padding:5px;}
    /* mainbody > contentBody > sideinfo > rss 구독 아이콘 */
    .sideinfo .rss{ text-align:center; padding:5px;}

    /* sideinfoEtc 기본스타일*/
    .sideinfoEtc {font:90% dotum, Verdana; }
    .sideinfoEtc h3{ font:small dotum; font-weight:bold; text-decoration:underline; margin-bottom:10px; margin-top:20px;}
    .sideinfoEtc ul{ margin:0; padding:0; list-style:none;}
    .sideinfoEtc li{ background:url(./images/bull.gif) no-repeat 0 3px; padding:0 0 5px 8px;}

    /* sideinfoEtc > 태그 */
    .sideinfoEtc .tag, .sideinfo .tag { background:none; display:inline; padding:0; text-align:justify;}
    .sideinfoEtc .tag .cloud1, .sideinfo .tag .cloud1{ font-weight:bold; font-size:140%; color:#e8e635 }
    .sideinfoEtc .tag .cloud2, .sideinfo .tag .cloud2 { font-weight:bold; font-size:130%;color:#eeeeee}
    .sideinfoEtc .tag .cloud3, .sideinfo .tag .cloud3 { font-weight:bold; font-size:120%;color:#a2a2a2}
    .sideinfoEtc .tag .cloud4, .sideinfo .tag .cloud4 { font-size:110%;color:#a2a2a2}
    .sideinfoEtc .tag .cloud5, .sideinfo .tag .cloud5 { font-size:100%;color:#a2a2a2}
    .sideinfoEtc .tag a:hover, .sideinfo .tag a:hover{ color:#fff;}
    .sideinfoEtc .tag h3, .sideinfo .tag h3 { background:url(images/t_tags.gif) no-repeat; width:180px; height:22px;
    display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
    }

    /* mainbody > sideinfo > 최근에 받은 트랙백 */
    .sideinfoEtc .recentTrackback, .sideinfo .recentTrackback{ font-family: Verdana; letter-spacing:0;}
    .sideinfoEtc .recentTrackback .cnt, .sideinfo .recentTrackback .cnt{ font:70% Verdana;}
    .sideinfoEtc .recentTrackback h3, .sideinfo .recentTrackback h3 {background:url(images/t_track.gif) no-repeat; width:180px; height:22px;
    display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
    }

    /* mainbody > sideinfo > 글보관함 */
    .sideinfoEtc .archive, .sideinfo .archive{ font-size:90%; font-family: Verdana; letter-spacing:0;}
    .sideinfoEtc .archive .cnt, .sideinfo .archive .cnt{color:#becd2f; font:80% Tahoma;}
    .sideinfoEtc .archive h3, .sideinfo .archive h3 {background:url(images/t_archive.gif) no-repeat; width:180px; height:22px;
    display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
    }
    /* mainbody > sideinfo > 달력 */
    .sideinfoEtc .calender table.tt-calendar th, .sideinfo .calender table.tt-calendar th { font:100%; }
    .sideinfoEtc .calender table.tt-calendar td.cal_day, .sideinfo .calender table.tt-calendar td.cal_day { font:80% Verdana; }
    .sideinfoEtc .calender h3, .sideinfo .calender h3 {background:url(images/t_calendar.gif) no-repeat; width:180px; height:22px;
    display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
    }
    .sideinfoEtc .calender a, .sideinfo .calender a{ color:#fff;}
    /* mainbody > sideinfo > 링크 */
    .sideinfoEtc .link h3, .sideinfo .link h3 {background:url(images/t_link.gif) no-repeat; width:180px; height:22px;
    display:block; text-indent: -100em; overflow:hidden; text-decoration: none;
    }

    /* content 기본스타일*/
    .content {font:90%/1.5 dotum, Verdana;}
    .content h2{ font-size:100%;}
    .content h3{ font-size:100%; color:#fff; margin:0 5px; padding:0 0;}
    .content input{ border:1px solid #6e6e6e; color:#666666;}
    .content textarea{ border:1px solid #6e6e6e; color:#666666; overflow:visible; height:150px;}
    .content .name{font-size:95%;}
    .content .date{font:80% Tahoma; color:#999; letter-spacing:0;}
    .content .cnt {font:75% Tahoma; letter-spacing:0; color:#cfe01e;}
    /* content 검색 리스트 */
    .content .searchList{ margin-bottom:30px;}
    .content .searchList .date{padding-right:7px;}
    .content .searchList ol{ list-style:none; margin:0; padding:0;}
    .content .searchList li{ margin:0; border-bottom:1px solid #6e6e6e; padding:2px 0;}
    /* content 검색 댓글 리스트 */
    .content .searchReplyList{ margin-bottom:30px;}
    .content .searchReplyList .date{padding-right:7px;}
    .content .searchReplyList .name {color:#999;}
    .content .searchReplyList ol{ list-style:none; margin:0; padding:0;}
    .content .searchReplyList li{ margin:0 ; border-bottom:1px solid #6e6e6e; padding:2px 0;}
    /* content 위치로그 */
    .content .local .spot { padding:5px 0 2px 20px; background:url("./images/iconDepth.gif") no-repeat 10px 5px; border-bottom:1px solid #6e6e6e; margin:0 10px;}
    .content .local .info { padding:5px 0 2px 10px; background:url("./images/bullTri.gif") no-repeat 0 50%; border-bottom:1px solid #6e6e6e;}
    .content .local a{ color:#a2a2a2;}
    /* content 태그 */
    .content .tag a{ color:#e8e635; padding:0 2px; text-decoration:none; font-family:dotum;}
    .content .tag ul{ margin:10px; padding:0;}
    .content .tag li{ display:inline; padding:0; text-align:justify;}
    .content .tag li .cloud1 { font-weight:bold; font-size:155%; }
    .content .tag li .cloud2 { font-weight:bold; font-size:145%; color:#eeeeee;}
    .content .tag li .cloud3 { font-weight:bold; font-size:135%; color:#a2a2a2;}
    .content .tag li .cloud4 { font-size:125%; color:#a2a2a2;}
    .content .tag li .cloud5 { font-size:115%; color:#a2a2a2;}
    .content .tag li a:hover{ color:#ffffff;}

    /* content 방명록 기본 스타일 */
    .content .guestbook p{padding:2px; margin:0;}

    /* content > entry 댓글+트랙백 공통 스타일 */
    .content .entry .list .name{ float:left;}
    .content .entry .list .date{ float:left; padding:5px 2px 0 2px;}
    .content .entry .list .control{ float:right; padding-right:5px;}
    .content .entry .listBody {clear:both;}


    /* content 방명록 글쓰기 */
    .content .guestbook .write {color:#a2a2a2; margin:0 5px; text-align:left}
    .content .guestbook .write input{ width:30%; padding:4px 4px 0 4px; color:#666; font-size:95%;}
    .content .guestbook .write .homepage{ width:70%;}
    .content .guestbook .write textarea{ width:100%; margin-bottom:5px;}
    .content .guestbook .write .btn{ width:100%; background:#4f4f4f; padding-top:3px; margin:0 0 0 1px; color:#fff }

    /* content 방명록 리스트 */
    .content .guestbook .list { color:#888; margin:10px 10px;}
    .content .guestbook .list ul{ margin:0; padding:0; list-style:none;}
    .content .guestbook .list ol{ margin:0; padding:0; list-style:none;}
    .content .guestbook .list li{ padding:10px 10px 10px 14px; background:url(./images/iconFoot.gif) no-repeat 0 6px; border-bottom:1px solid #6e6e6e;}
    .content .guestbook .list li ul li{ padding-left:24px; background:url(./images/iconDepth.gif) no-repeat 4px 12px; margin-bottom:4px; padding:10px 0 10px 14px; border:0;}
    .content .guestbook .list .name{ font-size:100%; letter-spacing:0; float:left; padding-right:3px;}
    .content .guestbook .list .date{ float:left; padding:3px 2px 0 2px;}
    .content .guestbook .list .control{ margin-left:400px; text-align:right; padding-right:5px; }
    .content .guestbook .listBody {clear:both; overflow:hidden; width:500px;}
    .content .guestbook .listBody2 {clear:both; overflow:hidden; width:490px;}
    .content .guestbook .name a{ color:#ededed;}
    .content .guestbook .date{ font:80% Tahoma; color:#999; letter-spacing:0;}

    /* content > entryNotice, entryProtected, entry 기본 스타일 */
    .content .entryNotice, .content .entryProtected {margin-bottom:30px;}
    .content .entry { margin-bottom:20px; }
    /* content > entryNotice, entryProtected, entry 제목 + 정보 */
    .content .titleinfo{ border:0px; border-bottom:1px solid #6e6e6e; padding:0 0 8px 0; margin-bottom:10px; }
    .content .titleinfo h2{ color:#ffffff;}
    .content .titleinfo h2 a{ display:inline; float:left; color:/*@post-title-color=#ffffff*/ #FFFFFF /*@*/; /*@post-title-font-family=font-family:;*/ font-family: inherit; /*@*/ /*@post-title-font-size=font-size:;*/ font-size: inherit; /*@*/}
    .content .titleinfo .name { float:left;}
    .content .titleinfo .name a{ padding:2px 0 0 0; color:#d1d1d1;}
    .content .titleinfo .date{ text-align:right; padding-top:2px; color:#7d7d7d;}
    .content .admin{ font-size:95%; padding-right:5px; text-align:right;}

    /* content > entryNotice, entryProtected, entry 본문 */
    .content .article{ margin:10px; width:/*@post-width:-20=*/ 630px /*@*/; overflow:hidden; letter-spacing:0; /*@post-body-font-size=font-size:;*/ font-size: inherit; /*@*/ /*@post-body-color=color:;*/ color: ; /*@*/ /*@post-body-font-family=font-family:;*/ font-family: inherit; /*@*/ }
    .content .article ul{ margin-left:20px; padding:0;}
    .content .article ol{ margin-left:20px; padding:0;}
    .content .article a{ color:#618cbf;}
    .content .article blockquote{ margin:10px 0 10px 30px; border-left:4px double #ded2c6; padding-left:10px;}

    /* 작성자 */
    .author { text-align:right; color:#888; padding:20px 20px;}
    .author .text { font:90% Verdana, Arial, Helvetica, sans-serif;}


    /* content > entry > 태그 */
    .content .entry .tag{ clear:both; text-align:left; padding-right:10px; margin-bottom:10px;}
    .content .entry .tag a:hover{ color:#fff; text-decoration:underline;}

    /* content >entry > 트랙백+댓글 버튼 */
    .content .entry .btnTrackbackComment {clear:both; border-top:1px solid #6e6e6e; padding:8px 5px; margin:0;}
    /* content > entry > 트랙백받을 주소*/
    .content .entry .trackback {margin:0 0 0 0;}
    .content .entry .trackback h3{ padding:0 5px; color:#cfe01e; font-weight:normal; }
    .content .entry .trackback .address{letter-spacing:0; font-family:Verdana; font-size:90%; color:#a2a2a2;}
    /* content > entry > 트랙백 리스트 */
    .content .entry .trackback h4{ font-size:100%; font-weight:normal; display:inline; margin:0;}
    .content .entry .trackback h4 a{color:#ededed; padding:0 2px;}
    .content .entry .trackback .list ol{margin:0; padding:0; list-style:none;}
    .content .entry .trackback .list li{ background:url(./images/bullTri.gif) no-repeat 5px 12px; padding:3px 0 0 12px; width:/*@post-width:-30=*/ 620px /*@*/; overflow:hidden;}
    .content .entry .trackback .list .date{ color:#999;}
    .content .entry .trackback .list .listBody { color:#999; padding:2px 0;}
    /* content > entry > 댓글 타이틀*/
    .content .entry .comment{width:/*@post-width:-10=*/ 640px /*@*/; overflow:hidden;}
    .content .entry .comment p{margin:0;}
    .content .entry .comment { margin:0;}
    .content .entry .comment h3{ padding:0 5px; color:#cfe01e; font-weight:normal; }
    .content .entry .comment .address{letter-spacing:0; font-family:dotum; color:#a2a2a2;}
    /* content > entry > 댓글 리스트 */
    .content .entry .comment .list ol{margin:0; padding:0; list-style:none;}
    .content .entry .comment .list ul{list-style:none;}
    .content .entry .comment .list li{ padding:3px 0 0 20px; margin-bottom:4px;}
    .content .entry .comment .list li ul li{ background:url(images/iconReComment.gif) no-repeat 5px 5px; padding:3px 0 0 30px; margin:0 2px;}
    .content .entry .comment .name a{ font-size:110%; color:#ededed;}

    /* content > entry 댓글+트랙백 공통 스타일 */
    .content .entry .list .name{ float:left;}
    .content .entry .list .date{ float:left; padding:5px 2px 0 2px;}
    .content .entry .list .control{ float:right; padding-right:5px;}
    .content .entry .listBody {clear:both;}

    /* content > entry 댓글 쓰기 */
    .content .entry .comment .write {color:#a2a2a2; margin:0 5px;}
    .content .entry .comment .write input{ width:30%; padding:4px 4px 0 4px; color:#666; font-size:95%;}
    .content .entry .comment .write .homepage{ width:50%; display:inline;}
    .content .entry .comment .write textarea{ width:100%; margin-bottom:5px;background:url(http://cfs7.blog.daum.net/image/31/blog/2008/01/10/17/44/4785dac787f74&filename=dog70.gif)no-repeat;}
    .content .entry .comment .write .checkbox{ border:0; width:20px;}
    .content .entry .comment .write .btn{ width:100%; background:#4f4f4f; padding-top:3px; margin:0 0 0 1px; color:#fff}

    .content .paging{ clear:both; text-align:center; margin:50px 0; font:80% Verdana;}

    /* footer */
    .footer{ font:80% Verdana; letter-spacing:0; color:#999999;}
    .footer a:link{color:#999999;}
    .footer a:visited{color:#999999;}
    .footer a:hover{color:#fff;}
    .footer .menu{ font:120% dotum; letter-spacing:-1px;}

  9. Favicon of https://deborah.tistory.com BlogIcon Deborah 2008.01.12 05:35 신고 address edit & del reply

    이거 그대로 카피해서 올렸는데 대충 보시면 아시겠지요?
    어디에다 해야 하는지 가르쳐 주세요.^^

    • Favicon of http://d-rush.tistory.com BlogIcon D-rush 2008.01.16 09:27 address edit & del

      .content .entry .comment .write textarea{ width:100%; margin-bottom:5px;background:url(http://cfs7.blog.daum.net/image/31/blog/2008/01/10/17/44/4785dac787f74&filename=dog70.gif)no-repeat;}

      부분이 맞는데 말이지요.
      혹 GIF 에니메이션이라 그런것은 아닐까요?
      저도 GIF 에니메이션을 삽입 해 본적은 없어서요 ㅠㅠ

  10. Favicon of https://24report.tistory.com BlogIcon 소셜앤겜 2008.01.14 21:45 신고 address edit & del reply

    님...애드센스 달기 강좌가 넘 좋아서 ..
    제 블로그에서 공부하려고 가져갈게요....고맙습니다...

    • Favicon of http://d-rush.tistory.com BlogIcon D-rush 2008.01.16 09:24 address edit & del

      ^ㅡ^ 넵

  11. Favicon of http://cribs.tistory.com BlogIcon 크립 2008.02.15 17:15 신고 address edit & del reply

    좋은 정보 감사드립니다^^

    덕분에 무사히 댓글창에 이미지 다는데 성공했어요^^

    • Favicon of http://d-rush.tistory.com BlogIcon D-rush 2008.02.15 17:33 address edit & del

      축하드립니다 ^^
      구경갈게요 ^ㅡ^

  12. Favicon of https://brainchaos.tistory.com BlogIcon brainchaos 2008.02.20 11:59 신고 address edit & del reply

    감사합니다.
    덕분에 댓글에 이미지를 삽입했습니다. ^^;

    • Favicon of http://d-rush.tistory.com BlogIcon D-rush 2008.02.20 14:09 address edit & del

      축하드려요 ^^
      생각보다 어렵지 않아서 다행이었는데..
      어떠셨나요 헤헤