Positioned Layout | Page Layout Series Part V


Home > Document > CSS > Page Layout Series > PLS Part V

Position property로 Layout 하기

이번 페이지에서는 앞 페이지의 'Layout with positioning' 에서 미처 다루치 못했던 Positiontop, right, bottom, left property 만을 사용하여 float property를 사용하지 않고, position:relative 또는 position:absolute 로 만드는 layout 에 대해 알아 보려고 하는데, 그에 앞서 PLS 시작 부터 지금까지 언급해 온 IE의 !DOCYTPE switch on, off에 따른 block box의 rendering 차이에 대해 마지막 (최소한 이 series에서는) 으로 다루어 보려고 합니다. 따라서 이 후로 PLS 에 나오는 모든 code들은 모두 표준 모드(IE 표현에 의하면 !DOCTYPE switch on) 방식이라는 것을 밝혀 두겠습니다.

사실 PLS 를 시작하기 전에 많은 말설임이 있었습니다. 제 경우 !DOCTYPE switch on, off 라는 것이 있다는 것을 알고 그 당시 테스트하던 웹 사이트의 문서에 DTD 선언을 했다가 정신없이 흐트러진 Page layout을 보곤 '헉! 이게 머야!' 하고 화들짝 놀라서 code를 원상 복귀시킨 경험이 있습니다. 바로 아래와 같은 경우였죠.

입력
<DTD 선언 부분>

<html>
    <head>
    <title>DTD 선언으로 흐트러진 Layout</title>
    <style type="text/css">
    <!-- 
    .wrap{
    width:500px; /*  */
    background-color:beige;
    }
    .leftCol{
    width:300px;
    height:350px;
    background-color:silver;
    float:left;
    border-right:1px solid gray;
    }
    .rightCol{
    width:200px;
    height:250px;
    background-color: silver;
    float:left;
    }
    -->
    </style>
    </head>
    <body>
      <div class="wrap">
        <div class="leftCol"></div>
        <div class="rightCol"></div>
      </div>
    </body>
</html>
코드 실행 하기

위의 code를 실행해 보았으면 알 수 있겠지만, DTD를 표준 모드로 선언함에 따라 block box의 줄바꿈이 생기게 됩니다. 이렇게 되는 이유는 전체를 감싸고 있는 class="wrap" div의 width:500px 내에 leftCol + rightCol의 합계 width가 500px를 넘었기 때문에 2개의 div box를 다 수용하지 못해서 인데, 바로 code 중 border:1px solid gray; 의 처리를 표준 모드와 비 표준 모드가 다르게 처리하기 때문입니다. 즉,

  • 표준 모드
    leftCol ((width:300px + border:1px) = 301px) + rightCol (width:200px) = 501px
  • 비표준 모드
    leftCol ((width:299px + border:1px) = 300px) + rightCol (width:200px) = 500px

로 처리하기 때문이라는 거죠. 표준 모드이건 비표준 모드이건 간에 어차피 containing box의 width가 자신이 담고 있는 내용물(2개 이상의 block box)의 width보다 작으면 줄을 바꿀 수 밖에 없으므로, 위의 예제와 같이 표준 모드에서는 border와 padding이 지정한 width 바깥으로 생기고, 비표준 모드에서는 지정한 width 안쪽으로 침범하는 이유에서 생기는 결과입니다.

