테이블 외부 여백 margin 지정하기

로빈아빠

https://cmd.kr/javascript/602 URL이 복사되었습니다.

8,289 0 2009.12.05 14:07

본문

CSS with Standards | Page Layout Series Part II

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

CSS with Standards

지난 페이지(Page layout & DTD)에는, IE 6.0에서의 DTD mode 선언에 따라 150 pixel 정사각형의 border가 다르게 rendering 된다는 사실을 확인한 바 있습니다. 이번 페이지에서는 border와 함께 CSS box model과 관계된 나머지 CSS property인 margin과 padding에 대해서 집중적으로 알아 보도록 하겠는데 그에 앞서서 또 한가지 짚고 넘어가야할 표준 모드와 비 표준 모드의 중요한 차이점이 있습니다. 그 차이점은 바로

표준 모드와 비 표준 모드 각각에서 화면 상에 rendering되는 최상위 element가 어떤 element냐 하는 문제 입니다.

여러분들이 익히 알고 있다시피 아래와 같이 <html>이 최상위 element이고, 그 문서의 정보와 style block, script block, meta element, link 등에 대해 기술하는 <head> section과 실제적으로 화면에 rendering 되는 <body> section이 있습니다. 즉, html elemnt는 html 문서가 <html>에서 시작해서 </html> 에서 끝난다는 markup을 하는 역할만을 하는 것으로 생각하지만, 그건 어디까지나 DTD를 선언하지 않거나 DTD를 표준 모드로 선언하지 않았을 경우이고, Standard-compliant mode에서는 html element도 화면에 rendering 된다는 사실입니다. 확인을 위해서 아래와 같이 html code를 표준 모드와 비표준 모드로 !DOCTYPE 선언을 바꿔서 각각 실행해 보시죠.

표준 모드비 표준 모드

입력

<DTD 선언 부분>

<html style="background-color:tomato;">
  <head>
    <title>표준 모드와 비표준 모드에서의 TopElement</title>
  </head>
  <body style="background-color:gold; width:200px; height:200px; margin:50px; padding:25px;">
    <div style="width:200px; height:200px; background-color:royalblue;"></div>
  </body>
</html>

이와 같이 표준 모드에서는 화면상에 rendering되는 최상위 element가 <html>이고 비표준 모드에서는 <body>라는사실입니다. 이 사실은 뒤에 다룰 positioning에서 커다란 차이를 보이게 됩니다. 또한 DTD를 표준 모드로 선언하고, <html>에 background-color를 지정하지 않았을 경우, <body>에 지정된 background-color 가 화면에 rendering 됩니다.

이제 이 페이지에서 다룰 내용인 padding, border, margin 으로 돌아와서, 우리가 앞 페이지에서 확인한 바와 같이 표준 모드(Standard-compliant mode)와 비표준 모드(Non standard-compliant mode)에서 rendering 된 border의 width를 비교해 보면 아래와 같이

표준 모드
지정한 width와 height를 침범하지 않고 지정한 border의 두께를 rendering 한다.
비표준 모드
지정한 width와 height를 침범하여 지정한 border의 두께를 rendering 한다.

이렇게 정리할 수 있겠습니다. 이와 같이 지정한 width와 height를 침범하느냐, 하지 않느냐 라는 차이를 다르게 표현하면, 표준 모드에서의 rendering은 지정한 width와 height를 내용물(content)이 들어갈 수 있도록 항상 확보해 주며, 비표준 모드에서는 그렇지 않다라고 표현할 수 있겠습니다. 아래의 DHTML은 이미 CSS / Layout / margin 에서 표현했던 DHTML로서 content, padding, border, margin을 내부에서 외부의 순서로 표현한 그림이 되겠습니다. 이 그림을 보고 다시 한 번 각 부분을 확인하고 다음 설명을 보시기 바랍니다.

CSS Box Model

MARGIN-TOP

MARGIN-LEFT

BORDER-TOP

BORDER-LEFT

PADDING-LEFT	PADDING-TOP	PADDING-RIGTH
	CONTENT
	PADDING-BOTTOM

BORDER-RIGHT

BORDER-BOTTOM

MARGIN-RIGHT

MARGIN-BOTTOM

content area	padding area	border area	margin area
content edge	padding edge	border edge	margin edge

Container 란 어떤 부피(contents)를 담는 그릇(담을容, 그릇器)을 말하며, HTML의 Div, Table 등과 같이 4각형의 block level element 들을 container, 또는 containing block이라고 부릅니다. 예를 들어 우리가 가로(width)50, 세로(height)50의 4각형 모양의 물건(내용물:contents)을 box에 포장해서 창고(body등의 최상위 block level element)에 둔다고 생각해 봅시다. 그러기 위해서는 최소한 내경이 가로, 세로 각 50 이상의 포장 box가 필요할 것 입니다. 거기다 이 물건이 부숴지기 쉬운 물건이라서 스틸로폼 같은 완충 작용을 하는 물건을 포장 box와 물건 사이에 끼워 넣는다고 하면 포장 box의 크기는 물건 크기인 50 X 50 에 스틸로폼 띠(band)의 두께를 합친 크기가 될 것 입니다. 또 포장 box의 두께도 있다면 그 두께 까지 합쳐야 포장 box의 외곽 size가 나오겠죠. 그리고 이런 포장 box가 여러 개가 있어서 포장 box 사이로 다닐 수 있는 공간을 두어야 할 수도 있습니다. 그렇다면 아래와 같이

