이글루스 1.0 스킨 편집 소스 코드 분석

사람들이 이곳저곳에서 조금 더 찾아오는 거 같아서,
좀 읽기 편하도록 스킨을 조정했습니다.
그러다가 익숙치 않은 사람들이 도움 받을수 있도록, 허접하지만 소스 코드를 분석해 보았습니다.
HTML 코드가 아닌 CSS 편집 소스로 대략적인 주석을 달아 놓았으니 참조하세요.
(예전에 처음으로 수정하면서 본문 너비 600px -> 800 px 로 변경할때.. 삽질했던 생각이 나서.. ㅎㅎ)



body {
 margin:0;
 padding:0;
 text-align:center;
 font-family:'돋움',tahoman,arial,helvetica,sans-serif;
 font-size:12px;
 line-height:1.5em;
 }
a:link {color:#959595;text-decoration:none;}
a:visited {color:#959595;text-decoration:none;}
a:hover {color:#e08934;text-decoration:underline;}
a:active {color:#959595;text-decoration:none;}
hr.line {display:none;}/*system class*/

#body {
 width:100%;
 margin:0 auto;
 padding:0;
 text-align:center;
 border-top:4px solid #eaeaea;
 background:url('http://md.egloos.com/skn/img/a/01/09/0/bg_foot2-x.gif') left bottom repeat-x;
 }
#container {
 width:1025px; /* 전체 창 사이즈 (사이드바 + 본문) */
 margin:0 auto;
 text-align:left;
 }
#header {
 width:1025px; /* 헤더 사이즈 */
 height:78px;
 background:#fff;
 position:relative;
 margin:0 auto;
 }
#content {
 float:right;
 width:800px; /* 콘텐츠 창 사이즈 */
 text-align:center;
 padding:230px 0 0 0; /* 콘텐츠 메인 이미지와 첫 제목 사이의 여백 (이미지 높이 + 15~17px) */
 _padding:329px 0 0 0;
 background:url('http://pds15.egloos.com/pds/200904/23/11/title_image_ver_inzaghi.jpg') left top no-repeat;
 }
#sidebar {
 float:left;
 width:200px;
 text-align:center;
 line-height:1.2em;
 padding-bottom:20px;
 }
#footer {
 clear:both;
 width:825px;
 height:53px;
 }

/* header 스타일 시작 */
#header {}
#header a:link {text-decoration:none;}
#header a:visited {text-decoration:none;}
#header a:hover {text-decoration:none;}
#header a:active {text-decoration:none;}
#header h1 {
 margin:0;
 padding:31px 0 0 25px; /* 위치 좌표 */
 font-size:35px;
 text-align:left;
 font-weight:bold;
 font-family:'맑은 고딕',arial,sans-serif; /* 제목 폰트 */
 color:#3c6191;
 letter-spacing:-1pt;
 }
#header h1 a {color:#3c6191;} /* 제목 색깔 */
#header p.url {
 margin:0;
 padding:0 0 0 115px; /* 위치 지정 */
 text-align:left;
 line-height:2.3em; /* 제목 아래 링크 위치 */
 font-family:'맑은 고딕',arial,sans-serif; /* 제목아래 링크 폰트 */
 }
#header p.url a {color:#e08934;} /* 제목 아래 링크 색 */
#header p.usermenu {
 position:absolute;
 bottom:20px;
 right:0;
 margin:0;
 text-align:right;
 padding:0;
 width:100%;
 color:#959595;  /* 사용자 메뉴 가운데 ㅣ 색깔 */  /* Egloos | My Egloos | Config | 요런 메뉴 수정 */
 }
/* header 스타일 끝 */

/* content 스타일 시작 */
#content div.post {
 margin:20px 0 30px 0;
 text-align:left;
 width:800px;
 }
#content div.post h2.postdate {display:none;}
#content div.post h3.posttitle {
 display:block;
 width:730px;
 margin:0;
 padding:0 70px 10px 0; /* 위치 좌표 */
 cursor:pointer;
 font-size:20px;
 font-family:'맑은 고딕',gulim,sans-serif; /* 글제목 폰트 */
 letter-spacing:-1pt;
 background:url('http://pds12.egloos.com/pds/200810/13/11/kai_title_under_bar.gif') left bottom no-repeat;
 overflow:hidden;
 word-break:break-all;
 }
#content div.post h3.posttitle a {color:#3c6191;} /* 글제목 색깔 */
#content div.post p.postadmin {float:right;width:65px;margin:0;color:#ccc;}
#content div.post div.content {
 margin:15px 0 0 0;
 width:800px; /* 실제 본문 사이즈 */
 overflow:hidden;
 font-family:'맑은 고딕',arial;    /* 본문 글꼴 */
 line-height:2em;
 color:#656565;  /* 본문 글자 색 */
 word-break:break-all;
 }
