Search Results for 'div'


2 POSTS

  1. 2008/08/20 CSS 레이아웃 (헤더,푸터 고정) 너비, 높이 가변 브라우징 by 땡굴이 (1)
  2. 2008/06/10 땡굴이 홈페이지 리뉴얼 V3.0 by 땡굴이 (16)
   1    
  • Posted at 2008/08/20 12:14
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. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title> 테스트테스트 </title>
  6.     <style type="text/css">
  7.         html, body{
  8.             margin:0;
  9.             height:100%;
  10.         }
  11.         #wrapper {
  12.             position:relative;
  13.             width:100%;
  14.             height:100%;
  15.         }
  16.         #header {
  17.             position:absolute;
  18.             top:0px;
  19.             left:0px;
  20.             width:100%;
  21.             height:100px;
  22.             background:#a5a5a5;
  23.             z-index:3;
  24.         }
  25.         #centerWrap {
  26.             height:100%;
  27.             background:#c5c5c5;
  28.         }
  29.         #center {
  30.         }
  31.         #leftAreaWrap {
  32.             overflow:hidden;
  33.             position:absolute;
  34.             top:0px;
  35.             left:0px;
  36.             width:200px;
  37.             height:100%;
  38.             background:#c5b5a5;
  39.             z-index:1;
  40.         }
  41.         #leftArea {
  42.             padding:100px 0 50px 0;
  43.         }
  44.         #centerAreaWrap {
  45.             overflow:hidden;
  46.             position:absolute;
  47.             top:0px;
  48.             left:0px;
  49.             width:100%;
  50.             height:100%;
  51.             background:#a5b5c5;
  52.             z-index:0;
  53.         }
  54.         #centerArea {
  55.             padding:100px 0 50px 200px;
  56.         }
  57.         #footer {
  58.             position:absolute;
  59.             left:0px;
  60.             bottom:0px;
  61.             width:100%;
  62.             height:50px;
  63.             background:#e5e5e5;
  64.             z-index:2;
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69. <div id="wrapper">
  70.     <div id="header">header</div>
  71.     <div id="centerWrap">
  72.         <div id="leftAreaWrap">
  73.             <div id="leftArea">leftArea</div>
  74.         </div>
  75.         <div id="centerAreaWrap">
  76.             <div id="centerArea">centerArea</div>
  77.         </div>
  78.     </div>
  79.     <div id="footer">footer</div>
  80. </div>
  81. </body>
  82. </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    

Favorite Stie

  1. actionscript · akira fukuoka · art from code · atom · bit-101 · blo9 · bohe76 · cupling · darron schall · david tucker · digitaldream · erik natzke · fdt · firstbornmultimedia · flash actionscript · flash devices · flashcomguru · flashguru · flashmech · flight404 · foofight · gabriel213 · generator x · goodhyun · gotoAndLearn · group94 · hangun's · indymiae · insideRIA · jangcha75 · jasu · jens franke · joelon software · joshuadavis · keynut · kimkijeung · kyenwoo · latest macromedia news · madblog · manmaru · mateuniverse · michael battle · mike chambers · moock · mr.doob · noogooc · noventaynueve · outsoar_soda · pixelconsumption · pzix · rebert lindstrom · snowcat · taria · the flash blog · thedofl's · ui-blog · unit zero one · ux factory · visualrinse · yugop ·