테이블 태그 없이 css로 작업하기

출처 : PHPSCHOOL
작성자 : 우수한
http://webmasterbase.com/article.php?pid=0&aid=379

postnuke 같은 사이트 빌더를 만들면서,
아무래도 가장 고민이 되는 부분은 화면 레이아웃 문제였습니다.
postnuke 나 My Yahoo 에서 쓰는 방식으로도 만들어보고
이것을 개조해 화면 전체를 블럭으로 만들면서 각각의 옵션을 저장하는 방식으로도 만들어봤습니다만…
사용자의 다양한 요구에 모두 부응하기란… 골치아픈 문제더군요.
(쉽게 말해 postnuke 같은거 쓰면서 헤더,왼쪽,가운데,오른쪽,풋터 이런 식으로 구분하지 않고 제 각기 원하는대로 테이블을 구성하게 한다는 얘깁니다.)

그런데, 아예 TABLE 태그를 사용하지 않으면서,
화면 출력시에 CSS 를 사용해서 table 흉내를 내는 방법이 있습니다.

다음 예제를 보시죠.
테이블 모양으로 꾸며진 페이지: http://sitepoint.com/cssdesign/index.php
페이지 소스 (테이블 태그 없음): http://sitepoint.com/cssdesign/source.html
여기에 사용된 스타일시트 : http://sitepoint.com/cssdesign/styles.html
스타일시트가 없다면 이렇게 출력되겠죠 : http://sitepoint.com/cssdesign/nostyle.php

잘 보시면,

왼쪽칼럼 가운데칼럼 오른쪽칼럼

이렇게 되어있던 것이

왼쪽칼럼

가운데칼럼

오른쪽칼럼

으로 바뀌어있습니다.
그리고 “왼쪽”, “오른쪽” 등의 CSS에 float 와 Absolute Positioning 등을 적용합니다.
웹페이지 마다 길이가 다르기 때문에
footer 의 위치를 잡는게 어려운데, 이건 각 칼럼에

 

를 넣어서 해결합니다.
상세한 그림이 http://webmasterbase.com/article/379/90 에 나와있습니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다