CSS Visual Formatting | Page Layout Series Part III

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

Visual formatting

이번 페이지에서는 Page Layout 중에서 block box나 text box 의 수평과 수직 위치를 지정(alignment)하고 문장의 흐름(text flow)등을 다루는 Visual formatting 에 관한 CSS property 대해 알아 보겠습니다. 먼저 수평 정렬에 대해 알아 보겠는데, 알고 있는 것 처럼 수평 정렬이 적용되는 element 들은 모두 block level element 들 입니다. 즉 body, table, div, p, h1~h6, form, blockquote, ul, ol, dl... 등의 block level tag 속에 들어 있는 contents 의 수평 정렬을 다루는 것인데, table, div, p, h1~h6 등의 element는 자체에 align attribute(deprecated로 지정)를 가지고 있고 form, blockquote, ul, ol, dl 등의 block level element들은 element 자체에 align attribute를 가지고 있지는 않지만 CSS의 text-align property를 사용하여 수평 정렬을 지정하면 아래의 예제 처럼 left, center, right 등의 값이 적용됩니다.

HTML의 align attribute와 CSS의 text-align property 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

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

    <blockquote style="text-align:center;">blockquote</blockquote>
    <dl style="text-align:right;">Definition List
    <dt style="text-align:center;">Definition Term</dt>
    <dd style="text-align:left;">Definition Data</dd>
    </dl>
    <form style="text-align:center;">form</form>
    </body>
</html>
코드 실행 하기


HTML의 dir attribute와 CSS의 direction property

HTML의 block level element들의 공통적인 속성(공통 속성표 참조) 중에 dir 이라는 속성이 있다는 것은 이미 HTML 과정에서 설명한 바 있습니다. 물론 설명을 자세하게 하지 않아서 눈여겨 보지 않은 사람들은 잘 알지 못하겠습니다만, dir attribute는 문장의 수평 방향 흐름을 지정하는 attribute 입니다. 반드시 그런 건 아니지만 영어와 같이 왼쪽에서 오른쪽(ltr : left to right)으로 문장이 진행되는 경우와 한자나 아랍어, 히브리어와 같이 오른쪽에서 왼쪽(rtl : right to left) 으로 진행되는 경우 처럼 문장의 진행 방향을 결정하는 attribute 입니다. 따라서 dir을 ltr(default)로 지정할 때와 rtl로 지정할 경우, 브라우저 창의 모든 것 들의 진행 방향이 오른쪽에서 왼쪽으로 흐르게 됩니다. 아래의 예제와 같이 말이죠...

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

<html>
    <head>
        <title>dir attribute</title>
    </head>
    <body>
        <p>This is a Paragraph.</p>
        <div style="width:100%; height:100%; border:1px solid red;border-left:1px solid lime;">
            <div style="margin:25px;width:100px; height:100px; border:1px solid gold;"></div>
        </div>
    </body>
</html>

코드 실행 하기

어떻습니까? 'This is a Paragraph.' 와 브라우저창의 scrollbar 등의 방향이 바뀌었고, margin:25px 로 지정한 100px 의 정사각형 box도 dir="rtl" 로 지정할 경우 왼쪽에서 오른쪽으로 진행 방향이 바뀐 것을 알 수 있습니다. 이와 같이 dir="ltr"로 지정한 상태에서 하위 div에 margin을 지정하고 상위 div의 오른쪽 나머지 width가 하위 div에 지정한 margin값 보다 크면 왼쪽을 지정한 margin 값 만큼 띄우고, 오른쪽은 남는 만큼 남기게 됩니다. 즉, ltr(default) 이든 rtl이든 시작되는 방향의 margin을 우선적으로 지정하는 것을 알 수 있습니다. 이 dir attribute를 대신하는 CSS property가 바로 direction 입니다. 예를 들어 inline style로 direction property를 지정한다 치면 style="direction:rtl;" 등으로 지정하면 된다는 말입니다.


unicode-bidi

위의 예제와 같이 direction을 사용해서 문장과 단어의 진행 방향을 오른쪽에서 왼쪽으로 바꾸기는 했지만 글자 각각의 배열은 역시 왼쪽에서 오른쪽으로 흐르고 있습니다. 즉, 위 예제의 P tag속의 'This is a Paragraph.' 가 'This is a Paragraph.' 로 뒤집히지는 않았다는 말입니다. 이와 같이 문장과 단어 속의 글자 각각의 진행 방향을 양방향(bi-directional)으로 바꿀 수 있는 것이 CSS의 unicode-bidi property 입니다. 사용값은 normal, bidi-override(글자 배열 바꿈), embed(bidi-override로 바뀐 문장과 단어중 일부의 배열을 원래 배열로 돌림) 가 있습니다.

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

