/* 블로그 레이아웃 */
#container {
width:/*@post-width:280*/ 890px /*@*/;
margin:0 auto;
background:url(images/tistory_bg.gif) repeat-y right #fff;
} (위의 블로그 본문, 사이드바 포함된 가로 사이즈 입니다. 아래#fff는 블로그 우측에 파란색 색상표이고 이 값은 #fffff로 바꾸어 주시면 하얀색으로 변경됩니다. 배경을 흰색으로 하신다면 background 값인 url(images/tistory_bg.gif) repeat-y right #fff;를 모두 삭제하셔도 상관은 없지만 만약 블로그 배경색을 바꾸려면 url(images/tistory_bg.gif) 소스코드를 그대로 두시고 repeat-y right 소스코드는 삭제하고 #fff 색상 코드를 원하는 색상코드로 바꾸어 주시면 됩니다.)
#headerBox {
width: 100%;
margin:0;padding:0;
/*@title-background-image=background-image:url(images/head_bg.gif);*/ background-image: url("images/head_bg.gif"); /*@*/
/*@title-background-image-position=background-position:left top;*/ background-position: left top; /*@*/
/*@title-background-image-repeat=background-repeat:repeat;*/ background-repeat: repeat; /*@*/
/*@title-background-color=background-color:#407FC1;*/ background-color: #407FC1; /*@*/
height:/*@title-height=100*/ 100px /*@*/;
}
#header {
width:/*@post-width:250*/ 860px /*@*/;
margin:0 auto;
padding:0 0 0 30px;
}
/* ***** Header ***** */
#header h1 a { padding:0; margin:0; font-family:/*@title-font-family=dotum*/ dotum /*@*/; /*@title-color=color:;*/ color: #fff; /*@*/ font-weight:bold; font-size:/*@title-font-size=14px*/ 16px /*@*/; line-height:1.0;}
#header .logo {float:left;}
#header .blogMenu { float:right; margin:45px 0 0 0; list-style:none; width:/*@post-width:-197*/ 663px /*@*/;}
#header .blogMenu li {
float:left;
list-style:none;
background:url(images/menu_div.gif) no-repeat 0 3px;
padding:0 10px;
}
#header .blogMenu li.first {
background:none;
}
#header .blogMenu li a {
color:#fff;
font-family:dotum;
font-size:12px;
}
#header .blogMenu li a:hover {
text-decoration:none;
}
#content {
margin:0;
float:left;
width:/*@post-width*/ 610px /*@*/; (옆의 가로 사이즈는 맨 아래 글 쓴 순서의 가로 사이즈입니다.)
padding: 35px 0 0 30px;
}
#sidebar {
float:right;
width:200px;
padding:30px 10px 0 10px;
}
#footer {
background:#FFF;
clear:both;
padding:20px 0 0 0;
}
/* ***** content ***** */
#content .nonEntry h3 { border-bottom:1px solid #ccc; margin-bottom:10px; color:#222; }
#content .entry { width:/*@post-width*/ 610px /*@*/; margin: 0; padding:0 0 15px 0; overflow:hidden; }(위 가로 픽셀은 본문 내용이 보이게 해주는 사이즈입니다.)
#searchList { width:/*@post-width*/ 610px /*@*/; margin: 0; padding:0 0 15px 0; overflow:hidden; }
#searchList ol,
#searchRplist ol { list-style:none; padding:5px 0; margin:0;}
#searchList li,
#searchRplist li { border-bottom:1px solid #eee; 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:0.75em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#f60;}
#searchRplist .name { font:0.95em Dotum, Arial, sans-serif; color:#999; padding-left:8px;}
#localog .spot { 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:link { color:#5a5194;}
#localog a:visited { color:#5a5194;}
#localog a:hover { color:#7870ab; text-decoration:underline;}
#taglog ul { padding:5px; margin:0; text-align:justify;}
#taglog li { display:inline;}
#taglog a:hover { background-color:#eee; color:#000;}
#taglog li .cloud1 { background-color:#eee; color:#a2348f; font-weight:bold; font-size:16px;}
#taglog li .cloud2 { background-color:#eee; color:#5a5194; font-weight:bold; font-size:15px;}
#taglog li .cloud3 { background-color:#eee; color:#7870ab; font-weight:bold; font-size:14px;}
#taglog li .cloud4 { background-color:#eee; color:#666; font-size:13px;}
#taglog li .cloud5 { font-size:12px; color:#999; }
#guestbook p { padding:2px 0; margin:0;}
#guestWrite { padding:10px; background-color:#f5f5f5; border:1px solid #ddd;}
#guestWrite input { width:150px;}
#guestWrite textarea { width:/*@post-width:-45*/ 565px /*@*/;overflow: hidden; padding:5px;}
#guestWrite .homepage { width:300px;}
#guestWrite .submit { background:url(images/btn_visit.gif) no-repeat; width:71px; height:23px; overflow:hidden; display:block; text-indent:-1000em; border:0; cursor:pointer; margin:0 auto;}
#guestList { padding:10px 0 0 0;}
#guestList ol,
#guestList ul { margin:0; padding:0; list-style:none;}
#guestList li p { border-top:1px dashed #ccc; margin-top:5px; padding-top:5px;}
#guestList ol li { border:5px solid #eee; padding:10px; margin-bottom:10px; overflow:hidden;}
#guestList li ul li { margin-left:20px; background:url("images/iconIndentArrow_local.gif") no-repeat 10px 10px; background-color:#f5f5f5; padding-left:25px; border:none; width:500px; overflow:hidden;}
#guestList li .name { color:#666; font-weight:bold;}
#guestList li .date { font:0.8em Tahoma, Helvetica, Arial, Gulim, sans-serif;}
#guestList .control a.address { background:url(images/btnAddress.gif) no-repeat; padding-left:24px; padding-bottom:2px; text-decoration:none;}
#guestList .control a.address span { display:none;}
#guestList .control a.modify { background:url(images/btnModifyDelete.gif) no-repeat; padding-left:24px; padding-bottom:2px; text-decoration:none;}
#guestList .control a.modify span { display:none;}
#guestList .control a.write { background:url(images/btnReply.gif) no-repeat; padding-left:13px; padding-bottom:2px; text-decoration:none;}
#guestList .control a.write span { display:none;}
/* entry */
.entryNotice h2,
.entryProtected h2,
.entry h2 { font-size:1.2em; line-height:1.2em;}
.entry h2 a { font-size:/*@post-title-font-size=*/ 14px /*@*/; font-family: /*@post-title-font-family=*/ dotum /*@*/; color: /*@post-title-color=*/ #333333 /*@*/; line-height:1.2em; padding:8px 0 6px 0;}
.titleWrap { width:/*@post-width*/ 610px /*@*/; border-bottom:1px solid #ccc; padding-bottom:5px; margin-bottom:20px; overflow:hidden; }(위 가로 사이즈는 본문 제목의 가로 사이즈입니다.)
.titleWrap .category a { font:12px 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:/*@post-width*/ 610px /*@*/; font-size:/*@post-body-font-size=*/ 12px /*@*/; font-family: /*@post-body-font-family=*/ dotum /*@*/; color:/*@post-body-color=*/ #666666 /*@*/; overflow:hidden;} (위의 가로 픽셀은 본문 내용과 카테고리 다른 글의 가로 사이즈 입니다.)
위에 파란색 픽셀 (px) 사이즈만 수정해 주셔도 본문 영역이 넓어지면서 본문에 css 소를 활용하지 않고도 HTML 태그만을 사용하여 자신만의 블로그를 표현 할 수도 있습니다.
그럼 즐거운 하루 되십시요.
writen by 7istory.tistory.com