2단배열 혹은 3단배열 홈페이지를 레이어로 레이아웃을 만들기를 알아보도록 하겠습니다.
요약
<style type="text/css">
body{text-align:center;}
#wrapper{width:700px;border:1px solid #eee; margin:20px auto;}
#sub,#body,#sidebar{float:left;}
#sub,#sidebar{wisth:150px;}
#body{width:400px;height:450px;}
#head{height:80px;background:#eee;}
#foot{clear:both;height:30px;background:#eee;}
</style>
<body>
<div id="wrapper">
<div id="head">상단</div>
<div id="sub">좌측 부분</div>
<div id="body">중앙부분</div>
<div id="sidebar">우측 부분</div>
<div id="foot">하단부분</div>
</div>
</body>
레이어는 좌표값과 정렬따위는 없습니다.
모두 부모레이어에 속성되며, 좌에서 우로 정령을 해주는값이 상단의 파란색 칠한 값 float:left; 며,
그 아래에 오는 하단부분은 그 아래로 내리는 clear:both; 을 사용하면 내려갑니다.
레이어의 중앙정렬은 text-align:center;
ps. 레이어를 만들때 특정위치에 2개의 레이어 혹은 그이상의 레이어를 합쳐서 보여줄때 사용자의 환경에 따라
레이어의 위치가 바껴버리면, 곤란하죠. 이럴때는 레이어의 포지션을 position:relative 로 만드신후 그안에 position:absolute 의 레이어들을 만들어 좌표를 0,0으로 잡으시면, 브라우저의 0,0위치가 아닌 먼저 position:relative
으로 잡은 레이어가 시작하는곳부터 출력이 됩니다. 실재 작업을 할때 상당히 유용합니다^^;
1396
41,638
2008-04-11 16:33:33
닉네임