#content div.post div.content img.image_top {margin-bottom :15px;}/*system class*/
#content div.post div.content img.image_mid {margin:15px 0;}/*system class*/
#content div.post div.content img.image_left {margin:0 15px 15px 0;}/*system class*/
#content div.post div.content img.image_right {margin:0 0 15px 15px;}/*system class*/

#content div.post div.content a.more {}
#content div.post div.content span.archivedate {}

#content div.post p.posttail {
 clear:both;
 text-align:right;
 color:#e08934;
 }

#content div.post p.posttail a.checkpost {}
#content div.post p.posttail a.permalink {}
#content div.post p.posttail span.author {font-weight:bold;}
#content div.post p.posttail a.time {color:#999;}
#content div.post p.posttail a.category {}

#content div.post p.posttail a.tail_trb {font-weight:bold;color:#e08934;}
#content div.post p.posttail a.tail_trb span {}
#content div.post p.posttail a.tail_cmt {font-weight:bold;color:#e08934;}
#content div.post p.posttail a.tail_cmt span {}
#content div.post p.posttail .linkback {font-weight:bold;}

#content p.page {padding-bottom:50px;}
/* content 스타일 끝 */

/* comment 및 trackback 스타일 시작 */
#content div.post div.comment {
 padding:10px 0 10px 20px;
                font-family:'맑은 고딕',arial; /* 코멘트창 글꼴 */
 color:#656565;
 border:1px solid #f0f0f0;
 background:#fbfbfb;   /* 코멘트 창 배경색 */
 }
#content div.post div.comment div.comment_body {margin:7px 0 0 0;}
#content div.post div.comment div.comment_tail {padding:7px 0 0 0;color:#999;}
#content div.post div.comment div.comment_tail strong {color:#e08934;}
#content div.post div.comment div.comment_input {margin:7px 0 0 0;}
#content div.post div.comment div.comment_input textarea {border:1px solid #eee;background:#fefefe;}
#content div.post div.comment div.comment_line {}
#content div.post div.comment div.track_top {padding:10px 0;color:#666;}
#content div.post div.comment div.track_top a {color:#e08934;}
/* comment 및 trackback 스타일 끝 */

/* 본문 내의 자주 사용하는 태그 속성 시작 */
#content div.post div.content ul {margin:0;}
#content div.post div.content ul li {}
#content div.post div.content ul li a {color:#e08934;}
#content div.post div.content ol {}
#content div.post div.content ol li {}
#content div.post div.content blockquote {margin:10px 0 5px 0;padding:0 15px;border-left:10px solid #EBEEF3;}

#content div.post div.content q {}
#content div.post div.content acronym {}
#content div.post div.content strong {}
#content div.post div.content em {}

#content div.post div.content dl {}
#content div.post div.content dl dt {}
#content div.post div.content dl dd {}

#content div.post div.content cite {}
#content div.post div.content code {}
#content div.post div.content samp {}
#content div.post div.content kbd {}
/* 본문 내의 자주 사용하는 태그 속성 끝 */

/* sidebar 스타일 시작 */
#sidebar p.logoimage {
 margin:0;
 padding-top:26px;
 background:#ebeef3;
 }
#sidebar p.description { /* 로고 사진 밑에 제목 설정 */
 margin:0;
 padding-top:7px;
 color:#656565;
 font-size:13px;
                font-family:'맑은 고딕',arial;
 background:#ebeef3;
 }
#sidebar p.nick { /* 로고 사진 아래 제목 아래 닉네임 표시 설정 */
 margin:0;
 line-height:3px;
 padding:7px 0 20px 0;
 font-size:11px;
                font-family:'맑은 고딕',arial;
 color:#959595;
 background:#ebeef3;
 }
#sidebar p.nick img {vertical-align:text-bottom;}/*system class*/
#sidebar p.nick br {display:none;}
/* sidebar 속성 */
#sidebar div.menu { /* 사이드바 내용 설정 */
 width:200px;
 margin:0;
 text-align:left;
                font-size: 9pt;
                font-family:'맑은 고딕',arial;
                color:#656565;
 overflow:hidden;
 word-break:break-all;
 }
#sidebar div.menu h3.posttitle {
 font-size:11pt;   /* 사이드바 제목 폰트 사이즈 */
                font-family:'맑은 고딕',arial;
 margin:25px 0 10px;
 _margin:15px 0 13px;
 width:191px;
 padding:9px 0 7px 9px;
 _padding:10px 0 6px 9px;
 color:#3c6191;
 letter-spacing:-1pt;
 background:#ebeef3;
 }
#sidebar div.menu .content {
 list-style:none;
 padding-left:0;
 margin-left:0;
 _margin:3px 0 0 0;
 overflow:hidden;
 word-break:break-all;
 }/*system class*/
#sidebar div.menu ul.content {margin:0;}
#sidebar div.menu ul.content li { /* 메뉴 여백 */
 margin:5px 0 0 10px;
 padding:0 0 0 10px;
 background:url('http://md.egloos.com/skn/img/a/01/09/0/bg_list2.gif') 0 5px no-repeat;
 }