또한 저의 망설임도 바로 이런 이유에서 비롯된 것인데, 이와 같이 표준과 비표준에서 오는 결과 상의 차이점을 알려주는 것이야 누가 뭐랄 것 없겠지만 만약에 누가 '나는 지금까지 완벽한 비표준 모드를 사용해서 내 홈페이지를 만들었는데 어뜩하면 되져?' 라고 질문한다면 과연 뭐라고 답해야 될까 하는 것 이었습니다. 머 까이꺼 걍 '삼가 애도를 표합니다. 불량 재료로 부실 시공을 해서 언제 무너질지 모르겠네요. 하긴 뭐 운 좋게 안 무너진다 해도 어쩌면 W3C에서 파견한 철거반이 기습적으로 촐몰하여 강제 철거를 당할 지도 모르죠. 하지만 그 때는 그 때고 사는 동안 만이라도 마음 굳게 잡숫고 편안히 사세요. 정 안되면 그 때 가서 불도져 앞에서 나자빠지기 신공, 연탄재 뿌리기, 촛불 시위 등의 극단적인 방법을 동원하면 되니까 글쎄 아무 걱정 마시라니깐요.' 라고 할까요. 아니면 '귀하의 계획에 없던 집 수리비가 쩜 들겠지만 앞으로 편안히 살려면 과감하게 수리를 하시죠.' 또는 '거 머 보아하니 지어 놓은 것도 별로 없는 것 같은데, 새로 짖는거나 수리하는거나 별 차이도 없으면서 별 걸 다 물어보네... -_-;' 라고 할까요. 또 Blog 같은 공동 주택에 입주해서 보금자리를 튼 경우 입주한 건물 자체가 불법에 부실 시공 되었다면 제 아무리 표준 시방서 대로 interior 를 한다고 해도 무슨 소용이 있겠습니까. 이거는 경우가 하도 많아서 대답도 그 때 마다 다를 수 밖에 없습니다.

하긴 제가 어떻게 하라고 해서 그렇게 하지야 않겠지만 결국 '가능하면 표준으로 바꾸세요.' 라고 대답해야 되겠죠. 이 말을 역으로 생각하면 '불가능하면 바꾸지 마세요.' 가 되는데, 이게 제 솔직한 대답입니다. 왜냐하면 이런 작업을 하려면 최소한 보통 이상의 실력을 갖추어야 되는데 모든 사람이 그런 실력을 갖추고 있지도 않거니와 그런 실력을 갖추어야될 이유도 없다고 보기 때문입니다. 지금 현재 HTML이 유행하고 있는 이유는 HTML이 SGML(Standard Generalized Markup Language)과 달리 비전문가도 사용하기 쉽다는 것 이었습니다. 만약 HTML이 없었다면 지금과 같이 인터넷 관련 기반 시설이 발전하고 너 나 할 것 없이 홈페이지를 가질 수 있었을까요. 절대 그렇지 않다고 봅니다. 수요가 없는데 공급이 있다뇨. 누가 봉사활동 삼아 인터넷 기반 시설을 갖추어 놓았을 리는 없지 않습니까. 그런데 만약 일정 이상의 지식을 갖춘 사람만 홈페이지를 가질 수 있는 표준을 만들고 브라우저 등의 모든 여건을 표준에 맞춘다면 수긍할 수 있겠습니까. 아마 아마추어가 아닌 직업적인 이유로 웹 문서를 작성하는 사람 같으면 수긍이고 뭐고 무슨 수를 쓰던 모든 브라우저에서 같이 보이도록 만들 것이고, 벌써 그렇게 하고 있거나, 했을 겁니다. 하지만 취미삼아 하는 아마추어의 경우와 같이 해도되고 안해도 되는 웹 언어에 대한 지식도 별로 없는 사람에게 '웹 표준에 맞추는 것이야말로 아름다운 것이고, 해 보면 아주 쉽습니다.' 라고 하면 뭐라고 할까요. '예 당연하고도 옳은 말씀입니다. 당장 그렇게 하겠습니다.' 라고 할까요 아니면 '우쒸! 너야 아니까 쉽지. 나는 어려워서 죽을 맛인데 내가 그걸 왜 고치냐? 잘 아는 너나 고쳐 짜샤아~' 라고 할까요?