<html>
    <head>
        <title>unicode-bidi 예제</title>
    <style type="text/css">
    <!-- 
    .para{border:1px solid green; direction:rtl; font:bold 36px '돋움체';}    
    -->
    </style>
    </head>
    <body>
        <p class="para" style="unicode-bidi:normal;">大 韓 民 國 </p>
        <p class="para" style="unicode-bidi:bidi-override;">大 韓 民 國 (대한민국)</p>
        <p class="para" style="unicode-bidi:bidi-override;">大 韓 民 國 
            <span style="unicode-bidi:embed;">(대한민국)</span>
        </p>
    </body>
</html>
코드 실행 하기


Block box 정렬 시키기

수직이건 수평이건 어떤 block box를 어디에 정렬 시킨다는 것은, '어떤 Block box' 라는 하위 block box를 '어디' 라는 상위 block box에 정렬 시킨다는 뜻 입니다. Page Layout 의 목적은 body 라는 브라우저 창에 문서를 만드는 본인들이 문서에 넣으려고 하는 내용물 들을 정리정돈(align)하는데 있어서 body 속에 들어가는 최 상위 block box(table 이건 div이건) 를 하나 두고 그 속에 하위 block box 들을 원하는 방식대로 나열(layout)하여 전체 페이지를 이루게 하는 것 입니다. 이 순서는 페이지를 design 하는 사람의 취향에 따라 전체의 큰 틀(상위 block box)을 짜고 작은 틀들(하위 block box들)로 분할하는 경우도 있을 거고, 반대로 작은 틀(하위 block box)들을 모아서 큰 틀(상위 block box)로 묶는 방법도 있을 것 입니다.

이 둘 중에 어떤 방법을 쓰던 간에 한 가지 필수 공통적인 사항은 상위 block box와 하위 block box라는 개념이 사용된다는 것 입니다. 이 번에 설명하려고 하는 수직 수평 정렬에도 바로 이 개념이 사용되는데, 그건 바로 상위와 하위 둘 중에 누가 주체가 되느냐 하는 것 입니다. 이 걸 제 나름대로 이렇게 이름 지어 보았습니다. "주체 개념..." ^^; 이건 무슨 북한의 주체 ... 머시기 하고 비슷한 걸로 혼동할 소지가 다분하여 다시 한 번 이름 지어서 "관리자의 주체 개념" 정도로 해 두겠습니다. 에... 그러니까... 이 개념으로 말 할 것 같으면, 요체는 상위와 하위 둘 중에 누가 능동적인가 하는 개념이죠... 상위가 능동적인가 하위가 능동적인가... 이 개념을 아래에 나올 margin과 padding에 대입하면

  • margin
    하위 block box가 상위 block box 속에서 스스로 좌우 상하의 공간을 만들어 자신의 위치를 잡는 방법
  • padding
    상위 block 속에 하위 block box가 들어갈 필요 공간만 남기고 나머지 공간은 padding으로 채워서 틈을 주지 않는 방법

따라서 아래에 나올 margin 과 padding 도 같은 맥락으로 생각하면 이해가 보다 쉬우리라 생각합니다.

margin의 auto 값을 이용한 Block box의 수평 중앙(center) 정렬

IE 에서 div tag 을 중앙 정렬하는 방법은 중앙 정렬할 div의 상위 element에 text-align:center 로 지정하면 중앙 정렬이 됩니다. Div 뿐만 아니라 모든 block level element가 text-align:center에 의해서 중앙 정렬이 되죠. 그런데 이번에 Page Layout Series 를 진행하는 과정에서 NN, FF 등을 사용하면서 확인한 바에 의하면 NN, FF 에서는 text-align:center로 div를 중앙 정렬 시킬 수 없더군요. 제 생각인데 이건 NN, FF 에서 지원을 못하는 것 같습니다. 왜냐하면 W3C의 text-align spec에는 적용 대상(Applies to)이 Block leve element로 되어 있기 때문이죠. 그래서 NN, FF 에서 div를 중앙 정렬 시키는 방법은 바로 margin에 auto 값을 사용하는 방법이 입니다. 설명은 아래의 code로 대신 하겠습니다.

Block box의 수평 중앙(center) 정렬 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

<html>
    <head>
        <title>auto margin을 이용한 block box의 중앙 정렬</title>
    <style type="text/css">
    <!-- 
    div{width:50%; height:50px; border:1px solid green;}    
    -->
    </style>
    </head>
    <body>
        <div style="margin-left:auto;">margin-left:auto</div>
        <div style="margin:0 auto;">margin:0 auto</div>
        <!-- margin:0 auto 는 top, bottom은 0, right, left는 auto. 지정 순서는 padding 참조 -->
        <div style="margin-right:auto;">margin-right:auto</div>
    </body>
