<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
/* DEFAULT */
body, div, p, dl, li, ol, ul, dt, dd, h1, h2, h3, h4, h5, h6, img, form{margin:0px; padding:0px;}
ul, ol{list-style:none;}
img{border:0px}
.clearboth{clear:both;}
#wrap{width:1000px; margin:auto; background-color:#eaeaea;} /*브라우저 전체크기에 맞게 설정 하시려면 width:100%*/
/*****************************************************************************************************************/
/* HEADER */
#header{}
#navigation{float:left; width:100%; background-color:#ccc;}
#navigation .navi{float:right;}
#navigation .navi li{float:left; margin:0px 5px 0px 5px;}
#logo{width:180px; float:left; position:relative; text-align:center; background-color:green;}
#menu_info{margin-left:-180px; float:left; width:100%;}
#menutop{margin-left:180px; }
#menutop ul{width:100%; float:left; background-color:orange;}
#menutop ul li{float:left; margin:0px 5px 0px 5px;}
#subintro{width:100%; padding:20px 0px 20px 0px; text-align:center;}
/*****************************************************************************************************************/
/* MIDDLER */
#middler{}
#left_ctn{width:180px; background-color:red; position:relative; float:left;}
#left_ctn h1{text-align:center;}
#left_ctn .customer {text-align:center;}
#right_ctn{width:100%; margin-left:-180px; float:left;}
#container{margin-left:180px; background-color:pink;}
#container h2{}
#subcontents{margin-left:180px; text-align:justify; background-color:yellow;}
/*****************************************************************************************************************/
/* FOOTER */
#footer{}
#copylogo{width:180px; float:left; position:relative; text-align:center; background-color:blue;}
#copyright{margin-left:-180px; width:100%; float:left;}
#copyright .copy{margin-left:180px; text-align:center; background-color:#f50;}
/*****************************************************************************************************************/
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="navigation">
<ul class="navi">
<li>home</li>
<li>login</li>
<li>sitemap</li>
<li>location</li>
</ul>
</div>
<div class="clearboth"></div>
<div id="logo">Logo</div>
<div id="menu_info">
<div id="menutop">
<ul>
<li>groupmenu</li>
<li>groupmenu</li>
<li>groupmenu</li>
<li>groupmenu</li>
<li>groupmenu</li>
<li>groupmenu</li>
</ul>
</div>
</div>
<div class="clearboth"></div>
<div id="subintro">subintro</div>
</div>
<div class="clearboth"></div>
<div id="middler">
<div id="left_ctn">
<h1>title</h1>
<ul class="leftmenu">
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
<div class="customer ">customer </div>
</div>
<div id="right_ctn">
<div id="container">
<h2>subtitle</h2>
</div>
<div id="subcontents">show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money show me the money</div>
</div>
</div>
<div class="clearboth"></div>
<div id="footer">
<div id="copylogo">CopyLogo</div>
<div id="copyright">
<div class="copy">Copyrights</div>
</div>
</div>
<div class="clearboth"></div>
</div>
</body>
</html>
================================================================================================================================================================
웹페이지 레이아웃 샘플로 만들어봤습니다. 대부분 서브페이지 가 이 형태를 유지하기에... 매번 만들기도 귀찮고.. 만들어놓고 정리해봅니다.
익스 IE6 때문에 웹코딩하는게 정말 귀찮아지네요 -_-; 수시로 IE6 에서 제대로 보여지나 확인을 해야하니... 일단 샘플로 만든건.. 다른브라우저에서도같게보이니 다행+_+!