글
표준웹코딩 예제
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">
body {
margin: 10px auto;
height: 100%;
text-align: center;
}
#container {
width: 832px;
border:1px solid red;
}
#header {
height: 100px;
text-align: center;
border-bottom: 1px solid red;
}
#middle #left, #middle #center, #middle #right {float: left;}
#middle #left .left.content.c, #middle #left .left.content.d, #middle #left .left.content.e, #middle #left .left.content.f {
width: 170px;
margin: 10px;
border: 1px solid red;
}
#middle #left .left.content.c {height: 60px;}
#middle #left .left.content.d {height: 70px;}
#middle #left .left.content.e {height: 80px;}
#middle #left .left.content.f {height: 40px;}
#middle #center, #middle #right {
overflow: hidden;
width: 310px;
}
#middle #right {
margin-left: 10px;
}
#middle .center.content.g, #middle .center.content.h, #middle .right.content.j, #middle .right.content.k, #middle .right.content.l {
width: 308px;
margin-top: 10px;
border: 1px solid red;
}
#middle .center.content.g {height: 130px;}
#middle .center.content.h {height: 90px;}
#middle .right.content.j {height: 70px;}
#middle .right.content.k {height: 80px;}
#middle .right.content.l {height: 58px;}
#middle #bottom {
position: relative;
right: 6px;
margin-top: 10px;
height: 42px;
width: 628px;
border: 1px solid red;
}
#footer {
clear: both;
height: 80px;
text-align: center;
border-top: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> a </div>
<div id="middle">
<div id="left">
<div class="left content c"> c </div>
<div class="left content d"> d </div>
<div class="left content e"> e </div>
<div class="left content f"> f </div>
</div>
<div id="center">
<div class="center content g"> g </div>
<div class="center content h"> h </div>
</div>
<div id="right">
<div class="right content j"> j </div>
<div class="right content k"> k </div>
<div class="right content l"> l </div>
</div>
<div id="bottom"> i </div>
</div>
<div id="footer"> m </div>
</div>
</body>
</html>
---------------------------------------------------------
<!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">
* html, body {height: 100%}
body {
margin: 10px auto;
text-align: center;
}
#container {
width: 832px;
border:1px solid red;
}
#header {
height: 100px;
text-align: center;
border-bottom: 1px solid red;
}
#middle #left, #middle #center, #middle #right {float: left;}
#middle #left .left.content.c, #middle #left .left.content.d, #middle #left .left.content.e, #middle #left .left.content.f {
width: 170px;
margin: 10px;
border: 1px solid red;
}
#middle #left .left.content.c {height: 60px;}
#middle #left .left.content.d {height: 70px;}
#middle #left .left.content.e {height: 80px;}
#middle #left .left.content.f {height: 40px;}
* html #middle #center, * html #middle #right {
overflow: hidden;
width: 310px;
}
* html #middle #right {
margin-left: 10px;
}
#middle .center.content.g, #middle .center.content.h, #middle .right.content.j, #middle .right.content.k, #middle .right.content.l {
width: 308px;
margin-top: 10px;
border: 1px solid red;
}
#middle .center.content.g {height: 130px;}
#middle .center.content.h {height: 90px;}
#middle .right.content.j {height: 70px;}
#middle .right.content.k {height: 80px;}
#middle .right.content.l {height: 58px;}
#middle #bottom {
position: relative;
right: 6px;
margin-top: 10px;
height: 42px;
width: 628px;
border: 1px solid red;
}
#footer {
clear: both;
height: 80px;
text-align: center;
border-top: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div id="header"> a </div>
<div id="middle">
<div id="left">
<div class="left content c"> c </div>
<div class="left content d"> d </div>
<div class="left content e"> e </div>
<div class="left content f"> f </div>
</div>
<div id="center">
<div class="center content g"> g </div>
<div class="center content h"> h </div>
</div>
<div id="right">
<div class="right content j"> j </div>
<div class="right content k"> k </div>
<div class="right content l"> l </div>
</div>
<div id="bottom"> i </div>
</div>
<div id="footer"> m </div>
</div>
</body>
</html>
'렛츠웹 + 게임 > My Tip' 카테고리의 다른 글
| 정규표현식(php) (0) | 2009.01.05 |
|---|---|
| 암,복호화 함수 (0) | 2009.01.05 |
| iframe자동 크기 조절 (0) | 2009.01.05 |
| 엑셀저장처리 (0) | 2009.01.05 |
| 표준웹코딩의 장점 Table for layout과 CSS layout의 비교실험 (0) | 2007.06.09 |