현재 학생들이나 조금 묵은 사람들(필자주:Young People)은 전자에 해당하는 경우가 많을거고, 오래 묵은 사람들(필자주:Old People)은 후자에 해당하는 경우가 많을 거라 봅니다. 한참 머리가 잘 돌아가는 YP의 눈으로 볼 때 OP의 입장이 선뜻 이해가 안 가겠지만 그 사람들도 수년 내지 수십년 더 묵다(필자주: 세월이 흘러 Old 해 지다) 보면 OP의 입장을 알게 될 것이고, 웹 표준 운동을 하는 사람들도 이런 점등을 충분히 감안하고 있을 거라고 봅니다. 설마 30세 이하는 물을 흐린다고 입장을 사절하는 Rock cafe 처럼 '당신처럼 old한 사람이 웬 홈페이지?' 라고 하지는 않을 거라는 말입니다. Young한 사람들 중에도 상상을 초월하는 기계치들이 꽤 많고 반대인 경우도 있습니다. 또 YP도 오래 묵다 보면 어차피 저도 모르는 사이에 OP가 되니까요.

따라서 제가 이 series를 시작하기로 결심한 이유는 자신의 문서를 웹 표준에 맞게 고치려는 사람들이나 현재는 계획에 없지만 나중에라도 바꿀 사람들에게 저와 같은 시행착오를 조금이라도 덜 겪게 하고, 나아가서는 이 글을 보는 분들 중에서도 이런 경험을 하신 분이 있다면 게시판등에 소개하여 '시행착오의 공유' 를 하고저 함이 솔직한 제 마음 입니다. 헥~ 쓰다보니 쩜 길어졌는데 그렇다고 기껏 써 놓고 지우기도 뭐하고... 까이거 머 걍 가 보도록 하겠습니다. 아래의 그림은 MSDN Library 에서 IE 6의 CSS2 지원 강화에 대한 글 중에 있는 그림으로, 표준에서 처리하는 width(CSS 'width')와 IE의 비 표준 모드(!DOCTYPE switch off) 상태에서 처리하는 width(Internet Explorer 'width')를 잘 비교한 그림 입니다.

CSS width와 IE width (8K)
CSS width와 IE width의 차이에 대한 그림 (출처 : MSDN Library)

Block box의 border 외곽선에 기준 잡기

!DOCTYPE switch on, off 에 대해서는 PLS Part I 에서 설명한대로 div box에 border와 padding을 줄 때 표준 방식 rendering에서는 border와 padding이 지정한 width, height 바깥으로 생기고, 비 표준 방식에서는 div box 안을 침범해서 생긴다는 것을 여러 번의 예제를 통해 확인한 바 있습니다. 이 문제는 layout 제작에 익숙치 않은 사용자에게 매우 복잡하게 느껴 집니다. 하나의 block box가 아닌 다수의 block box가 얼키고 설키다 보면 정신을 잃게 될지도 모를 일입니다. 그렇기 때문에 헷갈리지 않기 위해서는 자기 나름대로의 원칙적 기준이 필요합니다. 그래서 제가 제시하는 방법이 'block box 의 border 외곽선에 기준 잡기' 라는 것 입니다. 이 방법은 앞에서 했던 예제를 예로 들면

  1. 전체를 감싸는 div(예제의 class="wrap" div)의 width를 정한다.
  2. 전체 div 속에 들어갈 column 개수를 정한다.
  3. 각 column 의 width를 border 외곽 치수에 맞춰서 합계를 전체 div 이내로 한다.

의 순서로 layout을 잡는 것 입니다. 1, 2 번은 너무 당연한 얘기고, 3번에 대해 설명하면, 예를 들어 전체 div의 width를 750px로 하고 column을 3 개로 하며 각각 200px, 400px, 150px의 width에 border 1px, padding 10px를 column 4면(top, right, bottom, left) 마다 준다면 column width를 200px, 400px, 150px로 지정하지 말고 각 column width에서 좌우측 border(2px)와 padding(20px) size 를 뺀 수치인 22px 씩을 빼서 178px, 378px, 128px 로 지정하자는 말입니다. 아래와 같이 말입니다.

입력
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>Block box의 border 외곽선에 기준 잡기</title>
    <style type="text/css">
    <!-- 
    .wrap{width:750px;border:1px solid tomato;}
    .leftCol{width:178px;height:150px;border:1px solid gray;padding:10px;float:left;}
    .centerCol{width:378px;height:450px;border:1px solid gray;padding:10px;float:left;}
    .rightCol{width:128px;height:250px;border:1px solid gray;padding:10px;float:left;}
    -->
    </style>
    </head>
    <body>
        <div class="wrap">
              <div class="leftCol">leftCol</div>
              <div class="centerCol">centerCol</div>
              <div class="rightCol">rightCol</div>
        </div>    
    </body>