</html>
코드 실행 하기

이와 같이 text-align을 사용하지 않고도 margin-left, margin-right의 값을 auto로 지정하면 좌우의 margin을 균등 분할하여 block box를 수평 중앙에 위치 시킬 수 있으며, block box를 left, right로 위치 시킬 수도 있습니다.


Block box의 수직 정렬(vertical-align)

Block box의 수직 정렬... 사실 이 경우에 table element를 사용하여 td 속에 block box를 넣으면 아주 간단히 해결될 문제 입니다. HTML attribute를 사용 한다면 valign="middle" 을 써서 수직 중앙에 block box를 정렬시키면 되고, CSS를 사용한다면 vertical-align:middle 를 사용하면 되겠죠. 하지만 div 같은 경우 vertical-align 이라는 속성이 적용되지 않기 때문에 div box 속의 내용물을 수직 중앙에 위치 시키기 위해서 우선 div의 수평 중앙 정렬에서 처럼 margin 을 이용하는 방법을 보겠습니다. 이 때 표준 모드와 비표준 모드간의 차이점 때문에 약간의 문제가 생길 수도 있는 것 같습니다. 일단 아래의 예제를 보시죠.

margin을 이용한 div 의 수직 중앙 정렬
<DTD 선언 부분>

<html>
<head>
<title>margin을 이용한 div 의 수직 중앙 정렬</title>
</head>
<body>
<div style="height:50%; background-color:gold;">
<div style="background-color:lime; margin:10% 10%;height:50%;">

</div>
</div>
</body>
</html>


코드 실행 하기

실행 결과를 보면 알 수 있듯이 표준 모드에서는 내용이 있든 없든 하위 div가 상위 div 의 수직 중앙에 위치하고, 비표준 모드의 경우 내용이 있을 때는 top-margin, bottom-margin 이 균등하게 되어 하위 box가 수직 중앙에 위치 하지만 내용이 없었을 경우 margin-bottom이 더 많이 생기는 걸 알 수 있습니다. 이 결과가 생기는 이유는 위의 dir attribute 에서 설명한 것 처럼 상위 box에 dir="rtl" (default) 로 지정하고 하위 box의 { (margin-left) + width + (margin-right) } 값이 상위 box의 width 보다 작을 경우 margin-left 는 지정한 값을 적용시키고, margin-right는 나머지 값 만큼 남기는 것과 같은 이유 입니다. 수평의 경우 왼쪽에서 오른 쪽이 정방향이고, 수직의 경우 위에서 아래쪽이 정방향이기 때문이죠. 따라서 내용이 있으면서도 그 내용물의 { (margin-top) + height + (margin-bottom) } 값이 상위 box의 height 보다 커질 만큼의 내용이 있어야 되겠죠. 그러므로 비표준 모드를 사용하면서 div box를 수직 중앙에 위치 시키려면 이런 점들을 고려해야 되겠습니다.

이 번에는 padding을 이용하는 방법으로 위에서 설명한 상위 block 속에 하위 block box가 들어갈 필요 공간만 남기고 나머지 공간은 padding으로 채워서 틈을 주지 않는 방법이 되겠습니다.

padding을 이용한 div 의 수직 중앙 정렬
<DTD 선언 부분>

<html>
<head>
<title>padding을 이용한 div 의 수직 중앙 정렬</title>
</head>
<body>
<div style="height:50%; background-color:gold; padding:10% 10%;">
<div style="background-color:lime;height:50%;">

</div>
</div>
</body>
</html>


코드 실행 하기

위의 실행 결과에서 보듯이 margin이나 padding을 사용하여 상위 box의 수직 중앙에 하위 box를 위치 시킬 수 있습니다. 그런데 padding의 경우 상위 box가 body tag일 때 즉, body tag 바로 밑에 div는 padding으로 수평 중앙 정렬이 되지 않는다는 사실을 유념하시기 바랍니다.

이 페이지에 사용된 수직 중앙 정렬의 예제에 대한 의문

이 페이지를 그냥 대충 보았거나, 클릭을 잘 못해서 실수로 이 페이지를 열어 본 사람이 아니라면... 즉, 이 페이지를 꼼꼼히 본 사람이라면 다음과 같은 의문을 가질 지도 모르겠습니다. 아니 가지는게 어쩜 당연하므로 '뭐 궁금한게 없던가요?' 라고 제가 질문을 던지겠습니다. 제가 이렇게 질문을 던져도 대답을 할 수 없는 여러분들... 즉시 서로가 대화하기 힘든 웹 페이지라는 미디어의 특성상 이 번에도 항상 그래 왔던 것 처럼 여러분들을 대신하여 관리자인 제 스스로가 궁금해서 더 이상 견디지 못하고 질문했다고 치겠습니다. 그 질문은...

  1. 수직 정렬에 대한 예제에 500px 같은 고정 수치를 사용하지 않고, 왜 percentage를 사용했나.
  2. 또 그 percentage는 어떤 길이에 대한 percentage인가

