'너비'에 해당되는 글 1건

  1. 2009.08.28 스킨 본문 너비를 늘려 사용하기


스킨의 본문 너비를 넓게 수정하여 사용하는 블로거들을 보고 나도 바꿔 사용했으면 했으나 html은 알아도 관련된 css 부분은 잘몰라 선뜻 스킨을 수정할 수가 없었다. 그러다 맘을 잡고 검색을 시작해 보니 관련글이 나왔다. ^^ 해당 주소을 참고로 하여 굵직한 부분을 적용하고, 나머지 위치 같은 경우는 style.css에 아래와 같이 적용하였다.

container의 width를 알맞게 조정하고, content의 width와 .aticle의 width을 같이 조정해준다. 본 스킨에서는 container는 content와 sidebar를 포함하고 있는 테이블이라 생각하면 된다.

/* 블로그 레이아웃 */
#container {
		width:/*@post-width:200=*/ 98% /*@*/;
		border:1px solid #bbb;
		margin:30px auto; 
		padding:10px;  
		background-color:#fff;
}

#header {
		padding:/*@title-height:-44=padding-top:*/ 11px /*@*/ 10px 0 20px;
		background-color:/*@title-background-color=*/ #7870ab /*@*/;
		margin-bottom:8px;
		/*@title-background-image=background-image:;*/ background-image: none; /*@*/
		/*@title-background-image-position=background-position:;*/ background-position: left top; /*@*/
		/*@title-background-image-repeat=background-repeat:;*/ background-repeat: no-repeat; /*@*/
}

#content {
		float:left;
		width:/*@post-width=*/ 86% /*@*/;
		overflow:hidden;

}

#sidebar {
		float:right;
		/*width:190px;*/
		width:12%;
}

#footer {
		clear:both;
		padding:20px 0 0 0;
		width:86%;
}


.article의 width로 본문글의 너비를 설정한다. 위의 content의 width만 변경하면, 본문 외각의 너비가 설정이되며, 실제 글의 너비는 아래 부분과 같이 적용해 준다.
.article                 { width:/*@post-width:-40=*/ 98% /*@*/; margin:5px 5px 0 5px; overflow:hidden; /*@post-body-color=color:;*/ color: ; /*@*/ /*@post-body-font-family=font-family:;*/ font-family: inherit; /*@*/ /*@post-body-font-size=font-size:;*/ font-size: inherit; /*@*/}


'형상관리 > ' 카테고리의 다른 글

What is Ajax?  (0) 2010.02.12
embed 태크 활용.  (0) 2005.10.15
ASP로 만들어본 학사행정정보 시스템  (0) 2005.10.14
Posted by dcmru
,