쉽게 만들어 보는 CSS페이지 레이아웃(1탄)

#BOX는 전체 레이아웃을 감싸는 넓이값(800px)을 가진박스입니다.

#top과 #bottom,#nav는 높이값을 가진 박스입니다.(항상 일정한 높이를 유지)

#main은 #left,#right,#center을 감싸는 박스입니다.

#left,#right은 넓이(200px)를 가지고 있으며 각각 float:left,float:right속성을 가지고 있어 각각 #main의 왼쪽,오른쪽에(여백없음)위치하게 됩니다.

#center도 넓이(380px)을 가지며 이 넓이는 #BOX의 넓이(800px)에서 #left,#right의 넓이값과 여백값(margin-left:10px,margin-right:10px)을 뺀 값입니다.(800px-200px-200px-10px-10px = 380px))

#spacer는 이전 속성을 제거하는 박스이며 어떤용도인지 궁금하시면 <div id="spacer"></div>부분을 삭제해보시기 바랍니다.

너무 짧아서 튜토리얼이라고 하기에도 뭐하네요.나름대로 최선을 다한것이오니 작은 도움이 되길 바랍니다.
다음 튜토리얼은 #top에 메뉴,로고,검색창,기타 기능들을 넣어 예쁘게 꾸며보겠습니다.

* 넓이값과 높이를 가진 박스에 눈여겨 보시길 바랍니다.
* 백그라운드 색상은 구분이 쉽도록 해논것이오니 삭제해도 무방합니다.
*처음 페이지 로딩시 #main(#left,#right,#center)부분에 컨텐츠가 없으므로 높이가 상당히 낮아 보입니다.컨텐츠가 충분히 채워지면 보기좋게 되므로 높이값 설정은 하지 마시길 바랍니다.