contents : 50 X 50의 물건
padding : 스틸로폼의 두께
border : 포장 box의 두께
margin : 포장 box 와 창고, 또는 포장 box와 다른 포장 box와의 공간

와 같이 대입할 수 있습니다. 바로 이런 식의 계산이 Standard-compliant mode 라고 생각하면 되겠습니다. 거기에 비해서 Non standard-complinat mode는 50 X 50 의 내용물을 외경 50 X 50 의 포장 box에 넣고, 포장 box의 두께가 있으면 포장 box 두께 만큼 내용물을 깍아내고, 스틸로폼 넣을 공간이 없으면 또 스틸로폼 두께 만큼 내용물을 깍아내는 격이 되겠습니다. 따라서 이 두 가지 경우의 예를 생각하면 standard-compliant mode와 non standard-compliant mode 의 차이를 구분할 수 있겠습니다.

표준 모드와 비표준 모드에서의 padding의 rendering 비교

이제 위의 그림을 보고 각 CSS property를 나름대로 우리말로 바꿔보면

content : 내용물
padding : content의 내부 여백.
border : content의 내부 여백과 외부 여백의 경계선.
margin : content의 외부 여백.

이렇게 정의할 수 있겠습니다. 그러면 지금 부터 표준 모드와 비표준 모드에서 padding이 어떻게 rendering 되는지 알아 보겠습니다. 그런데 이 padding의 경우 padding band 부분만 bakcground-color를 따로 지정할 수 없기 때문에 편의상 표현하고자 하는 div속에 또 하나의 div를 넣고, 속에 들어간 div의 background-color를 다르게 지정해서 구별하도록 하겠습니다.

표준 모드 padding비 표준 모드 padding

입력

<DTD 선언 부분>

<html>
  <head>
    <title>content, padding, border, margin</title>
  </head>
  <body style="background-color: royalblue;margin:0px;">
    <!-- width:150px; height:150px 의 기준 div 시작 -->
      <div style="width:150px; height:150px;background-color:gold;
        border:10px solid tomato;padding:50px;margin:50px;">
        <!-- padding을 표현하기 위한 div 시작 -->
        <div style="width:100%; height:100%;background-color:white;">
          &nbsp;
        </div>
      </div>
  </body>
</html>

위 code의 실행 결과를 비교하면 전 페이지의 border와 마찬가지로

표준 모드
지정한 padding이 width:150px; height:150px 를 확보 한 채로 containing box 외부에 생긴다.
비표준 모드
지정한 padding이 width:150px; height:150px의 box 속을 침범하여 widht와 height가 각각
150px - ((border 10px + padding 50px) X 2) = 150px - 120px = 30px

라는 결과가 나옵니다. 따라서 비표준 모드의 경우 containing box각 4 면에 모두 border와 padding을 지정하고 content 를 넣지 않았다고 가정했을 때,

{ (border-left + border-right) + (padding-left + padding-right) }가 width 보다 클 경우 또는
{ (border-top + border-bottom) + (padding-top + padding-bottom) }이 height 보다 클 경우

아래의 예제 code와 같이 containing box의 면적이 0 (zero)이나 - (minus) 값을 가지는 말도 안되는 경우가 생길 수 있습니다. 물론 이럴 경우에도 containing box 속에 content가 있으면 content 크기 만큼의 면적은 확보할 수 있지만, containing box의 width가 지정한 width가 아닌 content의 크기에 따라 결정 되므로 해서 처음에 확보하고자 했던 width 만큼을 확보할 수 없게 되는거죠.

border와 padding에 밀려 사라진 content box

<html>
  <head>
    <title>content, padding, border, margin</title>
  </head>
  <body style="background-color: royalblue;margin:0px;">
      <div style="width:150px; height:150px;background-color:gold;
        border:25px solid tomato;padding:50px;margin:50px;">
        <div style="width:100%; height:100%;background-color:white;">
          <!-- 비어있는 content -->
        </div>
      </div>
  </body>
</html>

margin

margin 이란 앞에서 설명한 것 처럼 box 외부에 생기는 공간으로서, 제가 '외부 여백' 이라고 표현했습니다. 따라서 이 margin의 경우는 content box의 내부를 침범하지 않습니다. 다만 margin의 경우 처럼 문서 내의 다른 block level element 나 text level element들과 서로 접하는 부분이 있는 element의 경우에는 달랑 box 자체 만을 생각해서는 안되고 인접한 다른 element 들과의 상관 관계를 항상 생각해야 됩니다. 그래서 아래와 같이 최상위 div를 하나 만들고, 그 안에 같은 class를 가지는 div를 수직으로 3개 놓아 보았습니다. 우선 margin이 표준 모드와 비표준 모드에서 어떻게 다른지 실행 부터 해 보시죠.

