반응형

번 시간에는 티스토리 블로그 스킨 중 'Life in Mono'의 포스트 폭과 사이드 바 폭을 조정하여 좀 더 유연하게 블로그 레이아웃을 다룰 수 있는 방법에 대해 알아보도록 하겠습니다.

블로그를 오래 사용하다보면 아무래도 자신이 원하는 포스트 영역의 넓이가 제공하는 스킨의 것과 차이가 있어서 불편한 경우가 종종 생기게 됩니다. 폰트나 스킨 등은 마음에 드는데 포스트 폭이 너무 좁다든지, 사이드 바의 폭을 더 키우고 싶은데 방법을 잘 모르겠다든지...

이런 불만을 해소하기 위해서는 직접 블로그 레이아웃의 설정을 변경해주어야 하는데요. 일반적으로 설치형 블로그의 환경설정은 skin.html과 style.css에서 이루어지게 됩니다. 관리자메뉴의 스킨 메뉴에서 HTML/CSS 편집으로 들어갑니다.

포스트의 폭 조정은 style.css에서 할 수 있습니다. 여기서 조금 번거로운 작업이 필요한데, 우선 수정해야할 부분이 한 곳이 아니라는 점과 늘어나는 만큼 줄어드는 부분을 감안해야 하는 등, 살짝 머리를 써줘야 하는 일이 생기게 됩니다. 머리 운동 하는 셈치고 조금만 신경쓰시면 됩니다.

일단, 수정해야할 부분은 크게 네 가지로 나뉘어지게 됩니다.

1) 블로그 레이아웃
2) 박스 레이아웃
3) 헤더 레이아웃
4) 포스트 레이아웃


1)에서는 전체 블로그 레이아웃의 폭과 그에 비례하여 컨텐트 부분의 레이아웃, 그리고 사이드 바의 레이아웃 폭을 조정할 수 있습니다.
2)에서는 컨텐트와 사이드 바의 코너 부분을 조정하게 됩니다. 여기를 건드리지 않으면 포스트 박스나 사이드 박스의 코너가 어긋나거나 잘려서 출력됩니다.
3)에서는 헤더, 즉 메뉴 바의 폭을 조정하게 됩니다. 이곳이 같이 수정되지 않을 경우, 포스트 폭을 늘리면 타이틀 바가 그보다 좁게 표시되며, 폭을 줄일 경우에는 메뉴 바 영역이 깨지게 됩니다.
4)에서는 포스트의 안쪽 영역을 조정하게 됩니다. 이곳을 같이 수정하지 않을 경우, 여백과 정렬이 맞지 않아 보기가 좋지 않습니다.

먼저, 예제로 사용할 블로그의 레이아웃은 일단 다음과 같습니다.



1) 블로그 레이아웃 조정하기

style.css에서 다음 부분을 찾습니다.

/* 블로그 레이아웃 */
#header .head-container {width:/*@post-width:267=*/947px/*@*/; margin:0px auto; } /* 타이틀 바 레이아웃 폭 */
#body { clear: both; width:/*@post-width:257=*/937px/*@*/; margin:0px auto; } /* 바디 레이아웃 폭 */
#content {
 float:left;
 width:/*@post-width:35=*/722px/*@*/; /* 컨텐트 레이아웃 폭 */
 overflow:hidden;
 word-break:break-all;
}
#sidebar {
 float:right;
 width:200px; /* 사이드바 레이아웃 폭 */
 overflow:hidden;
}

녹색 글씨로 표현된 부분이 수정해야할 부분입니다(위의 레이아웃 값은 제 블로그의 고유의 값입니다.). 먼저 가장 위의 두 부분은 블로그의 전체 영역을 지정하는 부분이라 하겠습니다. (CSS를 완벽하게 이해하고 있는 것은 아니지만) header의 post-width는 타이틀 바와 메뉴 바 등을 포함 블로그 상단 레이아웃의 폭을 지정하는 듯 하고, body 부분의 post-width는 컨텐트와 사이드 바를 포함하는 레이아웃의 폭을 지정하는 영역인 듯 하군요. 실제 이 두 부분은 꽤 밀접한 관계를 갖고 있는 것 같은데요. 어느 한 부분만을 수정할 경우에는 그 수정 사항이 레이아웃에 반영되지 않습니다. 두 부분을 같이 수정해줘야 합니다.