#sidebar div.menu ul.content li a {color:#959595;}
#sidebar div.menu ul.content li a:hover {text-decoration:underline !important;}
#sidebar div.menu ul.content li span.small {display:block;}/*system class*/
#sidebar div.menu ul.content li span.small {color:#e08934;}
#sidebar div.menu ul.content li span.last {}

#sidebar div.menu .content form#finder {margin:0;}/*system class*/
#sidebar div.menu .content input#kwd {width:100px;font-size:12px;vertical-align:top;}/*system class*/
#sidebar div.menu .content input#submit {margin-left:5px;vertical-align:top;}/*system class*/

#sidebar div.banner {}
#sidebar div.xml {padding-bottom:30px;}
#sidebar div.xml a {color:#e08934;}
/* sidebar 스타일 끝 */

/* calendar 스타일 시작 */
div.cal {width:198px;margin:10px auto 0;padding:14px 0 7px 0;text-align :center;font-weight:normal;font-size:7pt;font-family:verdana;border:1px solid #ebeef3;}
div.cal_head {text-align :center;}
div.cal_head a {color:#889abe;font-size:9pt;font-family:'돋움',dotum,sans-serif;}
div.cal_head a span.cal {color:#889abe;font-size:7pt;}
div.cal_body {padding:12px 0 0 0;text-align :center;}
div.cal_body table {width:160px;margin:0 auto;}
div.cal_bottom {}
.cal {text-align :center;color:#999;}
.cal_day {text-align :center;}
.cal_sun {text-align :center;color:#385b88;}
.cal_sat  {text-align :center;color:#e08934;}
.cal_today {text-align :center;color:#fff;background:#889abe;}
.cal_today a strong {color:#fff;}
.cal_today a:hover {text-decoration:none;}
.cal_tr {}
/* calendar 스타일 끝 */



주석이 달린 부분의 설명을 보면 됩니다.
지금 제 스킨 설정이라서 3단 짜리는 좀 다를 수도 있지만 기본적으로 2단 짜리는 비슷한거 같네요.
궁금한거 있으시면 질문하시면 답변 해드립니다^-^

모두들 이글루 예쁘게 꾸미세요!
(제가 아는 부분은 주석처리 안하고 넘어갔으니, 질문 하시면 다 답변해 드립니다.)

덧글

[Nujabes]

스킨 넓게 바꾸는게 너무 궁금했었는데, 참고하니 쉽게되네요~
감사합니다~

[하루]

도움 많이 되었습니다 감사해요^^

[kaidrase]

필요한 부분 있으시면 더 말씀하세요^-^

[kaidrase]

아..제가 고향에 내려갔다가 온다고 이제서야 봤네요;;ㅎㅎ
지금은 출근때문에 자야하고,,
내일 다시 답변드릴게요^-^

[kaidrase]

우선, 사용자 메뉴부분은 찾아냈는데,
밑에 페이지 부분을 아직 못 찾았네요;
뭔가 컨텐츠나 헤더 부분 둘다 상관이 없는거 같은데;;

얼른 알아내서 답 드릴게요.

사용자 메뉴 부분은,
위에 붉은색으로 표시된 부분을 수정하시면 됩니다.

[바나나]

답글이 늦었습니다. 제목 부분의 이글루/링크/.. 이 부분은 설명이 되있었네요 ^^ 찾아서 숫자 바꿔주니 해결되었습니다 감사합니다 ^_^

[사야]

많은 도움이 되었습니다! 감사해요 ~_~

[kaidrase]

또 궁금한게 있으면 질문 주세요^-^

[presario]

안녕하세요~ 질문하나만 드릴께요 ^ㅅ^;

헤더에 배경그림을 하나 넣었는데요,
블로그 제목이 하얀색으로 나와서 색깔을 변경하려고 해요

그냥 헤더의 h1 부분에 color항목을 추가시키는걸로는 안돼나요?
미리 감사드려요~

[kaidrase]

헤더에 그림을 추가하셨다면,
이미 헤더 부분에 color 항목이 있기 때문에,
그냥도 가능하실 거라고 생각합니다.
이미지 추가로 인해서 색이 변경된 이유는 이글루스 시스템의 문제이지 싶은데-_- ;

h1 컬러 부분을 수정해보시구요.
안되시면 다시 알려주세요 ㅎㅎ 저도 실험을 한번 해볼께요 ㅎㅎ

[yujin]

유용한 정보네요.

[kaidrase]

네- 필요한거 있으시면 질문주세요 ㅎㅎ

[어이할량]

완전 유용합니다~^^ 근데 헤더 부분에서 블로그 제목 부분 컬러가 적용이 안되네요 ㅠ_ㅠ 왜이러지;;

[kaidrase]

구문을 알려주시면, 더 도와드리기 쉬울거 같네요 :)