블로그 스킨을 수정하거나 만들때에 CSS를 활용해야 하는데, CSS만 봐서는 도통 어디부분인지 알수 가 없다. 블로그 전체를 놓고 각부분의 명칭에 대해 공부해보자.
블로그 사진과 각부분의 명칭을 최대한 알기쉽게 정리해 보았다.
내 블로그의 기본 화면이다. 각부의 명칭은 크게 아래 사진과 같이 나눠진다.
CSS를 통해 블로그의 레이아웃을 확인하면
/* 블로그 레이아웃 */
#header .head-container {width:/*@post-width:267=*/ 1067px /*@*/; margin:0px auto; }
#body { clear: both; width:/*@post-width:257=*/ 1067px /*@*/; margin:0px auto; }
#content {
float:left;
width:/*@post-width:42=*/ 762px /*@*/;
overflow:hidden;
word-break:break-all;
}
#sidebar {
float:right;
width:300px;
overflow:hidden;
}
#footer {
clear:both;
padding:15px 0 32px 0;
text-align:center;
}
위와 같이 구성 되어있는 것을 확인할 수 있다.
그리고 각 명칭들이 의미하는 영역은
#container : 블로그 전체의 틀.
#body : content + sidebar 의 틀
#header : 상단 블로그 타이틀
#content : 포스팅 내용.
#sidebar : 좌측이 또는 우측의 사이드 메뉴와 각종 위젯이 있는 곳.
#footer : 하단부
각 부분마다 width 항목이 있고,
세팅되어 있는 px(픽셀)수치가 바로 가로 넓이를 의미한다.
이 픽셀 수치가 블로그 사이즈를 조절하는 중요한 역할을 한다.
먼저 #container 픽셀 수치는 블로그 전체의 가로 사이즈를 의미한다.
그리고 #body 픽셀 수치는#content + #sidebar 픽셀 합계 사이즈가 #body 의 픽셀사이즈보다 커야한다. 작을 경우 사이드바가 표시되지 않는다.
예를 들어
사이드바 부분을 넓히려고,
#sidebar의 width 부분을 넓힌다면 옆의 #content 를 침범하는 일이 생기기 때문에,
#sidebar를 넓혀 주는 만큼 #container와 #body 또한 같은 수치만큼 넓혀주어야 한다.
대략 #content의 width + #sidebar의 width = #container의 width 가 되도록 맞춰주면 된다.
사이드바를 늘리는 자세한 방법은 다음에 알아보도록 하자.