content의 post-width는 컨텐트 레이아웃의 폭입니다. 주로 이 부분이 수정대상이 되겠군요. 이 부분을 늘리기 전에는 먼저 header부와 body부의 레이아웃(이하 전체 레이아웃)을 그에 맞춰 늘려줘야 합니다. 전체 레이아웃을 수정하지 않고 늘리길 원할 경우에는 사이드 바 레이아웃 폭을 줄여줘야 합니다. 단, 사이드바는 너무 폭이 좁아지면 보기 안좋기 때문에 이것을 감안하여 세 부분의 레이아웃을 유기적으로 조정해 줍니다. 컨텐트 레이아웃과 사이드 바 레이아웃의 합이 전체 레이아웃을 넘어가면 안됩니다. 또한, 여백을 감안하여 그 합은 전체 레이아웃보다 더 작은 값이어야 합니다.

Life in Mono 스킨의 전체 레이아웃 상관 관계는 아래와 같습니다.

937px(body 레이아웃) = 947px(헤더 레이아웃) - 10px
                                = 722px(컨텐트 레이아웃 폭) + 200px(사이드바 레이아웃 폭) 
                                  + 15px(사이 여백)



2) 박스 레이아웃 조정하기

기본적인 레이아웃을 종료한 후에는 실제 컨텐트를 구성하는 박스와 사이드 바를 구성하는 박스 레이아웃을 조정해줘야 합니다. style.css에서 다음 부분을 찾아갑니다.

/* BOX */
.boxTop, .boxMid, .boxBtm, .boxTopR, .boxMidR, .boxBtmR {clear:both; }
.boxTop-left, .boxTop-right, .boxBtm-left, .boxBtm-right {float:left; width:4px; height:4px; background-color:#transperant; }
.boxTopR, .boxBtmR { height: 4px; }
.boxBtmR { padding-bottom: 9px; }
.boxTop-mid, .boxBtm-mid, .boxTopR-mid, .boxBtmR-mid {float:left; height:4px; }
.boxTop .boxTop-mid, .boxBtm .boxBtm-mid {width:/*@post-width:34=*/714px/*@*/; } /* 컨텐트 박스 상·하부분 폭 */
.boxTopR .boxTop-mid, .boxBtmR .boxBtm-mid {width:192px; } /* 사이드바 박스 상·하부분 폭 */

...(중략)

.boxMid, .boxMidR {border-left:1px solid #D0D0D0; border-right:1px solid #D0D0D0; background-color:#fff; }
.boxMid {width:/*@post-width:40=*/720px/*@*/; overflow:hidden; } /* 컨텐트 박스 좌우 폭 */
.boxMidR {width:198px; overflow:hidden; } /* 사이드 박스 좌우 폭 */

수정해야할 부분은 녹색 글씨로 표현된 부분입니다. 이 부분은 먼저 설명된 컨텐트, 사이드바 레이아웃과 밀접한 관계를 갖는데요. boxTop, boxTop-mid boxBtm, boxBtm-mid 부분은 컨텐트 박스의 상단 부분과 하단 부분을 의미합니다. 이 부분이 수정되지 않으면 컨텐트 박스의 상단과 하단이 깨져버리게 되지요. boxTopR, boxTop-mid boxBtmR, boxBtm-mid은 사이드바 박스의 상하단 부분입니다.

아래로 내려가 boxMid 부분은 컨텐트 박스에서 외곽선을 제외한 컨텐트 박스에 대한 내용입니다. boxMidR은 사이드 바에 대한 내용이구요. 각각의 상관관계는 아래와 같습니다.

714px(컨텐트 박스 상하단 부분의 폭) = 722px(컨텐트 레이아웃 폭) - 8px
192px(사이드바 박스 상하단 부분의 폭) = 200px(사이드바 레이아웃 폭) - 8px

720px(컨텐트 박스 폭) = 722px(컨텐트 레이아웃 폭) - 2px(박스의 좌, 우 외곽선 폭의 합)
198px(사이드바 박스 폭) = 200px(사이드바 레이아웃 폭) - 2px(박스의 좌, 우 외곽선 폭의 합)

포스트, 사이드바 코너 레이아웃 조정이 잘못된 경우



3) 헤더 레이아웃 조정하기

자, 이제 전체적인 레이아웃, 그리고 컨텐트의 폭을 조정하고 필요에 따라 사이드 바의 폭까지 조정해 주었습니다. 이제는 넓어지거나(혹은 좁아진) 블로그 전체 레이아웃에 맞추어 메뉴바의 폭도 조정해주어야 겠죠. style.css에서 다음 부분으로 이동합니다.

/* 헤더 */
#header {
 padding-top:53px;
 background-color:/*@title-background-color=*/transparent/*@*/;
 background-image:/*@title-background-image=*/url("
http://cfs.tistory.com/blog/style/template/image/title/6.jpg%22)/*@*/
 background-repeat:/*@title-background-image-repeat=*/repeat-x/*@*/;
 background-position:/*@title-background-image-position=*/center
top/*@*/;
}
#header .head-container {width:/*@post-width:267=*/947px/*@*/; height:/*@title-height=*/150px/*@*/; margin:0px auto; } /* 타이틀바 폭 = 타이틀바 영역 폭 */

...(중략)

#searchbar .searchbar-container {float:left; width:/*@post-width:249=*/929px/*@*/; height:41px; background:url(images/searchbar_mid.png) repeat-x; } /* 메뉴바 폭 */
* html #searchbar .searchbar-container {
 width:/*@post-width:249=*/929px/*@*/; /* 메뉴바 폭  */
 background:none;
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cfs.tistory.com/blog/skin/tis_LifeInMono_Light/images/searchbar_mid.png', sizingMethod='scale');
}

