답덧글 색깔 내 맘대로 바꾸기 + 닉네임 옆에 그림 붙이기

이번에 올리는 스킨 강좌는 일단 이번 글로 마무리합니다.
특별히 질문이 들어오는 사항이 있거나 따로 또 이런 팁은 유용하겠다 싶은 게 생기면
그때 다시 새 글을 쓰겠습니다 ^^

그럼 먼저 답덧글부터.

아무 얼음집이라도 좋습니다. 오른클릭해서 '소스 보기'를 누르면 이런 화면이 보이고 거기서 모든 얼음집에 공통적으로

"http://md.egloos.com/css/egloos_template.css?ver=1.001"

이런 항목이 보입니다.

이걸 열어보세요. 크롬 브라우저라면 클릭하면 바로 열릴 겁니다.

/* 답글 */
div.reply_tail { margin-left: 20px !important; }
div.reply_body { margin-left: 20px !important; padding-right:10px; width:95% !important; }
div.reply_input { margin:5px 0px 0px 0px;width:100%;overflow:hidden;word-break:break-all; }
div.reply_input p { width:100%; }
div.reply_input textarea { border: 1px solid #D4D4D4; width:100%;height:100px;margin-top:3px;font-size:12px;font-family:돋움,sans-serif; }
div.reply_input input[type=text] { border: 1px solid #D4D4D4; }
div.reply_input input[type=password] { border: 1px solid #D4D4D4; }

이런 게 보이죠?

이게 바로 이글루스에서 시스템 차원에서 지원하는 답덧글 설정입니다.
답덧글 기능이 새로 생기면서 이렇게 모든 스킨에 공통적으로 적용되는 소스를 새로 설정한 것입니다.
모든 얼음집에 적용된 방식인 '답덧글이 덧글보다 약간 들어가서 달리는' 형식 말예요.

이걸 자신의 스킨 소스에 복사해 붙이고 원하는 부분을 변경하면
자기가 원하는 대로 답덧글의 색이나 배경을 변화시킬 수 있습니다.

[주의!] 근데 사실, 저걸 저대로 복사해서 붙여넣으면 작동 안 하는 경우가 더 많을 겁니다. (모든 스킨에 적용해본게 아니라 확신은 못하지만, 일단 제가 만든 스킨에 저 상태로 복사해 넣으니 적용이 안 됐습니다) 저건 핵심만 추린 간략 버전이라고 보시고, 실제로 스킨에서 적용이 되려면 저 앞에 제 주소를 찾아줘야 합니다. 다시 말해서,

#content div.post div.comment div.reply_tail { margin-left: 20px !important; }

이렇게, #content div.post div.comment (컨텐트-포스트-코멘트)라고 앞주소를 적어줘야 한다는 겁니다.
마치 편지봉투에 주소 쓸 때 도-시-구-동-번지 순으로 차례대로 적어줘야 번짓수를 제대로 찾을 수 있듯이요.

하지만 설명할 때 저걸 일일이 다 적어주면 너무 길어지니;; 공통되는 #content div.post div.comment 부분은 생략하고 div.reply_...만 적겠습니다.

[1] div.reply_tail { margin-left: 20px !important; }
"Commented by 닉네임 at 2008/09/23 23:45" 라고 나오는 부분입니다.
margin-left : 20px; 란 '왼쪽에 20px만큼 외부 여백을 주라'는 뜻입니다. (그래서 결과적으로 답덧글이 덧글보다 오른쪽으로 살짝 들어간 모습이 되죠)

만약 "commented by at 날짜"의 회색 색깔을 다른 색으로 바꾸고 싶거든 "color : #색깔코드;" 라고 써보세요. 색이 바뀝니다.
실제 사용예를 들어보죠.

div.reply_tail { color : red; background-color: #FFE1CF;}

배경색이 조금 더 짙은 분홍색이 되고 링크가 적용되지 않은 부분(회색이었던 부분)의 색이 바뀌었습니다.

※ 여기서 한가지 재미있는 팁 :
저 이글루스 시스템 소스에서 가져온 부분에는 없지만 별도로 추가 지정해줄 수 있는 요소가 몇 개 있습니다.
자, commented by at 2008/09/23 23:45의 색은 바꿀 수 있는데요, 굵은 글씨로 쓰인 닉네임의 색깔은 안 바꿔질 겁니다. 그렇죠?
그건 어떻게 바꿀 수 있을까요?

그건 굵은 글씨를 나타내는 strong 요소를 첨가해서 소스를 추가해 적어주면 됩니다. 다시 말해서

div.reply_tail { }
div.reply_tail strong { } <- 요렇게 추가로 적어주라는 거죠.

이걸로 무슨 재미있는 것이 가능하냐.

요런 게 가능합니다! 'ㅁ'

제가 사용한 소스는 이렇습니다.

div.reply_tail strong { padding-left : 15px; background : url(그림 주소) no-repeat; }

...물론, 저게 제가 아니라 다른 분이 답덧글을 달아도 저 그림이 뜬다는 단점은 있지만 -_-; 대개의 경우 답덧글은 블로그 주인이 가장 많이 단다는 점에서 꽤 재미있는 사용팁이 될 거라고 생각합니다.

참고로 똑같은 내용을 strong대신 링크를 뜻하는 a로 바꾸면

div.reply_tail a { padding-left : 15px; background : url(그림 주소) no-repeat; }

이렇게 됩니다.

링크가 걸린 곳에는 다 적용된다(화살표그림, 닉네임, x그림)

[2] div.reply_body { }
이부분은 답덧글의 몸체, 즉 실제로 우리가 적은 답덧글 내용이 나오는 부분입니다.

이 그림에서 "그렇죠 모든 것은 쩐으로 통한다능" 이 들어가는 박스를 가리킵니다.
여기에 div.reply_body { background : #컬러; } 를 지정함으로서 저런식으로 코멘트란 전체의 색과는 차별화된 답덧글박스를 만들 수 있습니다. 물론 글씨색을 바꿔도 됩니다. color : #컬러; 를 넣어주면 되지요.


[2.5] - [1]+[2]의 합체
그럼 이런 건 할 수 없을까? 라는 의문이 생기겠죠?

떨어져서 보이는 div.reply_tail과 div.reply_body박스를

붙여버리기.

이건 margin값의 조정으로 가능합니다.

div.reply_tail { margin-bottom : 0px; }
div.reply_body { margin-top : 0px; }

이렇게 추가해주면 아래위 여백이 사라져서 두 박스가 딱 붙게 됩니다.


[3] div.reply_input { margin:5px 0px 0px 0px;width:100%;overflow:hidden;word-break:break-all; }
답덧글 버튼 클릭하면 나오는 상자의 주위 여백, 길이, 위치 같은 걸 지정해줄 때 씁니다. 예를 들어 margin:5px 0px 0px 0px; 을 margin:50px 0px 0px 0px; 로 윗여백을 늘려주면

이렇게 됩니다.

[4] div.reply_input textarea { border: 1px solid #D4D4D4; width:100%;height:100px;margin-top:3px;font-size:12px;font-family:돋움,sans-serif; }

답덧글 적는 박스의 설정입니다. 박스 크기며 테두리 색깔 등을 지정해줄 수 있습니다.

div.reply_input input[type=text] { border: 1px solid #D4D4D4; } : 비로그인 덧글 시 닉네임 적는 부분
div.reply_input input[type=password] { border: 1px solid #D4D4D4; } : 비로그인 덧글 비번 적는 부분

[5] 바꿔줬는데 안 먹힐 경우
마진이고 패딩이고 글씨 색깔이고 열심히 바꿔줬는데 아무리 해도 안 바뀌는 경우가 가끔 있습니다.
그런 경우는 대개 이글루스 시스템 차원에서 그 부분을 절대값으로 지정해버려서, 그냥 바꾸면 안 바뀌는 것입니다.
그럴 땐 !important 라는 절대값선언을 해보세요. 예를 들어

margin-left: 20px; 가 안 먹히면

margin-left: 20px !important;

이런 식으로요. (;앞에 !important를 넣습니다.)

그렇게 해도 안 바뀌면? 그럼 div.content~~~ 하는 주소를 잘못 찾았거나, 오타가 났거나, 뭔가 케이스 바이 케이스로 원인을 따로 찾아야겠죠. 일반 강의에서 다룰 수 있는 내용은 아닌 것 같습니다.

.
.
.
.
.
.

하다보니 이번에도 길어졌군요 ^^;;

그래도 개인적으로는 이번 글이 스킨 강좌 시리즈 중에 제일 재미있는 부분이 아닐까 싶습니다. 특히 닉네임 옆에 그림넣기 같은 건 다른 이글루스 블로그에서는 다뤄진 적이 없을 것 같네요. 저 같은 경우는 네이버 블로그에서 부러운 부분이 바로 저 닉네임 옆의 퍼스나콘이었거든요. 미흡하나마 이글루스에서도 방법이 있으니 필요하신 분은 활용하시기 바라고요, 답덧글 부분을 눈에 잘 띄게 바꾸고 싶으셨던 분도 이 기회에 잘 알아가셨길 바라겠습니다.

좋은 하루 되세요! 'ㅁ'


※ 뱀발 - 미련을 못 버리고 한가지 질문요. css에 if문 같은 거 못 쓰나요? 특정 문자나 특정 링크가 나올 때에만 속성을 지정할 수 있게 하면 좋을텐데 ㅠㅠ 자기 닉네임이 나올 때만 그림이 나올 수 있도록요...;