테이블 태그 해킹을 통한 박스

지금 이 페이지에도 여러 형태의 박스, 블럭 형태가 있습니다. 이런 박스들은 table 태그를 이용해서 만드는 것이 보통이었습니다. 하지만 <table> 태그는 문자 그대로 '표'를 만들기 위해서 개발된 것이었지 웹 페이지의 라이아웃을 정교하기 위해 만들어진 것이 아니었습니다. 페이지상의 덩어리(block)를 배치하고 조절하는 데 활용할 수 있는 태그가 따로 없었기 때문에 어쩔 수 없이 table 태그를 해킹해서 디자인했던 것입니다.

하지만 css가 나오면서 모든 것이 달라졌습니다. css는 화면 상의 디스플레이와 관계되는 모든 것을 아주 정밀하게 조절할 수 있으므로 굳이 table 태그를 해킹하지 않더라도 다양한 표현이 가능해진 것입니다.

div 태그

그렇게 table을 대체하는 용도로 css에서 사용하는 것이 <div>와 <span>입니다. <div>와 <span>은 "grouping element"라 합니다. 여러 요소를 한 데 모아서 조절하는데 사용되기 때문입니다. <span>은 한 줄 내의 어떤 것을 묶어 주는 역할을 합니다. <div>는 줄과 상관없이 독자적으로 묶어 주는 역할을 합니다. 그래서 <span>은 "inline-level element"라 하고 <div>는 "block-level element"라고 합니다.

예를 들어 스타일 정의 방법 문서에서 했던 것처럼.gray라는 class를 다음과 같이 정의했다고 합시다.

.gray {background-color: #ccc;}

이제, 한 문장의(inline) 바탕색을 회색으로 보이게 하고 싶은 부분이 있으면 <span>을 써서 다음과 같이 하면 됩니다.

<p>흰색 : <span class="gray">회색</span></p>

이 문장은 웹브라우져 상에서 이렇게 보입니다.

흰색 : 회색

이렇게 한 줄 內의 특정 부분을 그룹지을 때 쓰는 것이 span 입니다.

<div>는 이와 달리 여러 줄을 묶는 데 사용됩니다. 다음의 예를 보세요.

<div class="gray">
css와 xhtml를 사용하면<br />
스타일과 내용을<br />
완벽하게 분리할 수 있습니다
</div>

이 문장은 브라우져에서 이렇게 보입니다.

<div> 태그 내에는 또 다른 구성 요소(blockquote, h3, ...)를 넣을 수도 있습니다. 그 경우 가장 가까운 스타일 정의가 우선권을 갖고, 그게 없다면 차례차례로 스타일 적용이 되어서 최종적으로는 가장 크게 둘러싸고 있는 <div> 태그에서 지정한 스타일을 적용하게 됩니다. 따라서 큰 덩어리를 <div>로 묶어서 화면상의 위치등을 지정한 다음 그 내부에서 또다른 <div>를 써서 점점 더 정밀한 스타일을 정의해 들어가면 폭포수가 흐르듯(cascading) 스타일을 논리적으로 규정할 수가 있습니다. css의 마력은 바로 거기에 있습니다.

border, padding

그렇다면 기존에 <table> 태그를 이용해서 구현했던 정교한 디자인은 어떻게 css로 구현할 수 있을 지 자세히 알아 봅시다. <div>를 이용한 정밀한 위치 조정은 다른 글에서 다루기로 하고 이번 글에서는 <div> 태그를 이용해서 묶어준 부분의 경계선과 여백을 어떻게 설정하는지를 중심으로 알아 봅시다.

위 표에서 본 것처럼 <table>의 특성 하나가 모두 css로도 구현 가능합니다. 예를 들어 밑의 박스를 보세요.

옆의 박스는 <table> 태그를 사용하지 않고 만든 것입니다. 테이블의 폭경, border 의 두께, 색깔, 종류, 테이블 경계와 글자 사이의 간격(padding), 테이블 색깔 등을 css만으로 완벽하게 조절할 수 있습니다.
위 박스의 스타일 정의는 이렇습니다.

.boxSample1 { width: 20%; 
float:right;
text-align:center;
border-width:thin;
border-style:groove;
border-color:#333;
padding:3pt;
background-color:#eee;
margin:2em;}

위와 같이 스타일 정의가 되었다면 박스를 만드는 것은 간단하죠. <div class="boxSample1">박스 샘플 1</div> 처럼 묶어 주면 됩니다.

위 스타일 정의를 자세히 알아 봅시다.

1. width 는 <table>의 width와 똑같습니다. 숫자(픽셀)나 퍼센트로 지정할 수 있습니다.
2. float은 <img> 태그의 align과 비슷합니다. 화면의 어느 쪽에 '떠다니느냐'는 것입니다. <img>의 align 처럼 right, left 등으로 설정할 수 있습니다. 위의 예에서는 right으로 했기 때문에 박스가 본문의 오른쪽에 배치된 것입니다.
3. text-align은 <div> 태그 내에 들어있는 텍스트, 다른 구성요소(이미지,..)의 위치를 잡을 때 사용합니다. right, left, center의 세 가지 속성을 부여할 수 있습니다.
4. border-width, border-style, border-color는 박스 경계선의 폭경과 스타일, 색깔을 규정합니다.border-width의 속성에는 thin, thick이 있습니다.border-style은 groove, inset, outset 등의 속성이 있습니다. 경계선을 안으로 볼록하게 할 것인지 밖으로 볼록하게 할 것인지 등을 설정하는 것입니다.
5. padding은 <table>의 cellpadding처럼 박스 내에 담긴 부분과 경계선 사이의 여백을 가리킵니다. css에서는 이를 상하좌우 각각 설정할 수도 있습니다. 이런 식입니다. padding-right, padding-left, padding-top, padding-bottom. 이 점은 위에서 본 border도 마찬가지입니다.border-top-style, border-bottom-color 등의 형태가 가능합니다.
6. background-color는 배경색 설정입니다. table bgcolor, td bgcolor, tr bgcolor를 대체합니다.
7. margin은 박스 바깥 쪽과 박스 사이의 간격입니다. padding과의 차이점을 주의하세요. padding은 박스 내의 여백이고 margin은 박스 바깥의 여백입니다. 위에서는 글자 2자 정도로 벌린 것으로 설정했으므로 주변 텍스트의 오른쪽을 흐르면서(float:right) 텍스트와는 margin에서 지정한 만큼 떨어져 있는 것입니다.margin은 margin-left, margin-right, margin-top, margin-bottom을 각각 설정할 수 있습니다. 간격을 설정하는 단위는 포인트, 파이카, line-height 문서를 참조하세요.

물론 위 스타일 정의를 한 줄로 쓰셔도 됩니다. 읽기 좋게 하기 위해 줄을 나눈 것일 뿐입니다.

css에는 이 문서에서 다룬 것보다 훨씬 더 많은 다양한 property가 있으므로 웹에 있는 레퍼런스 자료를 참조하세요. 이 글은 css를 이용한 박스 만들기를 소개하는 것이므로 쉽게 이해되는 예를 위주로 설명했습니다.