수정해줄 부분은 녹색의 글씨 부분입니다. 먼저, header의 레이아웃은 앞선 1)의 header 레이아웃과 동일하기 때문에 1)에서 수정해주었다면 같은 값으로 조정해주어야 합니다.

좀 더 밑으로 이동하여 searchbar 부분이 메뉴바의 폭을 조정할 수 있는 부분이니다. 전체 레이아웃이 늘어났을 경우 그에 맞추어 이 메뉴바도 늘려주는 것이 보기가 좋습니다. 특히, 레이아웃이 전체적으로 좁아졌는데 이 부분을 수정하지 않는다면, 메뉴바의 앞 뒤가 잘려져서 깨진 형태로 표시됩니다. 메뉴바의 폭을 조정하는 부분은 두 부분입니다. 상관관계는 다음과 같습니다.

929px(메뉴바 폭) = 947px(헤더 레이아웃) - 18px

메뉴바 레이아웃 조정이 잘못된 경우



4) 포스트 레이아웃 조정하기

마지막으로 포스트의 레이아웃을 조정해줄 차례입니다. 3)까지의 과정을 마치면 외곽 레이아웃의 조정은 모두 완료됩니다. 하지만 포스트 본문의 경우는 레이아웃의 변화에 따라 이전에 작성했던 포스트의 오른쪽 여백이 없어지고 그림이 잘려서 표시되거나, 오른쪽 여백이 너무 많이 남는 상황이 발생하게 됩니다. 따라서, 다음과 같이 포스트 본문 영역 또한 바뀌어진 레이아웃에 맞춰줘야 합니다. style.css에서 다음을 찾습니다.

/* 포스트 */
.infor {width:/*@post-width:42=*/722px/*@*/; height:22px; padding-top:8px; } /* 포스트 레이아웃 폭  */

... (중략)

.article {
 width:/*@post-width=*/680px/*@*/; /* 포스트의 본문 영역 폭  */
 color:/*@post-body-color=*/#000000/*@*/;
 font-size:/*@post-body-font-size=*/13px/*@*/; 
 font-family:/*@post-body-font-family=*/Malgun
Gothic/*@*/
 word-break:break-all;
 word-wrap:break-word;
 overflow:hidden;
                line-height:/*@post-body-line-height*/20px/*@*/; 
                text-align:justify;
}

722px라는 값은 컨텐트 레이아웃의 폭으로 1)에서 정했던 컨텐트 레이아웃 폭과 동일한 값으로 설정합니다. 그리고 하단에 위치한 것이 바로 본문의 실제 영역이 되겠는데요. 여기서는 42px 정도의 차이를 두고 설정하고 있습니다. 이 말은 결국, 우리들이 설정하는 컨텐트 영역 폭에서 42px만큼 감소된 값이 진짜 본문 영역 폭이라는 소리입니다. 사진이나 그림 등을 주로 싣는 블로그를 만들 경우에는 때 이 점을 참고해서 포스트 영역을 조정해야 할 듯 합니다.

680px(포스트 본문 폭) = 722px(컨텐트 레이아웃 폭) - 42px

포스트 레이아웃에서 내부 여백을 감안하지 않았을 경우


위의 방법을 토대로 포스트 영역을 100px 줄이고, 사이드를 100px 늘린 블로그의 레이아웃입니다. 물론, 이와 반대로 포스트 영역을 더 늘리고 사이드 바를 줄일 수도 있으며, 포스트 영역을 늘리면서, 사이드 바 영역을 그대로 유지하는 것도 모두 가능합니다. 위의 방법을 사용하면 말이죠.

내부여백을 지정해준 포스트 레이아웃


이후에 수정해줘야할 부분에 대해서는 아래의 포스트를 참조해주세요.
 
늘어난 사이드바 프로필 영역 조정하기

☞ 댓글 영역과 방명록 부분의 포스트 폭 조정하기


반응형

+ Recent posts