layout 작업 기초
layout 작업을 할 때
기본적으로 header, body, footer 세 부분으로 분할을 합니다.
header, footer는 그냥 한 부분으로 둬도 상관없지만
보통 요즘 많이 사용하는 레이아웃은
body쪽을 2~3분할 하기 때문에
이 점을 감안해서 float속성을 적절히 사용해야합니다.
float해제까지 해주셔야 원하는 모양대로
사이트 구성이 됨에 유의해야합니다.
<body>
<div id="header">
div#header<br/>
헤더가 들어갈 자리입니다.<br/>
border:2px dotted red;
height:100px;
</div>
<div id="body">
div#body<br/>
<div class="sidebar">
div.sidebar<br/>
사이드바 자리<br/>
border:1px solid gray;
width:200px; height:300px;
</div>
<div class="content">
div.content<br/>
컨텐츠 자리<br/>
border:1px solid gray;
width:330px; height:300px;
</div>
</div>
<div id="footer">
div#footer<br/>
푸터가 들어갈 자리입니다.<br/>
border:2px dashed green;
height:100px;
</div>
</body>body 영역 안에 사이드 바와 컨텐츠를 float으로 정렬해보아야 합니다.
<style>
* { margin:0; padding:0; }
body { width:550px; }
#header { border:2px dotted red;
height:100px;}
#body { border:2px solid blue;
height:300px;}
#footer { clear:both; border:2px dashed green;
height:100px;}
#body > div { display:inline-block;}
.sidebar { border:1px solid gray;
width:200px; height:300px;
float:left;}
.content { border:1px solid gray;
width:330px; height:300px;
float:right;}
</style>
#body > div { display:inline-block;}을 통해
body밑의 div를 텍스트 형식으로 정렬합니다.
float:left, float:right를 각각 사이드바와 컨탠츠에
적용시켜주면 됩니다.
그럼 3분할 layout도 만들어보겠습니다.
<style>
* { margin:0; padding:0; }
body { width:550px; }
#header { border:2px dotted red;
height:100px;}
#body { border:2px solid blue;
height:300px;}
#footer { clear:both; border:2px dashed green;
height:100px;}
#body > div { display:inline-block;}
.sidebar { float:left; width:100px;
border:1px solid slateblue; height:300px; }
.content { float:left; width:340px;
border:1px solid steelblue; height:300px;}
.rightbar { float:right; width:100px;
border:1px solid slateblue; height:300px; }
</style>
......
<body>
<div id="header">
헤더가 들어갈 자리입니다.<br/>
border:2px dotted red;
height:100px;
</div>
<div id="body">
<div class="sidebar">
사이드바 자리<br/>
</div>
<div class="content">
컨텐츠 자리<br/>
</div>
<div class="rightbar">
오른쪽 사이드바
</div>
</div>
<div id="footer">
푸터가 들어갈 자리입니다.<br/>
</div>
</body> 
여기까지 입니다.
배울 게 참 많네요.