2015.02.22 23:59


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


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

 따라서 본문의 폭을 변경하기 위해서는 style.css 를 변경하여야 한다. style.css를 변경하여 블로그 폭을 변경시키는 것에 대해 알아보기로 한다. 


 .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;

 }




폭 조절 완료




신고

'Programming > Etc' 카테고리의 다른 글

ASCII Code Table  (0) 2017.02.21
정규식 문법 이해  (0) 2015.04.05
2015년 프로그래밍 언어 사용률  (0) 2015.03.05
[Tistory] 티스토리 본문 폭 변경하기  (0) 2015.02.22
[Git] Git 설치 및 초기 설정  (0) 2015.02.16


Posted by injunech