라는 두 가지 입니다. 질문을 받았으니 당연히 답이 있어야 되지 않겠습니까? ^^... 그럼 답변을 하겠습니다. 먼저 1 번 항목에 대한 답변은... 고정 수치를 사용한 결과는 너무 당연히 알 수 있기 때문 입니다. 예를 들어 외곽 사이즈가 200px X 200px 인 box 속에 100px X 100px 짜리 내용물을 수평 수직 중앙에 위치 시키겠다고 하면, 아래와 같이

고정 수치를 사용한 Layout 
...
<body>
    <div style="width:200px; height:200px; padding:50px;"></div>
</body>
...

coding 하면 됩니다. 다만 IE 사용자의 경우 표준 모드와 비표준 모드 중에 어떤 것을 사용할지 만 결정하면 되겠죠. 하지만 브라우저 창의 크기에 따라 변동되는 percentage를 사용했을 경우 어떤 길이에 대한 percentage 인지 알아야 할 것 같아서 percentage를 사용했습니다. 으음... 그러고 보니 자연스럽게 2 번째 질문과 연결이 되는군요. 모든게 정말 물 흐르듯이 자연 스럽지 않습니까? 하긴 관리자와 관Lisa가 서로 짜고 주고 받는 질문이니 당연히 의도된 대로...^^... 그럼 2 번째 질문에 대한 답을 해야 되겠습니다. 그런데 이 답변은 2 가지 입니다. 답변이 2 가지인 이유는 IE의 표준과 비표준이라는 양면성 때문이죠. 표준 모드와 비표준 모드 양쪽의 결과가 다르게 나옵니다. 우선 아래의 예제를 실행해 보고 답변을 하도록 하죠. 아래의 예제와 같이 상위 box의 크기를 300px X 200px 의 고정 수치로 주고 padding을 10%로 주고 테스트를 하겠습니다.

입력 
<DTD 선언 부분>

<html>
    <head>
        <title>무엇에 대한 percentage 인가.</title>
    </head>
    <body>
        <div style="width:300px;height:200px; background-color:gold; padding:10%;">
            <div style="width:100%; height:100%; background:lime;"></div>
        </div>
    </body>
</html>
코드 실행 하기

이와 같이 서로 다른 결과가 나옵니다. 따라서 IE 에서 표준 모드와 비표준 모드를 사용할 때 나타나는 길이의 percentage에 대한 2 가지 결과에 대해 설명을 해야 되는데, 각각 공통점과 차이점이 하나씩 있습니다.

  • 공통점
    width와 height 중에서 width에 대한 percentage로 계산이 됩니다. 즉, 위의 예제와 같이 padding:10%로 주면 top, right, bottom, left 각 4면에 width 길이의 10% 씩의 padding이 생기게 됩니다.
  • 차이점
    • 표준 모드 : 상위 block box의 width가 기준이 됩니다. 즉, 예제와 같이 box에 width:300px 로 주건 얼마로 주건 상위 block box 인 브라우저 창의 width를 기준으로 합니다. 따라서 브라우저 창의 크기가 resizing 되면 padding도 같이 변동이 생기죠. margin의 경우도 물론이구요.
    • 비표준 모드 : CSS로 지정한 block box 자신의 width가 기준이 됩니다. 즉, 위의 예제와 같이 box에 width:300px 로 지정하고 10%의 padding을 주면 30px 의 padding이 생기게 된다는 거죠.

^^... 어떤가요 IE 사용자 여러분... 헷갈립니까? 이 문제(IE의 표준 모드와 비표준 모드)를 전혀 몰랐거나 깊이 생각해 보지 않은 사람이라면 그럴 것 입니다. 하지만 휴대전화나 PDA 같은 무선 기기나 XML 계열의 전문화된 언어와의 호환을 목적으로 하지않는 일반적인 홈 페이지의 주인 이라면 이미 비표준으로 많은 문서를 만들었다고 해도 별로 걱정할 필요가 없다고 봅니다. 다만 자신의 홈 페이지를 XHTML이나 XML로 upgrade 하거나 이제 홈 페이지를 새로 만들 계획을 가진 IE 사용자라면 반드시 알고 넘어가야 될 문제 입니다. 이 문제를 고려하지 않고 문서를 만들었다가 나중에 수정하려면 문서가 많은 홈 페이지 같으면 상당히 애를 먹을 수 있으니까요.

그럼 Page Layout Series Part III 은 여기에서 끝내고 다음 PLS Part IV 에서...




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

Top
Back
New
검색