</html>
코드 실행 하기

이와 같은 block box의 계산 방식이 기존의 IE 비표준 모드를 사용하던 기존 사용자들에게는 생소하고 귀찮을 것 같습니다. 왜냐하면 비표준 모드의 경우 width를 지정하면 border나 padding을 얼마로 하든 지정한 width에서 파 먹기 때문에 밖으로 늘어나서 layout이 깨지는 일이 없기 때문이죠. 하지만 Layout 이라는게 일단 결정되면 이후로 별로 건드릴 일이 많지 않기 때문에 이런 계산이 그리 고단하게 느껴지지는 않으리라 봅니다.



Position property를 사용한 page layout

지난 PLS Part V 에서 float property에 대해 다루어 보았지만 IE 에서는 참으로 말도 탈도 많은 CSS property 가 float 입니다. 여러 사이트에서 이와 관련된 bug들을 reporting 하고 있지만 아직 다 밝혀진 건지 어떤 건지 모르겠습니다. 또한 IE version 7 에서 어떻게 달라질지 누가 알겠습니까. 따라서 float property를 사용하지 않은 layout도 생각해 볼 필요가 있습니다. 그래서 사용하는 또 하나의 layout format이 position property를 사용하는 방식이 되겠습니다. 즉, position:relative, position:absolute 를 적절히 이용하는 layout 인데 이 방식을 설명하기 위해 우선 position property가 가진 성질에 대해 알아 보도록 하겠습니다. 이미 이 사이트 CSS > positioning > position 에서 설명했던 것이지만 position 을 사용할 수 있는 조건에 대해 알아 보면 positioning 시킬 block box 가

  • 최상위 Element인 body의 바로 한 단계 하위 block box 인 경우
  • body가 직속 상위가 아닐 경우에는 자신의 한 단계 상위 block box 에 position:relative 또는 position:absolute로 positioning이 되어 있을 경우

에만 positioning을 할 수 있습니다. 또 positioning을 할 수 있다는 뜻은 top, right, bottom, left 등의 property를 사용하여 좌우상하로 위치를 잡을 수 있다는 말과 같은 뜻이라고 알면 되겠구요. 우선 아래의 예제를 통해 relative 로 positioning 된 box에 대해 알아 보겠습니다. 한꺼번에 다 늘어 놓으면 헷갈리거든요.

relative 로 positioning된 box와 일반 box와의 비교
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>relative로 positioning된 box와 일반 box와의 비교</title>
    <style type="text/css">
    <!-- 
    .rel{position:relative;width:200px;height:150px;
    border:1px solid tomato;}
    /*  */
    .box{width:200px;height:150px;border:1px solid lime;}
    -->
    </style>
    </head>
    <body style="margin:0;">
        <div class="box">normal flow box</div><!--  --> 
        
        <div class="rel">relatively positioned box</div>
        <div class="box">normal flow box</div>
    </body>
</html>
코드 실행 하기

실행 결과를 보면 relative로 positioning 된 box는 normal flow box(positioning 되지 않은 box)와 비교했을 때

  1. top, left를 지정하지 않으면 normal flow box와 구분되지 않고 같은 흐름을 갖는다.
  2. top, left를 지정하면 normal flow 위치 에서 지정한 top, left에 위치한다.
  3. right, bottom은 작동하지 않는다.
  4. 따라서 top, left를 지정해도 relative로 positioning된 box 위(이전)에 내용이 추가되면 같이 밀려내려 간다.

라고 정의할 수 있습니다. 즉, top과 left를 지정하지 않으면 normal flow box와의 차이점은 하나도 없습니다.

