1    
http://www.action-scripter.com/blog/trackback/1096
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4.     <title> 테스트테스트 </title>
  5.     <style type="text/css">
  6.         html, body{
  7.             margin:0;
  8.             height:100%;
  9.         }
  10.         #wrapper {
  11.             position:relative;
  12.             width:100%;
  13.             height:100%;
  14.         }
  15.         #header {
  16.             position:absolute;
  17.             top:0px;
  18.             left:0px;
  19.             width:100%;
  20.             height:100px;
  21.             background:#a5a5a5;
  22.             z-index:3;
  23.         }
  24.         #centerWrap {
  25.             height:100%;
  26.             background:#c5c5c5;
  27.         }
  28.         #center {
  29.         }
  30.         #leftAreaWrap {
  31.             overflow:hidden;
  32.             position:absolute;
  33.             top:0px;
  34.             left:0px;
  35.             width:200px;
  36.             height:100%;
  37.             background:#c5b5a5;
  38.             z-index:1;
  39.         }
  40.         #leftArea {
  41.             padding:100px 0 50px 0;
  42.         }
  43.         #centerAreaWrap {
  44.             overflow:hidden;
  45.             position:absolute;
  46.             top:0px;
  47.             left:0px;
  48.             width:100%;
  49.             height:100%;
  50.             background:#a5b5c5;
  51.             z-index:0;
  52.         }
  53.         #centerArea {
  54.             padding:100px 0 50px 200px;
  55.         }
  56.         #footer {
  57.             position:absolute;
  58.             left:0px;
  59.             bottom:0px;
  60.             width:100%;
  61.             height:50px;
  62.             background:#e5e5e5;
  63.             z-index:2;
  64.         }
  65.     </style>
  66. </head>
  67. <div id="wrapper">
  68.     <div id="header">header</div>
  69.     <div id="centerWrap">
  70.         <div id="leftAreaWrap">
  71.             <div id="leftArea">leftArea</div>
  72.         </div>
  73.         <div id="centerAreaWrap">
  74.             <div id="centerArea">centerArea</div>
  75.         </div>
  76.     </div>
  77.     <div id="footer">footer</div>
  78. </div>
  79. </body>
  80. </html>

Standard Magazine의 lunaticdream님이 작성한 코드입니다.
2008/08/20 12:14 2008/08/20 12:14

Comments List

  1. 땡굴이 2008/08/20 16:59 # M/D Reply Permalink

    div는 아무리 봐도 헷갈리는게 너무 많아요.

      
   1