音의 노예

이번엔 position을 만져보도록 합시다.

position에서는 블로그를 부위별로 조각내어 그 조각들의 위치나 크기등을 정해준답니다.

/* ... */ <-이 사이에 들어간 문장은 주석문이라 하며 실제 페이지에 아무 영향을 미치지 않아요.

작성한 소스를 다른사람이 볼 때나 편집할 때 알기 쉬우라고 메모해놓는것이라 보면 된다요.

(갑자기 존댓말이 쓰고 싶었어요)

/* position 스타일 시작 */


1. #body
2. #header
3. #content
4. #sidebar

#body {            블로그가 시작되는 몸체의 설정이다(지난 번의 body와 #body는 다른 개념이다 
 width: 780px;    가로 길이의 설정이다. 이 부분을 빼주면 좌우가 탁트인 블로그를 만들 수 있다.
 margin: 0 auto;
 }

#header {                블로그 제목이 위치하는 곳의 설정이다
 text-align: center;    제목의 위치(left,right..)
 height: 154px;          header의 세로 길이 설정
 color: #fff;                제목의 색상이지만 적용될 일이 드물다. 일반적으로 설정값들은
                               세부항목이 우선권을 지닌다... 걍 뒤에 보면 안다;;;
 margin: 20px 0 3px;   여백 설정..그다지 쓸모 없다
 background: #98d33b url(http://md.egloos.com/~/b_head.jpg) no-repeat 0 100%;
 }                 └배경색        └제목 뒷배경 이미지(밑줄 부분 제거하면 그냥 배경색만 나옴)

#container {       컨테이너는 위 그림에서 3번과 4번을 합친 부분이다
                        아니. 합쳤다기보다는 컨테이너 안에 3번과 4번이 들어있다고 이해하면 쉽다
 text-align: left;
 padding: 24px 13px 30px 19px;
 background:  url(http://md.egloos.com/~/b_bg.gif) repeat-y 0 0;
 }                                                                       └앞서 설명했듯이 이미지 도배다.
                                                                            -y는 세로로만 뿌려준다 그럼 -x는?

#content {        포스트 부분
 float: left;         컨테이너 내에서 어느쪽에 위치할지를 정한다 '포스트가 좌측'
 width: 529px;   포스트의 넓이
 padding: 5px 0 20px 0; 
 }

#sidebar {        사이드바 부분
 float: right;       컨텐트와 마찬가지다. 둘다 left로 쓰면? 한번 해보시라(안해봤음)
 width: 188px;
 text-align: center;
 }

#footer {            끝맺음 부분이다. 굳이 손대서 좋을건 없다.
 clear: both;       컨테이너가 컨텐트와 사이드바로 나뉘었다. 그 마무리로 묶어주는 것이다.
 line-height: 0;
 font-size: 0;
 }
/* position 스타일 끝 */