[CSS] CSS 레이아웃(layout) 실험 #01

매우 단순화시킨 CSS 레이아웃이다.
기존에 테이블(table)을 이용해서 레이아웃을 설계하는 것과 달리
스타일(CSS)과 DIV 태그만을 이용해서 똑같은 효과를 낼 수 있다.

아울러 이러한 방법은 크게
① 웹표준에 부합하고,
② 로딩속도가 상대적으로 빠르며
③ 사이트 유지보수가 쉽다는 장점이 있다.

소스를 아래 이미지와 비교해서 보면 쉽게 이해할 수 있을 것이다.
(IE와 FF에서 동일한 결과로 보인다.)

<!DOCTYPE HTML>

<head>

<style>

body { margin : 0px 0px 0px 0px }

div { border : 0px ; text-align : center }

body , div { font-family : Gulim ; font-size : 12px ; line-height : 130% }

#top { width : 500px ; height : 40px ; background : #111311 }

#top { color : #ccc }

#top , #bottom { font-weight : bold }

#left , #main , #right { float : left ; height : 200px }

#left { width : 100px ; background : #ffc800 }

#main { width : 300px ; background : #e7e5e7 }

#right { width : 100px ; background : royalblue }

#bottom { width : 500px ; height : 30px ; background : violet }

#bottom { clear : both }

</style>

<body>

<div id='right'>RIGHT</div>

<div id='bottom'>BOTTOM</div>

</body>

</html>

HookStudy