absolute 로 positioning된 box와 일반 box와의 비교 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>absolute로 positioning된 box와 일반 box와의 비교</title>
    <style type="text/css">
    <!-- 
    .abs{position:absolute;width:200px;height:150px;
    border:1px solid tomato;}
    /*  */
    .box{width:200px;height:150px;border:1px solid lime;}
    -->
    </style>
    </head>
    <body style="margin:0;">
        <div class="box">normal flow box</div><!--  --> 
        
        <div class="abs">absolutely positioned box</div>
        <div class="box">normal flow box</div>
    </body>
</html>
코드 실행 하기

실행 결과 absolute 로 positioning 된 box는 normal flow box(positioning 되지 않은 box)와 비교했을 때

  1. top, left를 지정하지 않으면 positioning된 box의 좌측 상단이 normal flow box 다음에 오지만 absolute로 positioning 된 box 이후에 오는 box(들)는 absolute로 positioning된 box를 흐름에서 제외한다.
  2. top, left를 지정하면 body의 원점(좌측상단) 위치 에서 지정한 top, left에 위치한다.
  3. right, bottom이 작동한다.
  4. 따라서 top, right, bottom, left 를 지정하면 absolute로 positioning된 box 위(이전)에 내용이 추가 되는 것과 관계 없이 항상 body(또는 상위 block box) 내의 지정한 위치에 고정된다.

가 되겠습니다.

또한 box 속의 내용물이 box에 지정한 width나 height를 넘어갈 경우 absolute나 relative로 positioning 된 box에 어떤 영향을 주는지도 생각해 봐야되는데, 이 경우에 box의 올바른 처리는 PLS Part V의 simulation 1, 2를 참고하시면 되겠습니다.

아울러 NN, FF 등에서 표준 방식으로 처리되는 box 의 성질에 대해서도 굳이 더 이상의 언급은 하지 않을 생각이며 box의 표준 방식 처리에 대한 자세한 내용은 PLS Part V 전체를 참고하시면 어느 정도는 소용이 닿을 것이라 믿습니다. 또한 웹 표준에 관심이 있는 분들은 FireFox 홈페이지를 방문해서 정보 및 자료를 참고하시기 바랍니다.

relative positioning 과 absolute positioning의 적절한 사용법

그렇다면 문제는 relative와 absolute를 어떻게 사용해야 '당신 참 smart한 사람이군요!' 라는 소리를 들을 수 있겠느냐 하는 것 입니다. 여기서 우리가 한 가지 전제로 해야 할 것이 있는데, 그건 바로 'positioning 시킬 box 위에 내용이 추가되거나 삭제 되었을 때 추가 된 내용에 따라 같이 움직인다.' 라는 것을 전제 조건으로 하겠습니다. 이 전제 조건을 만족 시키는 방법은 명확합니다. body tag 하위에 positioning 시킬 box를 position:relative 로 처리하고 필요에 따라 그 box(relative로 지정한) 속에 position:absolute로 지정한 box를 두는 것이죠. 이렇게 하므로서 상위의 relative box 는 box 위에 내용이 추가 삭제 됨에 따라 유동적으로 같은 흐름으로 움직일 수 있고, 그 속에 있는 absolute box는 상위 box(relative로 positioning된) 속에서 지정된(혹은 지정되지 않은) top, right, bottom, left 에 위치할 수 있습니다. 아래의 예제를 참고하세요.

absolute 로 positioning된 box와 relative로 positioning된 box와의 비교
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>absolute 로 positioning된 box와 relative로 positioning된 box와의 비교</title>
    <style type="text/css">
    <!-- 
    .rel{position:relative;width:200px;height:150px;
    border:1px solid blue;}
    .abs{position:absolute;width:25px;height:25px;
    border:1px solid tomato;}
    /*  */
    .box{width:200px;height:150px;border:1px solid lime;}
    -->
    </style>
    </head>
    <body style="margin:0;">
        <div class="box">normal flow box</div><!--  --> 
        
        <div class="rel">
            <div class="abs"></div>
        </div>
        <div class="box">normal flow box</div>
    </body>
</html>
코드 실행 하기

