발진!! 아스라다

HTML에서 가장 많이 쓰이는 태그는 아무래도  <table>이 아닐까 한다.
표를 그리기 위한 table태그지만 레이아웃을 잡을때도 그 역할을 톡톡히 해내는
만능 태그이다. 물론 레이아웃용으로 쓰이는건 지양해야 하지만 말이다.

<table> 알맞게 쓰기

테이블을 그리기에앞서 테이블의 용도를 먼저 생각해야 한다.
<table>태그의 존재이유는 바로 '표'를 표시하기 위함이다.
표란 말 그대로 엑셀의 시트처럼 가로세로 칸이 나뉘어진 틀을 의미한다.
학급의 학생 목록이나 은행 계좌 거래 내역같은 일정한 형식의 내용들이 반복되는 경우
표를 써서 알아보기 쉽게 표현할 수 있다.
하지만 HTML에서 표를 그리는 역할을 맡은 <table>태그는 본래의 임무보다 과도한 일을 묵묵히
수행하고 있다.
페이지의 레이아웃을 잡기 위해 쓰이기도 하고 간격을 맞추기 힘든 부분에 <table>을 써서
꼼수로 간격을 맞추기도 한다.
이것은 코드와 디자인의 분리를 더욱 어렵게 만들고 나아가 필요 없는 부하를 유발한다.
실제로 <table>태그는 <div>태그에 비해 처리 속도가 늦다고 한다.
학생은 학생답게, 남자는 남자답게, <table>은 테이블답게....??


또한 가장 많이 쓰이는 태그이다보니 가장 많은 잘못된 습관을 야기시키기도 한다.
대표적으로 form태그와의 혼용문제이다.

흔히 form태그가 들어가면 공백이 생긴다는 이유로 form태그를 table 태그 안에 넣는 경우가 있다.

하지만 위는 아주 잘못된 태깅이다.
폼태그의 공백은 css에서 form{margin: 0}을 설정해 주는 것만으로 깔끔하게 처리가 된다.
다음과 같이 폼태그가 테이블 태그를 감싸는 것이 올바른 태깅이다.

또 <tr></tr>과 <tr></tr> 사이에는 폼태그가 들어가면 안된다.
단, <td></td>사이에는 허용이 된다.


다음으로 흔히 접하게 되는 잘못된 사용예는 테이블에 그룹핑을 하지 않는 것이다.
표준 테이블의 모양은 다음과 같다.

단, tfoot는 필요에 따라 빼도 상관 없다.

이렇게 그룹핑을 함으로써 얻어지는 잇점은 다음에 살펴볼 테이블의 속성에 있다.


속성(Attribute)

1.rules

rules는 셀의 경계선을 나타내는 방법을 지정하는 속성이다.
위의 테이블에 border="1" 속성을 추가해 보자.
테이블의 모든 셀들이 작은 박스로 나뉘어 구분되어진다.
이제 rules="cols" 속성을 추가해 보자.
외곽선을 제외한 가로줄이 모두 없어졌다.
rules의 값을 rows로 바꿔보자.
이번엔 세로줄이 모두 사라지고 안보였던 가로줄이 나타난다.
만약 이 속성값을 모르고 있다면 각 셀마다 일일이 css로 border 값을 설정해주느라 태그가
엉망진창이 되버릴것이다.

rules 의 속성 값에는 cols,rows,all,groups,none 가 있다.


2.frame

frame는 테이블의 외각선을 나타내는 방법을 지정하는 속성이다.
rules와 더불어 css노가다를 획기적으로 줄여주는 속성이다.

frame의 속성 값에는 void,above,below,lhs,rhs,hsides,vsides,box,border 가 있다.



스타일(CSS)

3.border-collapse

border-collapse는 css이다.
보통 테이블에 border속성을 주면 값이 1이라도 선이 굵게 나와 보기 좋지 않다.
이떼 style="border-collapse: collapse;" 라고 스타일을 지정해주면
얇은 선으로 표시가 되어 한결 깔끔해진다.
테이블에 border속성을 주지 않고 style로 border: solid 1px #000000; 과 같이 border를 만들었다면
이 문서를 프린터로 인쇄 하면 선이 보이지 않는 문제가 있다.
하지만 테이블에 border값을 주고 스타일로 collapse를 지정함으로써 위와 같은 문제를
해결 할 수가 있다.

