Table 태그 안쓰고 레이아웃하기

요약 및 문서 상태

HTML을 쓸 때 테이블을 페이지 레이아웃 용도로 사용하지 말아야 한다는 사실은 누누히 강조되어왔다.

이 문서는 CSS만을 이용하여 3단 레이아웃을 생성하는 한 방법을 보인다.

커멘트와 제안 사항은 Dominique Hazaël-Massieux에게 보내면 된다. 이 문서의 번역본들도 참조하라.

본 문서는 Tableless layout HOWTO를 번역한 문서입니다. 본 문서의 내용은 원본과 다르거나 틀린 내용을 담고 있을지도 모릅니다. 본 번역에 대해 의견 주실 분은 번역자인 장민수(minsu[at]etri[dot]re[dot]kr)에게 연락 주세요.

소개

HTML은 구조 기술 언어다. 태그(tag)를 이용하여 글에 구조를 입히는데 사용하는 언어란 뜻이다. 이에 비추어볼 때 table 태그는 행과 열을 관련 지어 데이터를 구조화하는 용도로 사용해야 한다.

그러나, HTML에 테이블이 추가되자 테이블을 레이아웃 목적으로 사용하는 사례가 빈번하게 벌어졌다. 주로 웹페이지를 여러 단으로 나누는데 테이블을 사용한 것이다. 이는 HTML의 기능적 의미를 거스를 뿐 아니라 각종 기술적인 문제를 야기시키는 행위이다. 예를 들면, 화면 크기가 작거나 기계 사양이 낮은 상황에서 테이블을 포함하는 페이지를 파싱(Parsing)하고 화면에 표시할 때 여러 어려움이 발생한다.

이 문서는 3단 레이아웃을 만드는 한 방법을 설명한다. 또한 다른 페이지 레이아웃 방법들을 소개하는 여러 문서로 가는 링크들도 제공한다.

레이아웃 설명

아래에 소개하는 방법은 새 W3C 사용자 페이지를 만들 때 사용한 방법으로서 3단으로 페이지를 구성해 준다.

• HTML 코드 첫부분에 오는 글이 페이지의 가운데 단에 위치한다. 이 부분은 CSS를 지원하지 않거나 화면 표시 기능이 없는 브라우저로 열람하면 제일 먼저 읽게 된다.
• 왼쪽 단의 내용이 그 다음에 위치하고 오른쪽 단의 내용이 그 다음에 위치한다./li>

이러한 3단 레이아웃은 홈페이지의 구성에 이상적이다. 가운데 영역에 글을 배치하고 좌우 영역에 다양한 링크들을 배치할 수 있기 때문이다.

한 가지 안타까운 점은 CSS를 제대로 지원하지 않는 브라우저로 보면 원하는 대로 레이아웃이 표시되지 않는다는 점이다. 그러나, 이런 경우에도 페이지 내용은 HTML 코드에 적힌 순서에 따라 세로 방향으로 정렬되므로 볼 만 하다.

이 페이지에도 이 레이아웃 방법을 적용했으니 이 레이아웃 방법을 이용하면 페이지의 모양이 어떻게 되는지 감잡을 수 있을 것이다.

구현

 













이 레이아웃은 CSS 절대좌표 배치 방법을 사용한다. HTML 페이지에 세 개의 페이지 영역을 <div id="main">, <div id="list1" class="link-list">, <div id="list2" class="link-list">로 정의했다고 했을 경우, 다음의 CSS 규칙을 적용할 수 있다.

/* 좌우 페이지 영역이 공유하는 속성들 */
div.link-list {
        width:10.2em;
        position:absolute;
        top:0;
        font-size:80%;
        padding-left:1%;
        padding-right:1%;
        margin-left:0;
        margin-right:0;
}
/* margin-* 속성을 이용하여 영역의 가장자리에 빈공간을 만들 수 있다. */
#main {
        margin-left:10.2em;
        margin-right:10.2em;
        padding-left:1em;
        padding-right:1em;
}
/* list1과 list2를 좌우에 배치한다. */
#list1 {
        left:0;
}
#list2 {
        right:0;
}

위 코드는 margin-left와 margin-right로 주 영역의 양편을 잘라 빈 공간을 만들고, position:absolute로 좌우 양단을 배치한 후, 좌상귀의 좌표와 우상귀의 좌표를 (0,0)으로 설정한다.

CSS를 제대로 처리못하는 구현 시스템이 스타일시트(stylesheet)를 읽어들이지 못하도록 <style type="text/css">@import url('your-stylesheet-url');</style>로 호출하도록 한다.