표준 모드 margin비 표준 모드 margin

margin

<DTD 선언 부분>

<html>
  <head>
    <title>content, padding, border, margin</title>
  <style type="text/css">
  <!-- 
  .outerDiv{width:100%; height:100%;border:1px solid blue;}
  .innerDiv{width:100px; height:100px; border:1px solid red; margin:25px;}
  -->
  </style>
  </head>
  <body>
    <div class="outerDiv">
      <div class="innerDiv"></div>
      <div class="innerDiv"></div>
      <div class="innerDiv"></div>
    </div>
  </body>
</html>

결과를 보면 width, height 값을 100%로 주었을 때 표준 모드와 비표준 모드의 100%에 대한 rendering 면적이 다른 것 말고는 같은 결과 입니다. NN이나 FF에서도 같은 결과가 나오더군요. 이 부분에서 눈여겨 보아야 할 것은 표준 모드와 비표준 모드 공히 box 서로 간의 margin이 25px 라는 사실입니다. margin을 25px로 지정했으니 당연한 결과입니다만 box 가 서로 만나는 부분도 margin이 25px 라는 사실 입니다. 즉, box 각각에 25px 의 margin을 지정했다고 해서 만나는 부분이 25px + 25px = 50px 가 아니라 25px 라는 거죠. 그러므로 margin은 양쪽 box에 각각의 값을 지정했을 때 아래의 예제와 같이 큰 값이 결과적으로 적용됩니다.

margin 값의 계산

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

<html>
  <head>
    <title>content, padding, border, margin</title>
  <style type="text/css">
  <!-- 
  .outerDiv{width:100%; height:100%;border:1px solid blue;}
  .innerDiv{width:100px; height:100px; border:1px solid red; margin:25px;}
  -->
  </style>
  </head>
  <body>
    <div class="outerDiv">
      <div class="innerDiv" style="margin-bottom:50px;"></div>
      <div class="innerDiv" style="margin-left:-50px;"></div>
      <div class="innerDiv" style="margin-top:50px;"></div>
    </div>
  </body>
</html>

어떻습니까. 큰 값만 만족 시키면 되죠? 또한 padding과 margin의 또 다른 차이점은 padding은 - (minus) 값을 가질 수 없지만 margin은 - 값을 가질 수 있다는 사실 입니다.

Block level element 의 intrinsic margin value

Intrinsic value에서 intrinsic 이란 단어는 사전적 의미로는 '고유의', '본질적인', '본래 갖추고 있는' 이라는 뜻을 지닌 단어로서 여기서는 '지정하지 않아도 원래 가지고 있는' 이라는 뜻으로 풀이하면 되겠습니다. 즉, block level element 의 intrinsic margin value 는 '지정하지 않아도 block level element가 원래 가지고 있는 margin 값' 이라고 해석 하겠습니다. 그런데 이 intrinsic margin value의 경우 같은 block level element 라도 다소의 차이를 가지고 있습니다. 아래의 예제를 실행해 봅시다.

Block level element 의 intrinsic margin value

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

<html>
    <head>
        <title>Intrinsic margin value</title>
    <style type="text/css">
    <!-- 
    table, h1, p, div, form, blockquote, dl, dt, dd{border:1px solid tomato;}
    -->
    </style>
    </head>
    <body>
    <h1>Heading 1</h1>
    <p>Paragraph</p>
    <div>DIVision marker</div>
    <table width="300">
        <tr>
            <td>table</td>
        </tr>
    </table>

    <blockquote>blockquote</blockquote>
    <dl>Definition List
    <dt>Definition Term</dt>
    <dd>Definition Data</dd>
    </dl>
    <form>form</form>
    </body>
</html>

위의 예제와 같이 element마다 border를 지정해 보면 각 block level element 마다 가지는 intrinsic margin value 를 확인할 수 있는데 이 것들 중에서 table, div, dt, dd와 같이 intrinsic margin value가 '0' 인 element와 p, blockquote, dl, form 등과 같이 대략 19px(FF에서는 약 16px) 정도의 intrinsic margin value를 가지는 element가 있는 것을 알 수 있습니다. 또 특이하게도 blockquote 의 경우에는 상하(margin-top, margin-bottom)에만 margin이 생기는게 아니라 좌우(margin-left, margin-right)에도 margin이 생긴다는 거죠. 물론 이 경우에도 p, blockquote 와 같이 19px 정도의 상하 margin을 가지는 경우도 위의 'margin 값의 계산'에서 설명한 것과 같이 19px + 19px = 36px 와 같이 계산 하는게 아니라 둘 중에 큰 값이 있으면 큰 값을, 둘이 같은 값이면 같은 값 만큼만 margin이 생깁니다. 이와 같이 어떤 block level element의 margin을 눈으로 확인하고 싶으면 border 또는 background-color등을 지정하여 보다 현실감있게 각 block level element가 가지는 intrinsic margin value를 확인 해볼 수 있겠습니다. 그럼 PLS part III 에서...

댓글목록

등록된 댓글이 없습니다.

인기검색어

본문