스킨) 강좌 - 답글 스킨 수정 심화 학습

예전에 올렸던 스킨) 강좌 - 덧글의 답글 스킨 수정 방법의 보충입니다. 매우 오랜만에 쓰는 스킨강좌로군요. 제가 뭐 그렇죠. 쓸일을 만들어주지 않으면 안씁니다. 귀찮거든요. 이번엔 물어보시는 분이 두분이나 계셔서, 씁니다요. 저는 어디까지나 여러분의 요구가 있어야 겨우겨우 강좌를 쓰는 귀차니스트입니다.(...)

답글 스킨을 조금 예쁘게 바꿔 보려고 하는데 왠지 마음대로 안되서 속상하신 분들이 꽤 계실겁니다. 왜 그럴까요. 이유는 이글루 스킨 CSS에 있습니다. 이글루에서 자동으로 적용되는 답글 스킨 소스를 먼저 보도록 하겠습니다.

/* 답글 */
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; }

다른 곳들은 일단 넘어가구요. 저기 붉게 표시한 !important가 붙은 속성들이 문제입니다. 기본적으로 CSS 파일을 불러올때 가장 나중에 불러온 파일을 최종적으로 인식하지만 저 !important가 붙은 속성은 뒤에 뭐라고 정의하든 저 속성을 강제로 적용하는 녀석이죠. 한마디로 막무가내입니다. 막무가내로 구는 녀석들은 똑같은 놈들을 앞에 대려다 놓고 속터지게 해봐야 조금 정신을 차리기도 하죠. 근거는 없는 이야기 입니다만...

저 !important를 무시하고 마음대로 속성을 바꾸고 싶으시다면 똑같이 !important를 쓰시면 됩니다. 그러면 나중에 불러온 CSS부터 적용하는게 그대로 먹습니다. 이글루 구조를 보시면 이글루 자체 CSS는 위쪽에, 사용자가 만든 CSS는 밑에 위치합니다. 그러니 사용자가 !important를 써버리면 그 속성은 안먹을 수가 없습니다. 물론 이것도 쌩(?)까는 방법이 있습니다만... 그걸 말하려고 적고 있는건 아니니 여기서 줄입니다.

정리하자면 div.reply_tail,div.reply_body 에서 margin 값, div.reply_body 에서 width 값을 조절하시려면 !important를 붙여서 쓰시면 된다는 말을 어렵게 쓴겁니다. 일부러 어렵게 쓴건 아니구요. 있어보일려고 그리 쓴것도 아니구요. 나름 쉽게 설명해둔거니 구박하진 마세요. ㅠㅠ (실컷 강좌 써놓으면 '어려워서 모르겠어욤 뿌우..' 이러시는 분들이 많아 가슴 아픕니다.)

보통 답글의 스킨으로써 눈에 보여지는 것은 div.reply_tail과 div.reply_body입니다. 저 두 부분이 어디를 말 하는 건지 감이 안오시는 분들을 위해 친절한 파이군은 왠일로 그림도 준비했습니다. 물론 대충 만들었으니 기대는 마시고 보시죠.

단순하게, 저 파란부분이 div.reply_tail, 빨간 부분이 div.reply_body 입니다.

백번 보는 것 보다 한번 보는 것이 좋다는 말이 있듯 일단 제 이글루에 적용된 저 두 속성값을 보여드리겠습니다.

div.reply_tail {
    background:#fcfcfc;
    margin:0 0 0 15px !important;
    padding:10px;
    padding-bottom:5px;
    width:92%;
    border: 1px solid #D4D4D4;
    border-bottom:none;
}
div.reply_body {
    background:#fcfcfc;
    margin:0 0 15px 15px !important;
    padding:10px;
    padding-top:5px;
    width:92% !important;
    border: 1px solid #D4D4D4;
    border-top:none;
}

위에서 말씀드렸다 싶이 !important가 붙어있던 속성들은 빠짐없이 !important를 붙여두었습니다. 상자 모양을 내기 위해서 일단 위 아래에 모두 같은 너비(width)값을 주었고 별도로 위쪽의 tail에는 외각선을 ┌┐이렇게만 그렸으며 body 쪽엔 └┘ 이렇게 그렸습니다. 합치면 □ 가 되는 것이지요. 생각보다 간단하죠?

예쁘게 잘 만들어진 배경 그림을 넣는다던가 하면 다양한 모양의 스킨을 만들어 볼 수 있습니다. 그리고 답글과 답글 사이의 공간을 조절 하시려면 tail에 위쪽 여백(margin)을 주시던가 body에 아래쪽 여백을 주시면 됩니다. 제 스킨에는 body에서 아래쪽 여백을 주었습니다. 'margin:0 0 15px 15px !important' 이 부분이죠.(margin값을 지정할때 뒤에 숫자값을 4자리 줄줄줄 적어주면 차례대로 위, 오른쪽, 하단, 왼쪽 여백을 지정하는 것이 됩니다.)

어때요. 참 쉽죠?(.....)

대충 제 소스 가져다가 색만 바꿔 쓰셔도 됩니다요. 그림을 활용한 예쁜 스킨은 만들기가 귀찮기 때문에 넘어갑니다. 구렁이 담넘어가듯 스르르륵... 무언가 또 강좌로 쓰이길 원하시는게 있으시다면 언제든지 의견 남겨주세요. 단, 언제 강좌가 완성될지는 아무도 장담못합니다.(......)