열 레이아웃을 만들려면
완전한 문서의 여백과 패딩을 다음과 같이 설정합니다.
<style>
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style> 노란색으로 열을 정의하고 나중에 이 규칙을
−에 첨부합니다.
<style>
<!--
#level0 {
background:#FC0;
}
-->
</style> 이제 level0 −
내부에 또 다른 구분을 정의해 보겠습니다.<style>
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style> 나눗셈을 하나 더 중첩하면 전체 코드는 다음과 같습니다. -
<style>
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id="level0">
<div id="level1">
<div id="level2">
<div id="level3">
<div id="main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>