본문 바로가기
Computer/Internet

Tistory 본문 폭 변경하기

by 우프 2010. 12. 28.
반응형

Change the width of blog body

티스토리 본문 폭 변경하기

자신이 사용하는 스킨이 스킨위자드를 적용하여 변결할 수 있다면 본문의 폭을 쉽게 변경할 수 있을 것이다. 하지만 종종 다음과 같이 스킨위자드를 적용하지 못하는 스킨들이 있다. 이러한 경우는 자신이 집적 style.css 파일을 수정하여야 한다.


스타일 편집은 '스킨-HTML/CSS편집'에서 할 수 있다.


편집은 크게 skin.html와 style.css 2가지로 나누어져 있다. skin.html은 블로그의 내용을 수정할 때 필요한 것으로 광고를 넣는다던지 할 때 수정할 수 있다. style.css는 블로그의 전체적인 윤곽과 여러가지 속성을 저장해 놓는 것이다.

따라서 본문의 폭을 변경하기 위해서는 style.css 를 변경하여야 한다. style.css를 변경하여 블로그 폭을 변경시키는 것에 대해 알아보기로 한다. 나의 경우도 style.css를 처음 건드려 보는 것이라 100% 확실한 내용은 아니라는 것을 유념하기 바람

.wrapper-main {
 clear:both;
 width:1110px; /* #sidebar-right width + 859= */
 background: #fff url(images/sidebar_bg.gif) repeat-y 700px 0px;
}
#content {
 float:left;
 width: 700px;
 background:#fff url(images/main_right.gif) no-repeat right top;
 overflow:hidden;
 word-break:break-all;
}
#content .inner {
 width:10px;
 height:10px;
 background:transparent url(images/main_left.gif) no-repeat left top;
}
#sidebar-middle {
 float:left;
 width:200px;
 background-color:#8FB627;
 word-break:break-all;
 word-wrap:break-word;
 overflow:hidden;
}

#sidebar-right {7
 float:left;
 width:200px;
 padding-top:23px;
 background:transparent url(images/sidebar_right_left.gif) no-repeat left top;
 word-break:break-all;
 word-wrap:break-word;
 overflow:hidden;
}


위의 내용은 다음과 같은 윤곽을 의미한다. 위의 주황색으로 표시한 숫자를 수정하면 전체적인 윤곽의 크기를 변경할 수 있다.여기서 content .inner 항목이 사실 명확하지가 않다. 이것은 0px으로 해도 무방할 듯 하다.


이걸로 끝이 아니다. 컨텐츠 항목도 변경하여야 한다.

/* 컨텐츠 */
#content .wrapper-content {
 width: 650px;
 margin:0px 25px;
 overflow:hidden;
 word-wrap:break-word;
 word-break:break-all;
}

컨텐츠에는 margin이 있는데 이것을 0으로 하면 사이드바와 바로 붙어버리기 때문에 보기가 좋지 않다. 이렇게 마진을 주게 되면 실제 본문 글의 폭은 650px이 되는 것이다.


이제 이렇게 하면 설정은 거의 끝났다. 다음으로 자질 구레한 것들만 크기를 조정해주면 된다.

#footer {
 width:100%;
 background:#E8E8E7 url(images/sidebar_bg.gif) repeat-y 700px 0px;
 color:#9E9E9D; 
}
#footer .footer-container { width: 700px; }

/* blog title */
.wrapper-title {
 width: 700px;
 padding-bottom:34px;
 background:url(images/line_double.gif) repeat-x left bottom;
}


이정도로 하면 폭 조절은 별 이상없이 마무리 할 수 있으리라 생각된다.

반응형

댓글