물론 이 방법은 'positioning 시킬 box 위에 내용이 추가되거나 삭제 되었을 때 추가 된 내용에 따라 같이 움직인다.' 라는 것을 전제로 한 것 이기 때문에 이런 전제가 아니라면 구태여 이 방법을 사용하지 않아도 되겠죠. 따라서 '나는 죽어도 body tag 속에 absolute positioning을 사용하고야 말겠다.' 라고 생각한다면 그렇게 쓴다고 누가 뭐라고 하겠습니까만(사실 죽는 것 보다는 그렇게 라도 쓰는게 약간 나을 것 같습니다.) 일반적으로 내용이 추가, 삭제되는 일이 많기 때문에 위의 예제와 같은 방식이 지극히 타당하다고 생각합니다. 그래야만 page layout이 소위 '유연성(Flexibility)' 이라는 것을 가질 수 있으니까요.

box를 absolute 로 positioning 할 경우의 문제점

위의 'absolute 로 positioning된 box와 일반 box와의 비교' 예제의 설명 1과 같이 absolute로 positioning된 box 이후에 오는 box는 absolute로 positioning된 box의 영향을 받지 않고(absolue로 positioning된 box가 body에서 독립하여 새로운 최상위 containing box가 되는 원칙 참조) absolute로 positioning된 box 위의 box와 연결되기 때문에 아래의 예제와 같이 absolute로 positioning된 box의 height가 상위의 relative로 positioning된 box를 넘칠 경우 뒤에 오는 box와 겹치게 됩니다.

absolute 로 positioning된 box의 문제점
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
        <title>absolute 로 positioning된 box의 문제점</title>
    <style type="text/css">
    <!-- 
    .rel{position:relative;width:200px;height:150px;
    border:1px solid blue;}
    /*  */
    .abs{position:absolute;width:25px;height:200px;
    border:1px solid tomato;}
    .box{width:200px;height:150px;border:1px solid lime;}
    -->
    </style>
    </head>
    <body style="margin:0;">
        <div class="box">normal flow box</div>
        <div class="rel">
            <div class="abs"></div>
        </div>
        <div class="box">뒤에 오는 box</div>
    </body>
</html>
코드 실행 하기

따라서 PLS series Part V 에서 제시한 몇 개의 page layout 에서 처럼 position:absolute로 지정한 본문 box 아래에 page footer를 둘 경우 위의 예제와 같은 겹칩 현상이 생기게 됩니다. 아마 이런 문제 때문에 position property를 사용한 layout에서 footer를 보기 힘든 것 아닌가 생각합니다. 하지만 위의 예제 중 'height 늘이기' 단추를 눌러 relative로 positioning된 box의 height를 늘인 후 코드 실행기를 돌려 보면 이 경우에는 뒤에 오는 box 가 늘어난 height의 영향을 받아 아래로 이동한 것을 알 수 있습니다. 그렇다면 relative로 positionign된 box 속에 내용이 늘어남에 따라 같이 늘어나는 box(absolute로 positioning 되지 않은 box)를 하나 넣으면 '뒤에 오는 box(footer)' 도 그 만큼 위치를 이동하게 된다는 말 아닐까요? 바로 이 부분에 착안해서 이 관리자가 만들어 본 layout이 바로 아래의 layout 입니다.

입력
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body{
margin:0;
padding:0;
font:12px/1.5em Tahoma;
color:#333;
}

/*page layout 전체를 둘러쌓는 div*/
.topBox{
margin:0 auto; /*중앙에 정렬, 좌측 정렬 : margin-right:auto; 우측 정렬 : margin-left:auto;*/
width:770px;
background-color:#eee
}

/*상단 logo, banner 등이 들어가는 div*/
.Header{
width:750px; /*좌우에 생기는 각각 10px 의 padding 포함하여 770px*/
height:80px;
padding:10px;
overflow:hidden; /*IE를 위한 bug 보정*/
border-bottom:1px solid #aaa;
}

/*중단의 왼쪽 menu, 본문, 오른쪽 side bar 등이 들어가는 div*/
.middleBox{
position:relative;
width:770px;
margin:0;
}

