css 레이아웃 테이블 레이아웃 비교
페이지 정보
작성자 서방님 댓글 0건 조회 101회 작성일 07-06-19 10:14본문
[ CSS 레이아웃 ]<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
기존 테이블 방식의 레이아웃은 구조적 XHTML을 작성할 수가 없습니다.
하지만 CSS를 이용한 레이아웃은 문서와 디자인의 분리가 가능하여 문서의 구조를 깨뜨리지 않아도 디자인이 가능하게 해줍니다.
또한 1px의 작은 단위도 디자이너가 원하는대로 조정이 가능하기 때문에 테이블 방식보다 더욱 섬세한 디자인이 가능합니다.
[ 테이블 방식에서 CSS 레이아웃으로 넘어가는데 어려운 이유 ]
테이블 방식의 레이아웃과 CSS를 이용한 레이아웃은 개념자체가 상당히 다릅니다.
때문에 기존 테이블 방식의 개념을 버리지 못하면 CSS로 테이블을 만들려고 하는 우를 범하게 됩니다.
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />
[ 테이블과 CSS의 레이아웃 비교 ]
[ CSS 레이아웃을 위해 능숙해져야 할 속성 ]
해외의 여러 예제는 float를 이용한 예제들이 있습니다. 하지만 float는 여러 IE에서 여러 버그가 있고 특히 position과 float를 같은 레이어 안에 사용할 경우 IE에서는 심각한 문제가 발생합니다.
때문에 position 속성의 이용을 권장하며 테이블 개념만 벗어나면 float보다 자유로운 레이아웃이 가능합니다.
position 에는 두가지 값이 있습니다. absolute, relative 입니다.
absolute 는 절대적인 위치를 갖습니다.
relative 는 상대적인 위치를 갖습니다.
절대 위치의 absolute 속성을 가진 레이어를 absolute나 relative속성을 가진 레이어로 둘러싸면 둘러싼 레이어를 기준으로 좌표가 시작됩니다.
position, left, top, right, bottom 이들 속성을 자유자재로 다룰 수 있다면 CSS 레이아웃은 어렵지 않습니다.
댓글목록
등록된 댓글이 없습니다.
