스킨의 분위기와 레이아웃은 정말 마음에 들지만 몇가지 문제점을 수정하지 못해서 고민입니다. 3단 스킨중에 이 스킨보다 나은 스킨을 보지 못했습니다. 그래서 이 스킨을 꼭 완벽하게 수정을 해서 사용을 하고 싶은데 도무지 방법을 모르겠습니다. 스킨의 제작자분께서는 요즘 많이 바쁘신 듯 해서 이렇게 글을 써봅니다. 시간이 많으시거나 별다른 어려움이 없으신 분 계시면 도움을 바랍니다.
스킨 문제점
1. 웹창의 크기에 따라 레이아웃이 깨집니다. 가장 신경이 쓰이는 부분입니다.
그림과 같이 웹창의 크기를 줄이면 상단의 레이아웃이 깨져버립니다.
처음엔 search부분의 위치를 오른쪽 끝에 있는 것을 오른쪽 사이드바에 맞추려고 하다가 이런 현상을 발견 했는데 19인치와 17인치 듀얼 모니터를 사용하다가 보니 두 모니터 화면에서 출력해주는 모양이 달라 웹창을 줄였다 키웠다 하니 레이아웃이 깨지고 있더군요. search탭의 위치가 제일 오른쪽에 있어도 상관이 없으니 레이아웃이 안 깨지면 좋겠습니다.
혹시나 해서 tistory에도 적용을 시켜 봤는데tistory에서도 똑같은 현상이 일어납니다.
2. Firefox와 IE에서 뿌려지는 화면이 조금 다릅니다.
제가 사용하는 브라우저가 FF와 IE인데 출력되는 이미지가 조금 다른것 같습니다. 글자크기도 그렇고 search탭을 이동할 때 보니 같은 값을 주었는데도 FF와 IE에서 나타나는 위치가 틀리더라구요. 물론 J.Parker님의 블로그는 모든것이 정상입니다.
3. 스킨의 콘텐츠부분의 폭이 500px인데 500px의 그림을 올려도 오른쪽 끝이 조금 잘립니다.
Google adsense를 300px와 200px를 나란히 올려도 200px의 오른쪽 끝 부분이 잘리구요. 본문이 500px가 아닌듯(?) 합니다. 콘텐츠 부분을 550 오른쪽 사이드바를 왼쪽 사이드바와 같은 폭으로 바꾸고 싶습니다. 하지만 섣불리 손을 못 대겠네요.
4. 태그들 중 영어로 된 태그를 클릭하면 해당글을 찾는데 한글로 된 태그는 글을 찾지 못하고 태그목록으로 가버리는 군요.
--> 이 문제는 호스팅 업체에 문의해서 해결했습니다.
CheckURL off 하여 해결해드렸습니다. 차후 에러가 있을시 언제든지 재문의해주세요 ^-^
이렇게 답변을 주시네요^^ 저게 무슨 역할을 하는지는 잘 모르겠습니다~
글의 분류 또한 한글로 해 놓으면 아무런 데이터를 찾지를 못합니다. 상단의 search 또한 한글로 검색을 하면 나타나지 않습니다. 이것은 스킨상의 문제가 아니고 다른 문제인 듯 합니다. 가만히 보니 이것도 아주 큰 문제점 같습니다. 첫번째 문제점 보다 이게 더 큰 문제네요 -ㅁ- ㅠ_ㅠ
또 다른 문제점이 있었던 것 같은데 지금 잘 기억이 안나네요 -_-;;
이번에 스킨을 수정하기 위해 태터툴즈에 가서 스킨의 구조에 대해 공부도 하고 J.Parker님의 댓글도 유심히 보았지만 제가 적용을 할 수 있는 부분이 없었습니다. J.Parker님의 search란 위치와 똑같이 style.css를 복사해서 옮겨보아도 그대로였구요. 도대체 이유를 알 수 가 없습니다.
제 style.css부분의 소스입니다.
@charset "utf-8";
/* 반드시 들어가야 하는 스타일 시작 */
/* 본문 공통 */
body{
font:0.70em/1.5 Dotum, Verdana, AppleGothic, Sans-serif;
background-color:#47494b;
color:#555;
padding:0;
margin:0;
}
a:link { color:#555; text-decoration:none;}
a:visited { color:#555; text-decoration:none;}
a:hover { color:#000; text-decoration:none;background:url(images/dot_line_over.gif) bottom no-repeat;}
a:active { color:#555; text-decoration:none;}
/* 페이징 - 현재 페이지 */
.selected { font-weight:bold; color:#f30;}
.no-more-prev,
.no-more-next { color:#ccc;}
/* 카테고리 - 이미지 버튼 */
.ib { cursor:pointer;}
/* 카테고리 - 트리 셀 */
.branch3 { cursor:pointer;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
.c_cnt { font:7pt tahoma; color:#999;}
/* 달력 월 표시 */
.cal_month { font:0.95em Verdana, Helvetica, Arial, Gulim, sans-serif; height:18px; font-weight:bold;}
/* 달력 요일 표시(th 영역) */
.cal_week1 { font:0.95em Dotum, Arial, sans-serif; height:18px; font-weight:normal;}
/* 달력 일요일 표시(th 영역) */
.cal_week2 { font:0.95em Dotum, Arial, sans-serif; color:#BF8E7D; }
/* 달력 Week(tr 영역) */
.cal_week { background-color:#E3DFD7; height:25px;}
.cal_current_week { background-color:#DAD5CB;}
/* 달력 Day(td 영역) */
.cal_day { font:0.95em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#999; text-align:center;}
/* 달력 Day, 일요일 (td 영역) */
.cal_day_sunday { color:#BF8E7D !important;}
.cal_day_sunday a { color:#BF8E7D !important;}
/* 달력 지난 달 날짜 표시(td) */
.cal_day1 { color:#ccc;}
/* 달력 다음 달 날짜 표시(td) */
.cal_day2 { color:#ccc;}
/* 달력 이번 달 날짜 표시(td) */
.cal_day3 { color:#999;}
/* 달력 오늘 날짜 표시(td) */
.cal_day4 { color:#555; text-decoration:underline;}
/* 달력 글쓴 날 링크 스타일 */
a.cal_click:link { color:#777 !important; font-weight:bold;}
a.cal_click:visited { color:#777 !important; font-weight:bold;}
a.cal_click:hover { color:#f30; font-weight:bold;}
/* 종류별 코멘트 [##_rp_rep_class_##] */
.rp_general { }
.rp_admin { }
.rp_secret { }
/* 종류별 코멘트 [##_guest_rep_class_##] */
.guest_general { }
.guest_admin { }
/* 비밀 댓글 (로그아웃시 비밀글 표현) */
.hiddenComment {}
/* 이미지 아래 캡션 스타일 */
.cap1 { color:#999; text-align:center;}
/* 그림 */
.imageblock { border:0px solid #fff; padding:5px; margin:5px 0;}
/* 왼쪽 */
.left { }
/* 가운데 */
.center { }
/* 오른쪽 */
.right { }
/* 그림 2개 배치 */
.dual { margin-bottom:5px; padding:0px;}
/* 그림 3개 배치 */
.triple { margin-bottom:5px; padding:0px;}
/* 본문 - more / less */
.moreless_fold { background:url(images/iconMore.gif) top left no-repeat; padding-left:20px; color:#000;}
.moreless_top { background:url(images/iconLess.gif) top left no-repeat; padding-left:20px; color:#000;}
.moreless_body { }
.moreless_bottom { background:url(images/iconLess.gif) top right no-repeat; padding-right:20px; color:#999; text-align:right;}
/* 키워드 */
.key1 { cursor: help; }
a.key1 { color:#555; text-decoration:none;background:url(images/dot_line.gif) bottom no-repeat;}
a:hover.key1 { color:#000; text-decoration:none;background:url(images/dot_line_over.gif) bottom no-repeat;}
/* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */
hr { display:none;}
img { border:0;}
h1, h2, h3, h4 { margin:0; padding:0;}
h1 { font-size:1.8em;}
h2 { font-size:1.4em;}
h3 { font-size:1.2em;}
h4 { font-size:1em;}
input { border:1px solid #aaa;}
textarea { border:1px solid #aaa;}
/* 블로그 레이아웃 */
#tt-body-page #bodyContainer {border-left:25px solid #999896;}
#tt-body-notice #bodyContainer {border-left:25px solid #C56B9A;}
#tt-body-entry #bodyContainer {border-left:25px solid #3986AE;}
#tt-body-category #bodyContainer {border-left:25px solid #E8AB00;}
#tt-body-tag #bodyContainer {border-left:25px solid #D86510;}
#tt-body-search #bodyContainer {border-left:25px solid #40A6A8;}
#tt-body-archive #bodyContainer {border-left:25px solid #40A6A8;}
#tt-body-location #bodyContainer {border-left:25px solid #3AADA8;}
#tt-body-keylog #bodyContainer {border-left:25px solid #8B96A5;}
#tt-body-guestbook #bodyContainer {border-left:25px solid #91AC3C;}
/* ***** Header ***** */
#bodyHeader
{
height:80px;
}
.bodySubLine
{
clear:both;
line-height:1px;
margin-left:25px;
border-bottom:1px solid #8E8C86;
}
#bodyHeader .topMenu
{
float:left;
}
#bodyHeader .topMenu img
{
border:0px solid;
}
#bodyHeader .topMenu h1
{
color:#318796;
margin:0px 0px 3px 22px;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:28px;
color:#006699;
font-weight: bold;
text-transform: uppercase;
}
#bodyHeader .topMenu h1 a
{
color:#c7c7c7;
text-decoration:none;
}
#bodyHeader .topMenu h1 a:hover
{
color:#e7e7e7;
text-decoration:none;
}
#bodyHeader .topMenu .blogMenu
{
text-align:left;
clear:both;
color:#999;
font:8pt tahoma;
margin:0px 0px 0px 25px;
}
#bodyHeader .topMenu .blogMenu a
{
color:#c7c7c7;
text-decoration:none;
font:7pt tahoma;
}
#bodyHeader .topMenu .blogMenu a:hover
{
color:#e7e7e7;
text-decoration:none;
font:7pt tahoma;
}
#bodyHeader .search
{
float:right;
text-align:right;
color:#999;
padding-right:8px;
}
#bodyHeader .search .heightLineSearch
{
height:54px;
}
#bodyHeader .search input
{
width:130px;
height:15px;
border:0px solid;
background-color:#777;
margin:0px 0px 5px 0px;
color:#bbb;
font:11px dotum;
}
#bodyHeader .search .submit
{
width:43px;
height:15px;
border:0px solid;
background-color:#47494b;
padding-top:2px;
color:#999;
font:7pt tahoma;
}
#bodyContainer
{
background-color:#d7d2c3;
}
#leftbar
{
position:absolute;
top:92px;
left:3px;
width:19px;
}
#rightSidebar
{
position:absolute;
top:92px;
left:785px;
width:150px;
overflow:hidden;
}
#container
{
width:750px;
background-color:#f3f1ed;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
#content
{
float:right;
width:550px;
overflow:hidden;
background-color:#f3f1ed;
}
#sidebar
{
float:left;
width:200px;
background-color:#ebe8e1;
}
#footer
{
clear:both;
height:10px;
}
*html #footer
{
clear:both;
height:10px;
}
/* ***** sidebar ***** */
#sidebar { }
#sidebar a
{
text-decoration:none;
color:#555;
}
#sidebar a:hover
{
text-decoration:none;
color:#000;
}
#sidebar ul { padding:0; margin:0; list-style:none;}
#sidebar li { background:url(images/bul.gif) 0 6px no-repeat; padding-left:7px;}
#sidebar .sidebaList ul {padding:0px 8px;}
#sidebar .sidebaList li { background:url(images/bul.gif) 0 6px no-repeat; padding-left:7px; margin-top:2px;}
#sidebar h3
{
font:7pt tahoma;
text-align:right;
font-weight:bold;
color:#555;
border-bottom:0px dotted #bbb;
margin:8px 0px 5px 0px;;
text-transform: uppercase;
padding:0px 5px 2px 0px;
background:url(images/dot_line.gif) bottom no-repeat;
}
#sidebar .cnt
{
font:7pt Tahoma, Helvetica, Arial, Gulim, sans-serif;
color:#999;
}
#sidebar .date { font:0.9em Tahoma, Helvetica, Arial, Gulim, sans-serif; color:#888;}
#sidebar .name { font:0.95em Dotum, Arial, sans-serif; color:#888;}
#sidebar .blogImage img { width:184px; padding:8px; background-color:#e3e0d5; margin-bottom:8px;}
#sidebar .blogDesc { color:#555; padding:0px 5px; font-size:11px; line-height:1.2em; letter-spacing:-1px;}
#sidebar .userID { color:#555; background:url(images/iconBy.gif) 3px 0 no-repeat; padding-left:22px; letter-spacing:-1px;}
#sidebar .notice { margin:10px 0; padding:0;}
#sidebar .notice li { border-bottom:1px dotted #ddd; margin:0 0 2px 0; padding:0 0 1px 0; background:none;}
#sidebar .notice a:link,
#sidebar .notice a:visited { background:url(images/iconNotice.gif) 0 0 no-repeat; padding:1px 0 5px 27px;}
#sidebar .category_list
{
padding:3px 8px 0px 8px;
font-size:11px;
}
#sidebar .category .click { text-decoration:none; background:url();}
#sidebar .category .category_list li { background:none;}
#sidebar .category .category_list li ul li { background:url(images/bul.gif) 0 6px no-repeat; padding-left:10px;}
#sidebar .category .category_list li ul li ul li { background:none; border-left:1px dotted #ccc; padding-left:6px; margin-left:2px;}
#sidebar .category .category_list li ul li ul li a{ color:#999;}
#sidebar .tagbox ul
{
text-align:justify;
padding:0px 5px 0px 5px;
}
#sidebar .tagbox li
{
background:none;
display:inline;
list-style:none;
white-space:nowrap;
padding:0px;
}
#sidebar .tagbox a { letter-spacing:-1px;padding:1px;}
#sidebar .tagbox li .cloud1 { font-weight:bold; font-size:11px; color:#a2348f;}
#sidebar .tagbox li .cloud2 { font-weight:bold; font-size:11px; color:#5a5194;}
#sidebar .tagbox li .cloud3 { font-weight:bold; font-size:11px; color:#7870ab;}
#sidebar .tagbox li .cloud4 { font-size:11px; color:#666;}
#sidebar .tagbox li .cloud5 { font-size:11px; color:#888;}
#sidebar .tagbox a:hover { text-decoration:none; color:#000;}
#sidebar .recentComment {overflow:hidden;}
#sidebar .recentTrackback {overflow:hidden;}
#sidebar .archive { font-family:verdana;}
#sidebar .calendar { font-family:verdana; }
#sidebar .calendar_list { width:95%;margin:5px auto;}
#sidebar .botton
{
text-align:center;
margin:5px 0px 10px 0px;
}
#sidebar .feedcount
{
text-align:center;
margin:10px 0px 0px 0px;
}
/* ***** right sidebar ***** */
#rightSidebar
{
padding:0px 5px 5px 5px;
border:5px solid #e3e0d5;
background-color:#EBE8E1;
}
#rightSidebar a
{
text-decoration:none;
color:#555;
}
#rightSidebar a:hover
{
text-decoration:none;
color:#000;
}
#rightSidebar ul { padding:0; margin:0; list-style:none;}
#rightSidebar li { background:url(images/bul.gif) 0 6px no-repeat; padding-left:7px;margin-top:2px;}
#rightSidebar h3
{
font:7pt tahoma;
text-align:left;
font-weight:bold;
color:#555;
border-bottom:0px dotted #bbb;
margin:8px 0px 5px 0px;;
text-transform: uppercase;
padding:0px 5px 2px 0px;
background:url(images/dot_line.gif) bottom no-repeat;
}
#rightSidebar .cnt
{
font:7pt Tahoma, Helvetica, Arial, Gulim, sans-serif;
color:#999;
}
#rightSidebar .tagbox ul
{
text-align:justify;
padding:0px 3px 0px 0px;
}
#rightSidebar .tagbox li
{
background:none;
display:inline;
list-style:none;
white-space:nowrap;
padding:0px;
}
#rightSidebar .tagbox a { letter-spacing:-1px;padding:1px;}
#rightSidebar .tagbox li .cloud1 { font-weight:bold; font-size:11px; color:#a2348f;}
#rightSidebar .tagbox li .cloud2 { font-weight:bold; font-size:11px; color:#5a5194;}
#rightSidebar .tagbox li .cloud3 { font-weight:bold; font-size:11px; color:#7870ab;}
#rightSidebar .tagbox li .cloud4 { font-size:11px; color:#666;}
#rightSidebar .tagbox li .cloud5 { font-size:11px; color:#888;}
#rightSidebar .tagbox a:hover { text-decoration:none; color:#000;}
#rightSidebar .botton
{
text-align:center;
margin:5px 0px 5px 0px;
}
/* ***** content ***** */
#content .keylog,
#content .localog,
#content .taglog,
#content .entryNotice,
#content .entryProtected,
#content .entry { border:5px solid #EDEBE6; padding:5px; margin:10px 10px 10px 10px;}
#content .entryNotice .entryInfo,
#content .entryProtected .entryInfo,
#content .entry .entryInfo
{
background-color:#fff;
padding:2px 0px 2px 4px
}
#content .guestbook,
#content .searchList { border:5px solid #EDEBE6; padding:5px; margin:10px 10px 0px 10px; width:510px;}
#content .searchRplist { border:5px solid #EDEBE6; padding:5px; margin:10px 10px 10px 10px; width:510px;}
#content .keylog h3,
#content .localog h3,
#content .taglog h3,
#content .guestbook h3,
#content .searchList h3,
#content .searchRplist h3 { background:url(images/dot_line.gif) bottom no-repeat; margin-bottom:10px; color:#222;}
#content .searchList h3 .keycolor,
#content .searchRplist h3 .keycolor
{
color:#999896;
}
.searchList ol,
.searchRplist ol { list-style:none; padding:5px; margin:0;}
.searchList li,
.searchRplist li { border-bottom:1px solid #e7e7e7; padding-bottom:2px; margin-bottom:4px;}
.searchList .date,
.searchRplist .date { font:0.95em Verdana, Helvetica, Arial, Gulim, sans-serif; margin-right:10px; }
.searchList .cnt
{
font:7pt tahoma;
color:#999;
}
.searchRplist .name { font:0.95em Dotum, Arial, sans-serif; color:#999; padding-left:8px;}
.searchList a,
.searchRplist a
{
text-decoration:none;
color:#555;
}
.searchList a:hover,
.searchRplist a:hover
{
text-decoration:none;
color:#000;
}
.keylog ul { padding:5px; margin:0; text-align:justify;}
.keylog li { display:inline;}
.keylog a { color:#555; text-decoration:none;}
.keylog a:hover { color:#000; text-decoration:none;background:url(images/dot_line_over.gif) bottom no-repeat;}
.localog .spot { color:#777;background:url(images/iconIndentArrow_local.gif) 5px 0 no-repeat; padding-left:20px; margin-top:5px;}
.localog .info { background:url(images/iconIndentArrow_localinfo.gif) 5px 3px no-repeat; padding-left:15px; margin-top:2px;}
.localog a { color:#555;text-decoration:none;background:url(images/dot_line.gif) bottom no-repeat;}
.localog a:hover { color:#000; text-decoration:none;background:url(images/dot_line_over.gif) bottom no-repeat;}
.taglog ul { padding:5px; margin:0; text-align:justify;line-height:18px;}
.taglog li { display:inline;list-style:none;}
.taglog a:hover { color:#000;}
.taglog li .cloud1 { color:#a2348f; font-weight:bold; font-size:11px;}
.taglog li .cloud2 { color:#5a5194; font-weight:bold; font-size:11px;}
.taglog li .cloud3 { color:#7870ab; font-weight:bold; font-size:11px;}
.taglog li .cloud4 { color:#666; font-size:11px;}
.taglog li .cloud5 { font-size:11px; color:#999; }
.guestWrite
{
padding:0px 5px 0px 5px;
}
.guestWrite h4{
border-bottom:5px solid #ECEAE6;
font-size:14px;
color:#888;
margin:0px 0 5px 0;
padding:0px 0px 5px 0px;
margin:0px 0px 5px 0px;
}
.guestWrite p{
padding:2px;
margin:0;
}
.guestWrite input{
font:9pt verdana, dotum;
border:1px solid #ddd;
width:100px;
height:16px;
}
.guestWrite .inputP{
font:9pt verdana;
border:1px solid #ddd;
width:100px;
height:16px;
margin:0px 0px 0px 22px;
}
*html .guestWrite .inputP{
margin:0px 0px 0px 20px;
}
.guestWrite .namePassword,
.guestWrite .homepageSecret
{
margin:0px 0px 3px 0px;
}
*html .guestWrite .namePassword,
*html .guestWrite .homepageSecret
{
margin:0px 0px 2px 0px;
}
.guestWrite .homepage{
width:273px;
font:8pt verdana;
}
.guestWrite .submit{
border:1px solid #ddd;
background-color:#ECEAE6;
height:25px;
width:501px;
color:#333;
margin-top:4px;
font:7pt tahoma;
letter-spacing:2px;
}
.guestWrite label{
font:10px Verdana;
}
.guestWrite textarea{
width:499px;
height:90px;
border:1px solid #ddd;
overflow:visible;
font:9pt dotum;
}
*html .guestWrite .submit{
width:501px;
margin-top:3px;
}
*html .guestWrite textarea{
width:497px;
}
.guestWrite .checkbox{
border:none;
padding:0;
margin:0px 0px 0px 93px;
width:13px;
border:0px solid;
vertical-align:bottom;
}
.guestList { padding:5px 4px 0 5px;margin-top:4px;}
.guestList p { margin:3px 0 0 0; padding:0;}
.guestList ol,
.guestList ul { margin:0; padding:0; list-style:none;}
.guestList .date { font:7pt tahoma, Verdana, Helvetica, Arial, Gulim, sans-serif; color:#777;}
.guestList .name { font-weight:bold;}
.guestList .guest_admin .name a
{
color:#000;
background:url(images/dot_line.gif) bottom no-repeat;
}
.guestList .guest_general .name
{
color:#999;
}
.guestList .guest_general .name a
{
color:#777;
background:url(images/dot_line.gif) bottom no-repeat;
}
.guestList .guest_secret .name{
color:#C59F9A;
}
.guestList .guest_secret .name a
{
color:#C59F9A;
background:url(images/dot_line.gif) bottom no-repeat;
}
.guestList .guest_secret p{
color:#B3998A;
font-weight:normal;
}
.guestList .guest_admin .name a:hover,
.guestList .guest_general .name a:hover,
.guestList .guest_secret .name a:hover
{
background:url(images/dot_line_over.gif) bottom no-repeat;
}
.guestList ol li { padding:5px 0px;background:url(images/dot_line.gif) top no-repeat; overflow:hidden;margin-top:1px;}
.guestList li ul li
{
margin:5px 0px 0px 25px;
padding:5px 5px 5px 5px;
background:none #ECEAE6;
border:1px solid #E8E6E2;
}
.guestList .control a:hover
{
text-decoration:none;
background:none;
}
.guestList .control a img
{
border-top:0px solid;
margin-left:0px;
}
/* entry */
.entryNotice h2,
.entryProtected h2,
.entry h2 { background:url(images/dot_line.gif) bottom no-repeat; font-size:1.2em; line-height:1.2em; padding-bottom:5px;margin-bottom:5px;}
.titleWrap { margin-bottom:10px;}
.titleWrap .category a { font:1em Dotum, Arial, sans-serif; color:#333; margin-right:6px;}
.titleWrap .date { font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#888;}
.entryProtected p.text { background:url(images/imgProtected.gif) no-repeat ; padding-left:50px;}
.entryProtected input { width:200px;}
.entryProtected .submit { width:50px; padding-top:2px; height:20px; background-color:#ccc;}
.article { width:500px; margin:5px 5px 10px 5px; overflow:hidden;}
.article a:link { color:#538199; text-decoration:none;background:url(images/dot_line.gif) bottom no-repeat;}
.article a:visited { color:#538199; text-decoration:none;background:url(images/dot_line.gif) bottom no-repeat;}
.article a:hover { color:#538199; text-decoration:none;background:url(images/dot_line_over.gif) bottom no-repeat;}
.article a:active { color:#538199; text-decoration:none;background:url(images/dot_line.gif) bottom no-repeat;}
.article dt { text-decoration:underline;}
.article dd { margin-left:20px; padding-bottom:10px;}
.article blockquote { background:url(images/iconBlockquote.gif) top left no-repeat; padding-left:25px; margin:10px 20px;}
.tagTrail { padding:5px 5px 5px 40px; background:url(images/entryTag.gif) center left no-repeat; clear:both;}
.tagTrail a
{
margin-right:2px;
}
.tagText { display:none;}
.actionTrail
{
background:url(images/dot_line.gif) top no-repeat;
padding:5px 5px;
font:8pt tahoma;
clear:both;
}
.actionTrail .cnt
{
font:7pt tahoma;
color:#999;
}
.trackback
{
border-top:0px solid #ddd;
padding:5px;
margin-bottom:0px;
overflow:hidden;
}
.trackback a
{
text-decoration:none;
color:#555;
}
.trackback a:hover
{
text-decoration:none;
color:#000;
}
.trackback h3
{
font:7pt tahoma;
color:#555;
border:4px solid #e7e7e7;
background-color:#f7f7f7;
margin:0px 0px 5px 0px;
padding:4px 0px 4px 0px;
letter-spacing:1px;
text-align:center;
}
.trackback h3 span
{
cursor:pointer;
}
.trackback h4 { font:11px dotum; font-weight:normal; margin:0;}
.trackback ol { margin:0; padding:0; list-style:none;}
.trackback li { background:url(images/dot_line.gif) top no-repeat; padding:5px 0px 5px 0px;}
.trackback .from
{
color:#777;
}
.trackback .name
{
color:#000;
}
.trackback .date { font:7pt tahoma, Verdana, Helvetica, Arial, Gulim, sans-serif; color:#777;}
.trackback p
{
font:11px Dotum, Arial, sans-serif;
color:#888;
margin:3px 0 0 0;
padding:0;
letter-spacing:0px
}
.trackback a.delete { background:url(images/iconDelete.gif) left top no-repeat; padding-left:8px; text-decoration:none;}
.trackback a.delete span { display:none;}
.comment
{
border-top:0px solid #ddd;
padding:0px 5px 5px 5px;
margin-bottom:4px;
overflow:hidden;
}
.comment p { margin:5px 0 0 0; padding:0;}
.comment h3 { display:none;}
.comment ol,
.comment ul { margin:0; padding:0; list-style:none;}
.comment .date { font:7pt tahoma, Verdana, Helvetica, Arial, Gulim, sans-serif; color:#777;}
.comment .name { font-weight:bold;}
.comment .rp_admin .name a
{
color:#000;
background:url(images/dot_line.gif) bottom no-repeat;
}
.comment .rp_general .name
{
color:#999;
}
.comment .rp_general .name a
{
color:#777;
background:url(images/dot_line.gif) bottom no-repeat;
}
.comment .rp_secret .name{
color:#C59F9A;
}
.comment .rp_secret .name a
{
color:#C59F9A;
background:url(images/dot_line.gif) bottom no-repeat;
}
.comment .rp_secret p{
color:#B3998A;
font-weight:normal;
}
.comment .rp_admin .name a:hover,
.comment .rp_general .name a:hover,
.comment .rp_secret .name a:hover
{
background:url(images/dot_line_over.gif) bottom no-repeat;
}
.comment ol li { padding:5px 0px;background:url(images/dot_line.gif) top no-repeat;}
.comment li ul li
{
margin:5px 0px 0px 25px;
padding:5px 5px 5px 5px;
background:none #ECEAE6;
border:1px solid #E8E6E2;
}
.comment .control a:hover
{
text-decoration:none;
background:none;
}
.comment .control a img
{
border:0px solid;
margin-left:0px;
}
.commentcode{
color:#888;
border:0px solid #e7e7e7;
border-left:5px solid #e3e3e3;
padding:5px 5px 4px 5px;
margin:3px 0px 5px 0px;
background-color:#f1efec;
}
.commentcode a{
color:#555;
text-decoration:none;
}
.commentcode a:hover{
color:#000;
text-decoration:none;
}
.commentWrite
{
padding:0px;
margin-top:5px;
background:url(images/dot_line.gif) top no-repeat;
}
.commentWrite h4{
border-bottom:5px solid #ECEAE6;
font-size:14px;
color:#888;
margin:5px 0;
padding:5px 0px 5px 0px;
margin:0px 0px 5px 0px;
}
.commentWrite input{
font:9pt verdana, dotum;
border:1px solid #ddd;
width:100px;
height:16px;
margin-left:0px;
}
.commentWrite .inputP{
font:9pt verdana;
border:1px solid #ddd;
width:100px;
height:16px;
margin:0px 0px 0px 22px;
}
*html .commentWrite .inputP{
margin:0px 0px 0px 20px;
}
.commentWrite .namePassword,
.commentWrite .homepageSecret
{
margin:0px 0px 3px 0px;
}
*html .commentWrite .namePassword,
*html .commentWrite .homepageSecret
{
margin:0px 0px 2px 0px;
}
.commentWrite .homepage{
width:273px;
font:8pt verdana;
}
.commentWrite .submit{
border:1px solid #ddd;
background-color:#ECEAE6;
height:25px;
width:500px;
color:#333;
margin-top:4px;
font:7pt tahoma;
letter-spacing:2px;
}
.commentWrite label{
font:10px Verdana;
}
.commentWrite textarea{
width:498px;
height:90px;
border:1px solid #ddd;
overflow:visible;
font:9pt dotum;
}
*html .commentWrite .submit{
width:501px;
margin-top:3px;
}
*html .commentWrite textarea{
width:497px;
}
.commentWrite .checkbox{
border:none;
padding:0;
margin:0px 0px 0px 90px;
width:13px;
border:0px solid;
vertical-align:bottom;
}
.paging
{
margin:10px 11px 5px 11px;
padding:5px 5px 5px 5px;
text-align:center;
font:7pt tahoma;
color:#999;
background-color:#fbfbfb;
}
.paging .numbox { border-left:1px solid #ccc; padding-left:3px; margin:0px 5px;}
.paging a.num { border-right:1px solid #ccc; padding:0px 7px 0px 6px; margin:0px;}
.paging a.no-more-prev
{
text-decoration:none;
color:#999;
}
.paging a.no-more-next
{
text-decoration:none;
color:#999;
}
.paging a
{
text-decoration:none;
color:#555;
}
.paging a:hover
{
text-decoration:none;
color:#000;
}
.paging .selected
{
color:#996A66;
font-weight:bold;
text-decoration:none;
margin-bottom:1px;
}
.paging .interword
{
font:7pt tahoma;
border-right:1px solid #ccc; padding:0px 5px 0px 4px; margin-right:0px;
}
/* ***** footer ***** */
#bodyFooter
{
clear:both;
height:75px;
}
#bodyFooter .counter
{
text-align:center;
font:7pt tahoma;
padding:0px 0px 0px 0px;
margin:8px 0px 0px 0px;
letter-spacing:1px;
}
#bodyFooter .counter ul
{
list-style:none;
padding:0px 0px 0px 5px;
margin:0px 0px 0px 0px;
}
#bodyFooter .counter ul li
{
list-style:none;
background:none;
display:inline;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
color:#aaa;
}
#bodyFooter .copyright
{
text-align:center;
padding:0px 5px 0px 0px;
margin:5px 0px 0px 0px;
font:7pt tahoma;
color:#aaa;
letter-spacing:1px;
}
#bodyFooter .copyright a { color:#ccc;}
#bodyFooter .copyright a:hover { color:#fff;}
#bodyFooter .copyright .banner
{
margin-top:4px;
}
#bodyFooter .copyright .banner a
{
margin-left:4px;
}
/* add style */
.article .tagrelation
{
margin-top:15px;
clear:both;
}
.article .tagrelation fieldset
{
border:1px solid #D9D5C7;
}
.article .tagrelation fieldset legend
{
font:7pt tahoma;
font-weight: bold;
color:#948965;
text-transform: uppercase;
}
.article .tagrelation ul
{
padding:5px 0 3px 6px;
margin:0px 5px 5px 5px;
list-style:none;
background-color:#F9F8F7;
}
.article .tagrelation li
{
background:url(images/bul.gif) 0 6px no-repeat;
padding-left:7px;
}
.article .tagrelation li a
{
background:none;
color:#948965;
}
.article .tagrelation li a:hover
{
color:#000;
text-decoration:none;
background:url(images/dot_line_over.gif) bottom no-repeat;
}
그런데 제가 쓰는 style.css가 J.Parker님의 style.css와는 조금 다른것 같습니다.
bodyhead search부분의 것만 보아도 다르고 J.Parker님이 다른 분께 설명을 할 때 사용하신 형식도 제 스킨에서의 style.css와 조금 다릅니다. 태터툴즈와 텍스트큐브사이의 차이인가요? 이것도 잘 모르겠습니다.
search부분의 J.Parker님의 표기형식
#bodyHeader .search
{
position:absolute;
top:0px;
left:785px;
width:170px;
overflow:hidden;
}
#bodyHeader .search .heightLineSearch
{
height:38px;
}
*html #bodyHeader .search .heightLineSearch
{
height:37px;
}
#bodyHeader .search input
{
width:170px;
height:15px;
border:0px solid;
background-color:#777;
margin:0px 0px 5px 0px;
color:#bbb;
font:11px dotum;
}
#bodyHeader .search .submit
{
width:43px;
height:15px;
border:0px solid;
background-color:#47494b;
padding-top:2px;
color:#999;
font:7pt tahoma;
}
위의 제 스킨이랑 좀 다르죠?
J.Parker님의 답변들 중에 한가지 잘 이해가 안가는게 있습니다.
우선 css에서 모두 수정했다고 해서 본문의 내용이나 이미지가 자동으로 변경되는 것은 아닙니다. 새로 저장을 해야 합니다.
또한, index.xml에서 폭 조절을 하셨다면, 스킨을 다시 선택->저장 하셔야만 변경된 폭으로 저장 됩니다.
미투데이 띠용님의 조언
J.Parker님의 말씀처럼 index.xml라는 파일을 먼저 수정하셔야 한답니다. 그 파일을 실행해서 보시면 이미지의 폭을 결정하는 부분이 있는데요, 그 부분에서 수치를 조절하고 저장하신다음 다시 서버에 올려두시고 난 뒤에 블로그에 다시 접속하셔서 관리자 모드로 들어간 다음에 블로그 스킨(지금 쓰고 계시는것이요)을 다시 선택해서 저장하라는 말씀이신거 같네요^^
띠용님 감사합니다^^
css에서 수정을 했다고 자동으로 변경 되는게 아니라 다시 저장을 해야 한다고 하셨는데 무얼 어떻게 다시 저장을 해야 하는건지 모르겠습니다. 스킨 편집에서 style.css수정한 후 저장하기 외에 또 다른 저장을 해야 하나요? -_-;;
도움의 손길을 바랍니다.
댓글을 달아 주세요