/*중단의 왼쪽 menu */
.leftCol{
position:absolute;
left:0;
top:0;
width:130px; /*좌우에 생기는 각각 10px 의 padding 포함하여 전체 width 150px*/
padding:10px;
}

/*이 부분이 이 layout의 요체입니다. 이 class를 적용시킬 div는 
positioning을 하지 않고 margin으로만  수평위치를 조절합니다.*/
.mainText{
margin-left:150px;
border:1px solid #aaa;
border-width:0 1px;
width:448px; /*좌우에 생기는 각각 1px 의 border 포함하여 전체 width 450px*/
padding:10px;
}

/*중단의 오른쪽 menu */
.rightCol{
position:absolute;
right:0;
top:0;
width:130px; /*좌우에 생기는 각각 10px 의 padding 포함하여 전체 width 150px*/
padding:10px;
}

.Footer{
width:750px; /*좌우에 생기는 각각 10px 의 padding 포함하여 770px*/
height:75px;
padding:10px;
overflow:hidden; /*IE를 위한 bug 보정*/
border-top:1px solid #aaa;
}
-->
</style>
</head>
<body>
<div class="topBox">

    <div class="Header">Header</div>
    
    <div class="middleBox">
        <div class="leftCol">           
        Left Column <br />Left Column <br />Left Column <br />
        Left Column <br />Left Column <br />Left Column <br />
        </div>
        <div class="mainText">
        mainText<br />mainText<br />mainText<br />mainText<br />mainText<br />
        mainText<br />mainText<br />mainText<br />mainText<br />mainText<br />
        mainText<br />mainText<br />mainText<br />mainText<br />mainText<br />
        mainText<br />mainText<br />mainText<br />mainText<br />mainText<br />
        mainText<br />mainText<br />mainText<br />mainText<br />mainText<br />
        mainText<br />mainText<br />mainText<br />mainText<br />mainText<br />
        mainText<br />mainText<br />mainText<br />mainText<br />mainText<br />
        mainText<br />mainText<br />mainText<br />mainText<br />mainText<br />
        </div>
        <div class="rightCol">
        Right Column <br />Right Column <br />Right Column <br />
        Right Column <br />Right Column <br />Right Column <br />
        </div>
    </div>

    <div class="Footer">Footer</div>
    
</div>

</body>
</html>
코드 실행 하기

위의 실행 결과와 같이 'mainText' 이라는 positioning 되지 않은 box를 둠으로서 footer를 사용할 수 있게 되었습니다. 이 layout에서 눈 여겨 볼 부분은 Header와 Footer를 제외한 가운데의 내용 부분에는 height를 지정하지 않고, 내용에 따라 늘어나거나 줄어들게 한다는 것 입니다. 하지만 이 layout 의 취약점은 'leftCol' 이나 'rightCol' 이 'mainText' 보다 길어지면 위의 'absolute 로 positioning된 box의 문제점' 에서 설명한 것 처럼 'leftCol' 이나 'rightCol' 이 Footer와 겹치는 현상이 생기게 된다는 것입니다. 따라서 이 layout을 사용하기 위해서는 'mainText' 의 height가 좌우 보다 짧을 경우 <br /> 등을 사용하여 'mainText'의 height를 의도적으로 늘여 줘야 한다는 것 입니다만 일반적으로 본문이 들어가는 'mainText'의 길이가 긴 것을 감안하면 전혀 쓰지 못할 page layout은 아니라고 생각하고, 부득이한 경우에는 Footer를 빼고 사용하면 된다고 봅니다.

하여간 이 page layout이라는 것은 뼈대와 같아서 한 번 결정되면 문서가 많이 생긴 다음에 수정하기가 여간 망설여 지는게 아니기 때문에 심사숙고를 거듭해야 할 부분입니다. 그럼 이 번 페이지는 여기서 마치고 다음의 PLS Part VI 에서는 본문 layout에 대해 알아 보도록 하겠습니다. 다음은 위의 예제의 독립된 file의 link와 page width를 percentage로 주어서 사용자의 화면 크기에 따라 full width가 되는 position을 이용한 layout 이니 참고 하시길...




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색