border-collapse 속성 값에는 collapse,separate 가 있다.

4.table-layout

테이블의 각 셀에 width,height값을 주지 않으면 브라우져가 자동으로 셀의 내용에 맞게
크기를 계산하여 그리게 된다. 하지만 셀에 width,height 값을 주어도 셀의 내용이 커지면
셀의 모양이 흐트러지게 된다.
이럴때 table-layout css를 사용하면 셀의 넓이를 정확히 고정시킬수 있다.
style="table-layout: fixed;" 이렇게 스타일을 지정하면 셀 내용에 상관없이 지정한 크기로 그려진다.

table-layout 속성 값에는 fixed,auto가 있다.



위의 테이블의 속성,css는 테이블을 그리는데 있어 가장 기본적인 것들이다.
더 세세한 내용은 http://www.w3c.org 홈페이지에서 HTML의 Table 명세를 보거나 테이블관련 CSS를 보면 쉽게 정보를 얻을 수 있다.
다시한번 강조하지만 테이블로써 레이아웃을 잡는건 아주 잘못된 습관이다.
테이블의 탄생 목적은 표를그리기 위함 이라는것을 명심하자.

"Markup Language 인 HTML에서 올바른 태그는
선택이 아닌 필수이며 코더의 의무이다."

렌더링 계산 방식의 차이

DIV로 레이어를 잡을때 가장 골치 아픈 문제가 레이어의 위치를 잡기가 어렵다는것이다.
테이블처럼 마음대로 위치를 잡는 일이 여간 힘든게 아니다.
이리 해도 안되고 저리 해도 안되서 결국엔 그냥 테이블로 짜는 경우가 허다하다.
하지만 테이블 본연의 임무는 표(grid)를 표시하는 일이니 억지로 다른일을 시키면 안되겠다.

아직까지는 모질라와 IE양대 진영의 브라우져간 렌더링 방식의 차이로 인해
코드 하나로 두 버전의 브라우져에서 동일한 표현을 하기는 쉽지 않다.
표준을 지키지 않는 IE때문에 개발자들만 이리저리 피곤하다.

W3C의 제안은 width값에 Border+Padding+Margin 값을 합산하는걸 표준으로 정하고 있다.
하지만 IE는 반대다.
width 값에서 Border+Padding+Margin을 뺀다.

firefox에서 가로 100px, border: 1px,padding: 10px; margin: 10px;의 박스를 그리려면
1*2 + 10*2 + 10*2 = 42
42 + 100 = 142
즉 내용이 들어갈 공간(content)의 크기는 100px이 지만 실제 표시되는 박스의 크기는 142px이 된다.

ie에서는 100-42 = 58 이므로 박스 사이즈는 100이지만
내용이 들어갈 공간의 크기는 58px이 되는것이다.



자리잡기

float,clear 두개의 속성만 이해하면 레이어의 자리잡기는 끝난다.


위 코드를 FireFox 에서 실행해 보자.

가로로 두개씩 세 줄에 걸쳐 박스 6개가 출력된다.

flat: 속성을 주면 div는 왼쪽 또는 오른쪽으로 정렬이 된다.


clear: 속성은 float: 속성을 끝내는 속성이다.

위 코드에서 바스 하나를 추가 하면 2번 옆으로 가서 붙는다.
아래쪽에 새로운 박스를 추가 하려면 다음과 같이 clear: 속성을 추가 한다.


2번 박스에서 float: 속성 값이 left 였기 때문에 clear: left 로 left로 지정된 floating을 끝내는 것이다.
float: right 였다면 clear: right 로 속성 값을 주면 된다.
단, clear: both 는 left와 right 를 모두 포함한다.

이 코드를 IE에서 실행해 보자.

1,2,4,6번 박스가 첫줄에 모두 표시가 되고
3,5번에 아래로 이어진다.

이것은 IE가 CSS를 올바로 해석하지 못하기 때문이다.
http://positioniseverything.net/ 이곳에 가면 IE의 버그를 확인할 수 있다.