티스토리 블로그 (설치형블로그)를 시작해보려고 합니다.
프로그램 경력은 없는 완전한 초보이구요...
하나하나 체득해보려고 일단 기존에 제공되는 스킨을 편집해서 원하는대로 만들어보려 합니다.
그런데 벌써 한계에 부딛혔습니다. ㅠ
말보다는 직접 보시는게 문제 이해에 쉬우실 것 같네요.
http://junezel.tistory.com 입니다.
보시면 원 스킨의 우측에 sidebar를 있던 것을, 낑낑데고 없앴습니다.
그런데, 다른 영역은 모두 해결이 된 것 같은데,
본문영역 (사진 + 글)은 그대로 sidebar 영역을 인식하고 있는 것 같습니다.
(글 작성 시 가운데로 해도, 결과창은 가운데가 가지 않네요...)
html / css 지식이 없어서.. 도저히 해결을 못하겠네요.
도와주세요~~~~ 내공 있는 것 팍팍~~~
해당 html / css를 첨부합니다.
==================================================================
이건 html
==================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link rel="stylesheet" media="print" type="text/css" href="./images/print.css" />
<link rel="shortcut icon" href="[##_blog_link_##]favicon.ico" />
<meta http-equiv="imagetoolbar" content="no" />
<title>[##_title_##] :: [##_page_title_##]</title>
<script type="text/javascript" src="./images/pageOnload.js"></script>
<script type="text/javascript" src="./images/imageReplace.js"></script>
<script type="text/javascript">
PageOnload.add("bgPNGFix", "footer");
//로고를 .png 로 할 경우
//PageOnload.add("bgPNGFix", "bTit");
</script>
</head>
<body id="[##_body_id_##]">
<s_t3>
<div id="wrapper1">
<div id="wrapper2">
<div id="header">
<div class="blogTitle">
<!--로고를 텍스트로 할 경우 -->
<h1 class="tit"><a href="[##_blog_link_##]">[##_title_##]</a></h1>
<div class="desc">[##_desc_##]</div>
<!--로고를 이미지로 할 경우-->
<!--
<button id="bTit" onclick="location.href='[##_blog_link_##]'" class="btn_title" title="[##_title_##]"></button>
-->
</div>
</div><!--/header-->
<div id="mBody" class="clearfix">
<div id="contentColumn">
<s_notice_rep>
<div class="entry">
<div class="subject">
<h1>[##_notice_rep_title_##]</h1>
<span class="pDate smallText">Posted [##_notice_rep_date_##]</span>
</div><!--/subject-->
<div class="article">[##_notice_rep_desc_##]</div>
</div><!--/entry-->
</s_notice_rep>
<s_article_protected>
<div class="entry">
<div class="subject">
<span class="smallText2">
[##_article_rep_date_##]
<a href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a>
</span>
<h1><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h1>
</div><!--/subject-->
<div class="protectedBody">
<p class="warn">This page has been locked by password.</p>
<p><input id="[##_article_password_##]" name="[##_article_password_##]" type="password" onkeydown="if (event.keyCode == 13) [##_article_dissolve_##]" />
<input type="button" class="submitBtn" value="Submit" onclick="[##_article_dissolve_##]" /></p>
</div>
</div><!--/entry-->
</s_article_protected>
<s_media> [##_media_content_##] </s_media>
<s_list>
<div class="searchList">
<h1>Search Results for '[##_list_conform_##]'</h1><br />
<h3>[##_list_count_##] POSTS</h3>
<ol>
<s_list_rep>
<li>
<span class="date">[##_list_rep_regdate_##]</span>
<a href="[##_list_rep_link_##]">[##_list_rep_title_##]</a>
<span class="cnt">[##_list_rep_rp_cnt_##]</span>
</li>
</s_list_rep>
</ol>
</div>
</s_list>
<s_rplist>
<div class="searchList">
<h3>[##_rplist_count_##] COMMENTS</h3>
<ol>
<s_rplist_rep>
<li>
<span class="date">[##_rplist_rep_regdate_##]</span>
<a href="[##_rplist_rep_link_##]">[##_rplist_rep_body_##]</a>
<span class="cnt">[##_rplist_rep_rp_cnt_##]</span>
<span class="name">[##_rplist_rep_name_##]</span>
</li>
</s_rplist_rep>
</ol>
</div>
</s_rplist>
<s_article_rep>
<div class="entry clear">
<div class="subject">
<h1><a href="[##_article_rep_link_##]">[##_article_rep_title_##]</a></h1>
<span class="pDate smallText">Posted [##_article_rep_date_##] by [##_article_rep_author_##]</span>
</div><!--/subject-->
<s_ad_div>
<div class="admin">
<p class="adminMenu">
<a href="[##_s_ad_m_link_##]">Modify</a>
<a href="#" onclick="[##_s_ad_m_onclick_##]">
<img src="./images/ico_nwindow.gif" alt="New window" />
</a> | ([##_s_ad_s1_label_##])→
<a href="#" onclick="[##_s_ad_s2_onclick_##]">[##_s_ad_s2_label_##]</a> |
<a href="#" onclick="[##_s_ad_t_onclick_##]">Trackback</a> |
<a href="#" onclick="[##_s_ad_d_onclick_##]">Delete</a>
</p>
</div><!--/admin-->
</s_ad_div>
<div class="article">
[##_article_rep_desc_##]
</div>
<p><s_tag_label>Tag : [##_tag_label_rep_##]</s_tag_label></p>
<div class="postInfo clearfix">
<div class="filedUnder">
Filed under : <a href="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a>
</div>
<div class="cntBtn">
<a href="#rp" onclick="[##_article_rep_rp_link_##]">
<s_rp_count>
[##_article_rep_rp_cnt_##] Comments
</s_rp_count>
</a>
<a href="#tb" onclick="[##_article_rep_tb_link_##]">
<s_tb_count>
[##_article_rep_tb_cnt_##] Trackbacks
</s_tb_count>
</a>
</div>
</div><!--/postInfo-->
<s_tb>
<div class="trackback clear">
<p class="trackbackUrl">Trackback URL : <span class="url">[##_tb_address_##]</span></p>
<s_tb_container>
<ol>
<s_tb_rep>
<li id="[##_tb_rep_id_##]">
<div>
<h2><a href="[##_tb_rep_url_##]" onclick="window.open(this.href); return false" rel="external nofollow">[##_tb_rep_title_##]</a></h2>
<span class="smallText2">Tracked from [##_tb_rep_site_##]</span>
<span class="smallText">[##_tb_rep_date_##]
<a href="#" onclick="[##_tb_rep_onclick_delete_##]; return false" class="delete">Delete</a>
</span>
<p>[##_tb_rep_desc_##]</p>
</div>
</li>
</s_tb_rep>
</ol>
</s_tb_container>
</div><!--/trackback-->
</s_tb>
<s_rp>
<div class="commentList clear">
<s_rp_container>
<ol>
<s_rp_rep>
<li id="[##_rp_rep_id_##]">
<div class="commentContent">
<h2>[##_rp_rep_name_##]</h2>
<span class="smallText">
| [##_rp_rep_date_##] |
<a href="[##_rp_rep_link_##]" class="address">PERMALINK</a> |
<a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify">EDIT</a> |
<a href="#" onclick="[##_rp_rep_onclick_reply_##]" class="write">REPLY</a> |
</span>
<p>[##_rp_rep_desc_##]</p>
</div>
</li>
<s_rp2_container>
<s_rp2_rep>
<li id="[##_rp_rep_id_##]" class="odd">
<div>
<h2>[##_rp_rep_name_##]</h2>
<span class="smallText">
| [##_rp_rep_date_##] |
<a href="[##_rp_rep_link_##]" class="address">PERMALINK</a> |
<a href="#" onclick="[##_rp_rep_onclick_delete_##]" class="modify">EDIT</a> |
</span>
<p>[##_rp_rep_desc_##]</p>
</div>
</li>
</s_rp2_rep>
</s_rp2_container>
</s_rp_rep>
</ol>
</s_rp_container>
</div><!--/commentList-->
<s_rp_input_form>
<div class="writeForm clear" style="margin-top:15px;">
<span class="smallText message">Write your message and submit</span>
<textarea name="[##_rp_input_comment_##]" cols="10" rows="5"></textarea>
<s_rp_member>
<s_rp_guest>
<div class="writer">
<label for="[##_rp_input_name_##]_[##_article_rep_id_##]">Name <span>- Required</span></label>
<input type="text" class="wName" id="[##_rp_input_name_##]_[##_article_rep_id_##]" name="[##_rp_input_name_##]" value="[##_guest_name_##]" maxlength="20" />
</div>
<div class="writer">
<label for="[##_rp_input_password_##]_[##_article_rep_id_##]">Password <span>- Required</span></label>
<input type="password" class="wPass" id="[##_rp_input_password_##]_[##_article_rep_id_##]" name="[##_rp_input_password_##]" value="" />
</div>
<div class="writer">
<label for="[##_rp_input_homepage_##]_[##_article_rep_id_##]">Homepage URI</label>
<input type="text" class="wUrl" id="[##_rp_input_homepage_##]_[##_article_rep_id_##]" name="[##_rp_input_homepage_##]" value="[##_guest_homepage_##]" />
</div>
</s_rp_guest>
<div class="writer">
<input type="checkbox" class="checkbox" id="[##_rp_input_is_secret_##]_[##_article_rep_id_##]" name="[##_rp_input_is_secret_##]" value="1" />
<label for="[##_rp_input_is_secret_##]_[##_article_rep_id_##]" class="inline">Not open to the public</label>
</div>
</s_rp_member>
<div class="submit clear">
<input type="submit" class="submitBtn smallText2" value="Submit" onclick="[##_rp_onclick_submit_##]" />
</div>
</div><!--/writeForm-->
</s_rp_input_form>
</s_rp>
</div><!--/entry-->
</s_article_rep>
<s_local>
<div class="location">
<div class="subject">
<h1>Location Log</h1>
<span class="smallText">Where my posts are related to</span>
</div>
<s_local_spot_rep>
<div class="place color[##_local_spot_depth_##]" style="padding-left: [##_local_spot_depth_##]px">[##_local_spot_##]
</div>
</s_local_spot_rep>
<s_local_info_rep>
<div class="info" style="padding-left: [##_local_info_depth_##]px">
<a href="[##_local_info_link_##]">[##_local_info_title_##]</a><br />
</div>
</s_local_info_rep>
</div>
</s_local>
<s_tag>
<div class="taglog">
<div class="subject">
<h1>Tag Cloud</h1>
<span class="smallText">Keywords with size based on popularity</span>
</div>
<ul>
<s_tag_rep>
<li>
<a href="[##_tag_link_##]" class="[##_tag_class_##]">[##_tag_name_##]</a>
</li>
</s_tag_rep>
</ul>
</div>
</s_tag>
<!--
<s_media>
<div class="media">
<div class="subject">
<h1>Media Log</h1>
<span class="smallText">Thumbnails for meida</span>
</div>
[##_media_content_##]
<h2>Media Log</h2>
</div>
</s_media>
-->
<s_guest>
<div class="guestBook">
<div class="subject">
<h1><a href="[##_guestbook_link_##]">Guest Book</a></h1>
<span class="smallText">Leave your greetings here</span>
</div>
<s_guest_input_form>
<div class="writeForm">
<span class="smallText message">Write your message and submit.</span>
<textarea name="[##_guest_textarea_body_##]" cols="10" rows="5"></textarea>
<s_guest_member>
<s_guest_form>
<div class="writer">
<label for="[##_guest_input_name_##]">Name <span>- Required</span></label>
<input type="text" class="wName" id="[##_guest_input_name_##]" name="[##_guest_input_name_##]" value="[##_guest_name_##]" maxlength="20" />
</div>
<div class="writer">
<label for="[##_guest_input_password_##]">Password <span>- Required</span></label>
<input type="password" class="wPass" id="[##_guest_input_password_##]" name="[##_guest_input_password_##]" value="" />
</div>
<div class="writer">
<label for="[##_guest_input_homepage_##]">Homepage URI</label>
<input type="text" class="wUrl" id="[##_guest_input_homepage_##]" name="[##_guest_input_homepage_##]" value="[##_guest_homepage_##]" />
</div>
</s_guest_form>
<div class="writer">
<input type="checkbox" id="[##_guest_input_is_secret_##]" name="[##_guest_input_is_secret_##]" class="checkbox" value="1" />
<label for="[##_guest_input_is_secret_##]" style="display:inline;">Not open to the public</label>
</div>
</s_guest_member>
<div class="submit">
<input type="submit" class="submitBtn smallText2" value="Submit" onclick="[##_guest_onclick_submit_##]" />
</div>
</div><!--/writeForm-->
</s_guest_input_form>
<s_guest_container>
<div class="guestList">
<ol>
<s_guest_rep>
<li id="[##_guest_rep_id_##]">
<h2>[##_guest_rep_name_##]</h2>
<span class="smallText">| [##_guest_rep_date_##] |
<a href="#" onclick="[##_guest_rep_onclick_delete_##]" class="modify">EDIT</a> |
<a href="#" onclick="[##_guest_rep_onclick_reply_##]" class="write">REPLY</a> |
</span>
<p>[##_guest_rep_desc_##]</p>
</li>
<s_guest_reply_container>
<s_guest_reply_rep>
<li id="[##_guest_rep_id_##]" class="odd">
<h2>[##_guest_rep_name_##]</h2>
<span class="smallText">| [##_guest_rep_date_##] |
<a href="#" onclick="[##_guest_rep_onclick_delete_##]" class="modify">EDIT</a> |</span>
<p>[##_guest_rep_desc_##]</p>
</li>
</s_guest_reply_rep>
</s_guest_reply_container>
</s_guest_rep>
</ol>
</div><!--/commentList-->
</s_guest_container>
</div><!--/guestBook-->
</s_guest>
<s_paging>
<div class="paging">
<a [##_prev_page_##]>« PREV </a> :
<s_paging_rep> <a [##_paging_rep_link_##]>[##_paging_rep_link_num_##]</a> : </s_paging_rep>
<a [##_next_page_##]>NEXT »</a>
</div>
</s_paging>
</div><!--/contentColumn-->
</div><!--mBody-->
<div id="footer">
<div class="copyright smallText2">
<span>
<a href="[##_blog_link_##]" >HOME</a> |
<a href="[##_blog_link_##]notice" >NOTICE</a> |
<a href="[##_taglog_link_##]">TAG LIST</a> |
<a href="[##_localog_link_##]" >LOCATION LOG</a> |
<a href="[##_guestbook_link_##]" >GUEST BOOK</a> |
<a href="[##_owner_url_##]">ADMINISTRATOR</a> |
<a href="[##_owner_url_##]/entry/post">WRITE POST</a>
</span><br />
<span>
Written by <a href="http://junezel.tistory.com" onclick="window.open(this.href); return false">junezel</a>
</span>
</div>
</div><!--/footer-->
</div><!--/wrapper2-->
</div><!--/wrapper1-->
</s_t3>
</body>
</html>
==================================================================
이건 CSS
==================================================================
@charset "utf-8";
/*/// 기본 스타일 /////////////////////*/
html {font-size: 62.5%}
body{
margin:0;
padding:0;
font:1.2em/1.5em Dotum, Verdana, AppleGothic, Sans-serif;
color:#909090;
background-image:url(./images/bg_bodyPattern.gif);
background-position:0;
background-repeat:repeat;
}
/* 공통 링크 스타일 */
a {text-decoration:none;}
a:link, a:visited { color:#91556d;}
a:hover, a:active { color:#c2889f;}
/* 기본적인 스타일 */
button { border:none; cursor:pointer;}
img {border:none;}
br {letter-spacing:0;}
h1,h2,h3,h4 {margin:0; padding:0;}
.clear {clear:both;}
/* 이미지 캡션 스타일 */
.cap1 { color:#999; text-align:center;}
/* Float 버그 */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* 레이아웃 */
#wrapper1 {background: url(./images/bg_topPattern.gif) center 0 repeat-x; height:246px;}
#wrapper2 {width:880px; margin:0 auto; position:relative;
}
#header {height:140px; background: url(./images/bg_header.gif) center 0 no-repeat; padding-top:65px; text-align:center;
background-color:#7870ab;
}
#mBody{background: url(./images/bg_content.gif) center 0 repeat-y; width:100%; clear:both; padding-top:50px;
}
#contentColumn {float:left; display:inline; width:730px; padding:0 0 0 80px;
text-align:center;}
#sideBar {float:left; display:inline; width:160px; padding:0 0 30px 50px; overflow:hidden;
}
#footer {background:url(./images/bg_footer.png) center 0 no-repeat; clear:both; width:880px; height:185px; position:relative;
}
/*/// 글꼴 /////////////////////////// */
/* 본문제목 */
h1 {
margin-bottom:0;
font:bold 1.6em gulim, Verdana, Sans-Serif;
letter-spacing:-1px;
color:#c887a8;
}
h1 a:link, h1 a:visited {color:#c887a8;}
h1 a:hover, h1 a:active {color:#b6447c;}
/* 댓글 이름 */
h2 {
margin:0 0 5px;
font:bold 1.2em dotum;
letter-spacing:-1px;
color:#acb7b6;
}
h2 a:link, h2 a:visited {color:#b77695;}
h2 a:hover, h2 a:active {color:#b6447c;}
/* 검색결과 타이틀, 사이트바 타이틀 */
h3 {
margin:0;
font:bold 1.1em arial, Verdana, Sans-Serif;
color:#999;
}
/*트랙백 타이틀 */
h4 {
margin:0;
font-size:1.2em;
}
h4 a:link, h4 a:visited {
color:#669818;
}
h4 a:hover, h4 a:active {
color:#7ab61a;
}
/* 본문 */
.article {
margin-bottom:10px;
width:520px;
overflow:hidden;
line-height:1.5em;
text-align:justify;
letter-spacing:normal;
}
.article a:link, .article a:visited {border-bottom:1px solid #333;} /*본문 링크 밑줄*/
.article a:hover, .article a:active {background-color:#000; border-bottom:1px solid #5a5a5a;}
/*작은글꼴1*/
.smallText {
font:0.75em 'Franklin Gothic Medium', myriad, tahoma;
color:#696969;
letter-spacing:0;
}
.smallText a:link, .smallText a:visited {
color:#444;
}
.smallText a:hover, .smallText a:active {
background-color:#212121;
color:#666;
}
/*작은글꼴2*/
.smallText2 {
font:0.8em 'Franklin Gothic Medium', dotum, tahoma;
letter-spacing:0;
}
/* date 부분, 밝은 글씨 */
.light { color:#ccc;}
/* === [ Header ] ================================================ */
/* /// 타이틀 //////////////////// */
/*타이틀 이미지가 삽입되는 영역*/
.blogTitle { height:120px; }
/* 타이틀 로고를 텍스트로 할 경우*/
.blogTitle h1 {
font:26px 'Trebuchet MS', Verdana, Sans-Serif;
}
.blogTitle h1 a:link, .blogTitle h1 a:visited {
color:#c0c0c0;
}
.blogTitle h1 a:hover, .blogTitle h1 a:active {
color:#eee;
}
.desc {
font-size:11px;
line-height:12px;
}
/* 타이틀 로고 이미지로 할 경우 */
/*
.btn_title {
background:url(./images/btn_title.png) 0 0 no-repeat;
width:130px;
height:47px;
}
*/
/* /// 블로그 메뉴 (Home, Notice, guest book...)//////// */
.tabMenu {
font-family:'Trebuchet MS', 'Verdana', 'Tahoma', 'Arial', sans-serif;
font-size:15px;
line-height:10px;
color:#545454;
}
.tabMenu * {
margin:0px;
padding:0px;
}
.tabMenu ul {
text-align:center;
}
.tabMenu ul li {
margin:0px 2px;
display:inline;
border:none;
border-right:1px solid black;
}
.tabMenu ul li a:link, .tabMenu ul li a:visited {
background:#222 url(./images/bg_tab.gif) repeat-x;
padding:1px 6px 5px;
font: 11px 'Franklin Gothic Medium', myriad, tahoma;
text-decoration:none;
color:#999;
}
.tabMenu ul li a:hover {
background:#000;
}
/* 활성화된 메뉴 글꼴 */
#tt-body-page .tab_page a, #tt-body-page .tab_page a:hover,
#tt-body-search .tab_page a, #tt-body-search .tab_page a:hover,
#tt-body-archive .tab_page a, #tt-body-archive .tab_page a:hover,
#tt-body-category .tab_page a, #tt-body-category .tab_page a:hover,
#tt-body-entry .tab_page a, #tt-body-entry .tab_page a:hover,
#tt-body-location .tab_location a, #tt-body-location .tab_location a:hover,
#tt-body-tag .tab_tag a, #tt-body-tag .tab_tag a:hover,
#tt-body-notice .tab_notice a, #tt-body-notice .tab_notice a:hover,
#tt-body-media .tab_media a, #tt-body-media .tab_media a:hover,
#tt-body-guestbook .tab_talk a, #tt-body-guestbook .tab_talk a:hover
{
background:black;
color:#dd568c;
}
/* 활성화된 메뉴 탭 스타일 */
#tt-body-page .tabMenu ul li.tab_page,
#tt-body-search .tabMenu ul li.tab_page,
#tt-body-archive .tabMenu ul li.tab_page,
#tt-body-category .tabMenu ul li.tab_page,
#tt-body-entry .tabMenu ul li.tab_page,
#tt-body-location .tabMenu ul li.tab_location,
#tt-body-tag .tabMenu ul li.tab_tag,
#tt-body-notice .tabMenu ul li.tab_notice,
#tt-body-guestbook .tabMenu ul li.tab_talk
{
background:none;
}
/* === [ Content Column ] ========================================= */
/* /// 검색결과 리스트 //////////////////// */
.searchList {
margin-bottom:50px;
}
.searchList ol {
margin:0;
padding:0;
list-style:none;
}
.searchList ol li {
border-bottom:1px solid #141414;
}
/* /// 보호글 ///////////////////////////// */
.protectedBody {
height:150px;
text-align:center;
}
.protectedBody .warn {
margin-top:30px;
}
.protectedBody input.submitBtn {
width:50px;
height:19px;
}
/*/// 컨텐츠 /////////////////////////////// */
/* 관리자 메뉴 */
.admin {
margin-bottom:30px;
}
.adminMenu {
background-color:#111;
padding:5px;
font-size:0.9em;
border:1px dashed #333;
}
/* 포스트 제목 영역 */
.subject {
margin-bottom:20px;
}
/* 등록 날짜 */
.subject .pDate {
padding-left:3px;
}
/* 본문 영역 */
.article {
padding:10px 0 20px;
}
/* 인용구 스타일 */
blockquote {
margin:20px 0;
padding:5px 10px;
font-size:0.9em;
color:#a77795;
letter-spacing:normal;
border-left:2px solid #4a4a4a;
}
/* 이미지 블럭 */
.imageblock {
margin:0 0 15px;
padding:0;
border:none;
}
.imageblock * {
border:none !important;
}
.imageblock img {
padding:5px;
background-color:#222;
vertical-align:middle;
}
/* More/Less 버튼 스타일 */
.moreless_fold {
background:url(./images/ico_plus.gif) left 4px no-repeat;
margin:0;
padding-left:20px;
}
.moreless_top {
background:url(./images/ico_minus.gif) left 50% no-repeat;
margin:0;
padding-left:20px;
}
.moreless_bottom {
display:none;
}
.moreless_fold span, .moreless_top span, .moreless_bottom span{
background:#000;
margin:0;
color:#aaa;
}
/* 감춰지는 영역 */
.moreless_content {
background-color:#000;
margin:0;
padding:15px 0;
border-top:dashed 1px #333;
border-bottom:dashed 1px #333;
}
/* 본문 리스트 스타일 */
.article ul, .article ol {
margin:0 0 0 15px;
padding:0;
}
.article ul li, .article ol li{
padding:10px 0;
}
/* 이올린 버튼 */
.EolinBmVote {
padding:0 0 0 !important;
text-align:left !important;
font-size:0.9em;
}
/* 포스트 등록 정보 */
.postInfo {
background-color:#111;
padding:5px 0;
width:520px;
height:18px;
overflow:hidden;
margin-bottom:30px;
font-size:0.9em;
}
.postInfo .filedUnder {
float:left;
width:250px;
padding-left:10px;
}
.postInfo .cntBtn {
float:right;
padding-right:10px;
width:220px;
text-align:right;
}
.cntBtn a:link, .cntBtn a:visited {
color:#999;
}
.cntBtn a:hover, .cntBtn a:active {
color:#eee;
}
.postInfo ul li a {
border-bottom:1px solid #4d4d4d;
}
.postInfo ul li a, .postInfo ul li a:visited { color:#bbb; }
.postInfo ul li a:hover, .postInfo ul li a:active { color:#ccc; border-bottom:1px solid #bbb; }
/* 댓글 버튼 */
/* /// 트랙백 /////////////////////// */
/* 트랙백 주소 표시 */
.trackbackUrl {
background:url(./images/bullet_uri.gif) 4px 6px no-repeat;
margin:0;
padding:0 0 0 20px;
font-size:0.9em;
}
.trackbackUrl span.url {
text-decoration:underline;
}
/* 트랙백 리스트 */
.trackback {
margin-bottom:20px;
border-bottom:1px dashed #333;
}
.trackback ol {
margin:10px 0 10px 0;
padding:0;
list-style:none;
}
.trackback ol li{
background-color:#000;
padding:5px 10px;
}
.trackback ol li p {
margin: 18px 0 8px;
padding:0;
}
/* /// 댓글, 방명록 리스트 /////////////////// */
/* 댓글, 방명록 리스트 */
.commentList {
margin-bottom:20px;
}
.guestList {
margin-top:20px;
}
.commentList ol, .guestList ol {
background-color:#000;
margin:20px 0 0 0;
padding:0;
list-style:none;
}
.commentList ol li, .guestList ol li {
margin:0;
padding:5px 10px;
border-bottom:solid 1px #141414;
}
.commentList ol li p, .guestList ol li p {
margin: 18px 0 8px;
}
/* 답변 부분 */
.commentList ol li.odd, .guestList ol li.odd {
background:#0e0e0e;
padding:5px 10px 5px 10px;
border-bottom:1px solid #000;
}
/* /// 댓글, 방명록 작성폼 /////////////// */
.writeForm {
background-color:#111;
margin:20px 0 30px;
padding:10px 20px;
}
.writeForm span.message {
background:url(./images/bullet_message.gif) left 50% no-repeat;
padding-left:15px;
color:#808080;
display:block;
}
.writer { margin:5px 0;}
/* 입력 칸 라벨 */
label {
padding-left:2px;
width:300px;
font:0.8em tahoma;
display:block;
}
label span {
color:#505050;
}
label.inline {
display:inline;
}
/* 등록자 정보 입력 폼 */
input{
background-color:#222;
padding:3px 5px 2px 5px;
width: 300px;
height:15px;
font-size:11px;
color:#999;
border:none;
}
/* 글 입력상자 */
textarea {
margin-top:10px;
padding:5px;
width:460px;
height:100px;
overflow:auto;
border:none;
background:#222;
font:12px dotum;
color:#999;
}
/* 비밀글 체크박스 */
.checkbox {
background:none;
margin:0 0 0 2px;
padding:0;
width:15px;
border:0;
}
/* Submit 버튼 */
.submit input {
background-color:#333;
margin:15px 0;
padding-bottom:5px;
width:80px;
height:25px;
color:#808080;
}
/* /// 위치 로그 //////////////////// */
.location .place {
width:520px;
overflow:hidden;
color:#808080;
border-bottom:solid 1px #141414;
}
.location .info {
width:520px;
overflow:hidden;
border-bottom:solid 1px #141414;
}
/* 위치에 따른 스타일 */
.location .color0 {color:#808080; font-weight:bold; background-color:#141414; border-bottom:1px dotted #141414;}
.location .color20 {color:#eee;}
.location .color40 {color:#ccc;}
.location .color60 {color:#aaa;}
/* /// 태그 클라우드 (페이지) ///////////////// */
.taglog ul {
margin:0;
padding:5px;
text-align:justify;
}
.taglog li {
display:inline;
font-family:'Franklin Gothic Medium', Verdana, Sans-Serif;
vertical-align:middle;
}
.taglog li a.cloud1 { font-size: 2.6em; color:#8f517a;line-height:1em; }
.taglog li a.cloud2 { font-size: 2.4em; color:#89667d;}
.taglog li a.cloud3 { font-size: 2.2em; color:#74616d;}
.taglog li a.cloud4 { font-size: 1.5em; color:#706c6f;}
.taglog li a.cloud5 { font-size: 1em; color:#575757;}
.taglog li a:hover { color:#b6447c; border-bottom:1px solid #333;}
/* /// 페이지 네비게이션 ///////////////// */
.paging {
margin:50px 0 70px;
font:0.8em tahoma;
color:#4a4a4a;
text-align:center;
}
.paging a:link, .paging a:visited {
color:#666;
}
/* 페이지 네비게이션 (활성화) */
.paging .selected {
font-weight:bold;
color:#b6447c;
border-bottom:1px solid #666;
}
/* /// 검색 폼 //////////////////// */
.searchForm .sInput {
background-color:#2a2a2a;
padding-top:3px;
width:120px;
height:14px;
border:none;
}
/* 검색 버튼 */
.searchForm .searchSubmit {
background:url(./images/btn_search.gif) 50% 50% no-repeat;
margin-left:3px;
width:20px;
height:20px;
border:none;
}
/* /// 태그 (사이드바) /////////// */
.tagbox ul {
padding:15px 0 0 0;
margin:0;
}
.tagbox li {
display:inline;
}
.tagbox a { letter-spacing:-1px;}
.tagbox li a.cloud1 { font-weight:bold; font-size:1.8em; color:#8f517a;}
.tagbox li a.cloud2 { font-weight:bold; font-size:1.5em; color:#89667d;}
.tagbox li a.cloud3 { font-weight:bold; font-size:1.2em; color:#74616d;}
.tagbox li a.cloud4 { font-size:1em; color:#706c6f;}
.tagbox li a.cloud5 { font-size:0.9em; color:#575757;}
.tagbox a:hover { background-color:#141414; text-decoration:none; color:#b6447c;}
/* /// 카테고리 리스트 ////////////// */
/* 분류 전체보기 부분 */
.category ul {
margin:10px 0 0 0;
padding:0;
list-style:none;
}
.category ul li {
margin:0;
list-style:none;
font-size:0.9em;
}
.category ul li a {
display:block;
padding:0;
}
.category ul li a:link, .category ul li a:visited {
color:#808080;
}
.category ul li a:hover, .category ul lia:active{
background-color:#141414;
color: #ddd;
}
/* 1단 분류 */
.category ul li ul {
margin:0;
border-top:1px solid #333;
}
.category ul li ul li{
font: bold 1em arial;
letter-spacing:0;
border-bottom:1px solid #222;
}
.category ul li ul li a {
padding:2px 0;
height:16px;
display: block;
line-height: 14px;
}
.category ul li ul li a:link, .category ul li ul li a:visited {
color:#91556D;
}
.category ul li ul li a:hover, .category ul li ul li a:active{
background-color:#141414;
color: #e793bc;
}
/* 2단 부류 */
.category ul li ul li ul {
margin:0;
padding:0;
}
.category ul li ul li ul li {
margin:0;
border:none;
}
.category ul li ul li ul li a {
padding-left:12px;
background: url(./images/bullet_arrow.gif) 0 50% no-repeat;
}
.category ul li ul li ul li a:link, .category ul li ul li ul li a:visited {
font-weight:normal;
color:#b9839d;
border:none;
}
.category ul li ul li ul li a:hover, .category ul li ul li ul li a:active{
font-weight:normal;
color: #e793bc;
background-color:#141414;
}
/* 활성화된 스타일 */
.category ul li .selected a {
background:#141414;
}
.category ul li ul li .selected a {
background:#141414 url(./images/bullet_arrow.gif) 0 50% no-repeat;
}
/* 카테고리 등록 글 수 */
.c_cnt {
font:0.9em tahoma;
color:#cb89b3;
}
/* /// 최근게시글 공통부분 //////////////// */
.recent ul {
margin:10px 0 0 0;
padding:0;
list-style:none;
}
.recent ul li {
font:0.9em/1.5em dotum, Sans-Serif, gulim;
border-bottom:1px solid #222;
}
.recent ul li a:link, .recent ul li a:visited {
color:#808080;
}
.recent ul li a:hover, .recent ul li a:active {
background:#141414;
color:#be91a7;
}
.recent ul li a{
padding:3px 0 2px;
display:block;
}
.recent a:link .sbName, .recent a:visited .sbName {
color:#444;
}
.recent a:hover .sbName, .recent a:active .sbName {
color:#a76485;
}
.recent a:link .sbDate, .recent a:visited .sbDate {
color:#383838;
}
.recent a:hover .sbDate, .recent a:active .sbDate {
color:#666;
}
/* /// 달력 //////////////////// */
.calendar table {
padding:0;
font:0.75em 'Franklin Gothic Medium', Verdana, Sans-Serif;
}
/*셀 정렬*/
.cal_week1, .cal_week2, .cal_day {
text-align:center;
}
/* 달 표시 부분 */
.cal_month {
padding-left:4px;
text-align:left;
}
/* 요일 표시 부분 */
.cal_week1, .cal_week2 {
height:15px;
border-top:1px solid #222;
border-bottom:1px solid #141414;
}
/* 각 날짜 */
.cal_week {
height: 15px;
background-color:#000;
}
/* 오늘 날짜 */
.cal_day4 {
background-color:#141414;
font-weight:bold;
color:#ccc;
}
/* 링크 스타일 */
a.cal_click:link, a.cal_click:visited { text-decoration:underline;}
a.cal_click:hover, a.cal_click:active {color:#ff007d; font-weight:bold;}
/* /// 방문자 카운터 ///////////////////// */
.counter {
margin-top:15px;
}
.counter ul {
margin:0;
padding:0;
list-style:none;
}
.counter ul li {
font:0.75em/1.2em 'Franklin Gothic Medium', verdana, tahoma, Sans-Serif;
color:#5a5a5a;
}
/*/// RSS 버튼 /////////////////////////*/
.btn_rss {
background: url(./images/btn_rss.gif) left 50% no-repeat;
margin:15px 0 0 0;
padding:2px 0 0 15px;
width:70px;
color:#666;
}
/* === [ Footer ] ================================================ */
/*/// 라이센스 ///////////////////////// */
.copyright {
clear:both;
padding-top:40px;
text-align:center;
color:#666;
}
.copyright a:link, .copyright a:visited {
color:#999;
}
.copyright a:hover, .copyright a:active {
background-color:#333;
color:#eee;
}