{유닛테이블}10.레이아웃을 위한 자료구조

현재 홈페이지에서 사용되는 레이아웃을 위한 기술이 거의 TABLE 태그를 이용한다는 것은 대부분 알고 있을 것입니다. 이러한 TABLE 태그가 보통 여러 층으로 중첩하여 사용하게 되는데, 이렇게 다층으로 구성된 페이지에서 시작 태그와 종료태그 짝을 실수하지 않고 맞추기가 쉽지 않고 전체의 구조를 한 눈에 파악하기도 쉽지 않죠.

유닛테이블에서는 이러한 문제를 해결하기 위해 자료구조론에서 언급하고 있는 트리구조(tree structure)를 템플릿 파일의 데이터를 표현하는데 도입했습니다. 프로그래머라면 전산학의 자료구조론에 대하여는 기본적으로 이해하고 있을 것으로 판단되어 자료구조론에서 사용되는 용어를 아무런 설명 없이 유닛테이블의 자료구조를 설명하는데 사용하겠습니다.

< 연결리스트로 표현한 트리구조 >

트리의 각 마디(node)는 한 짝의 "<TABLE>...</TABLE>"을 표현하며, TABLE 태그를 절대로 중첩시키지 않습니다. 즉, 하나의 단일 TABLE(Unit Table) 만 나타나게 됩니다. 만일 현재 마디에 해당하는 TABLE 태그에 포함된 자식 TABLE이 있다면 현재 마디에서 포인터를 이용하여 한 단계 하위 레벨에 해당하는 마디를 연결하게 됩니다. 즉, 유닛테이블의 자료구조는 단일연결리스트(singly linked list)로 표현한 방향성을 지닌 트리구조입니다. 최대날차수(outdegree)는 제한되지 않으므로 각 마디는 하위 레벨의 마디 수만큼의 포인터를 가지게 됩니다.

이와 같이 상위마디와 하위마디, 즉 부모 TABLE과 자식 TABLE을 연결해주는 포인터 역할을 하는 것이 모드지정자 value 내에 지정된 속성지정자 table입니다. 템플릿을 아래와 같이 정의하였다면 이에 해당되는 레이아웃 구조는 하나의 부모 테이블 밑에 자식 테이블이 3개 중첩되어 있는 것입니다.

;table:main
; group:
; td: value=table:top
; td: value=table:middle
; td: value=table:bottom

[code html;gutter:false] <TABLE> <!-- 부모테이블 "main"--> <TR> <TD> <TABLE> <!-- 자식테이블 "top" --> </TABLE> </TD> <TD> <TABLE> <!-- 자식테이블 "middle" --> </TABLE> </TD> <TD> <TABLE> <!-- 자식테이블 "bottom" --> </TABLE> </TD> </TR> </TABLE> [/code]

이와 같은 트리구조를 이용하여 무한대로 테이블을 중첩시킬 수 있으며 각 테이블의 부모자식관계를 쉽게(?) 인식할 수 있게 됩니다.

이젠 여러분이 제가 왜 저의 페이지툴의 핵심엔진을 유닛테이블이라고 명명했는지 이해하실 것입니다. 또 하나의 이름 페이지웍스 엔진은 유닛테이블 엔진에 몇 가지 정보(주로 HEAD 정보)를 추가하여 페이지 전체에 대한 HTML 태그를 다루는, 즉 페이지를 다룬다는 의미이지만 사실 기술적으로 보면 유닛테이블에 약간의 포장을 가한 포장술에 불과합니다.