레이아웃(Layout)
CSS 레이아웃
점선 테이블1
점선 테이블2
메타(Meta)
이미지맵(image map)
아이프레임(iframe)
입력양식(form)
텍스트 필드(Text Field)
패스워드(Password Field)
텍스트에어리어(textarea)
셀렉트박스(select)
체크박스(Check Box)
라디오버튼(Radio Button)
리셋버튼(Reset Button)
전송버튼(Submit Button)
이미지 버튼(Image Type)
파일(File Form Control)
히든 필드(Hidden Field)
label
autocomplete
배경음악
필드셋(Fieldset)
마퀴(Marquee)
HTML과 XHTML
오브젝트(Object)
CSS를 이용한 레이아웃(Layout)으로의 전환

아직까지는 국내의 대부분의 홈페이지는 테이블 태그를 이용하여 레이아웃을 잡고 있습니다. 웹브라우저에서 소스보기를 해보면 <table> 태그의 수는 헤아릴 수가 없을겁니다.

그러나 이런 전통적인 레이아웃 제작 방식이 많은 비판을 받고 있습니다.

아무런 의미도 없는(시각적으로 보여주는 역할만 할 수 있는) 테이블 태그의 남용으로 웹문서가 의미를 잃어간다는 지적입니다.

그래서 가능하면 HTML과 같은 마크업 언어는 문서의 구조만 표시하고, 화면에 어떻게 출력될것인가를 결정하는 것은 CSS를 사용하자는 쪽으로 발전되고 있죠.

테이블 태그를 사용하지 않고(데이터가 들어있는 표에만 사용하고) CSS를 이용하여 레이아웃을 잡는 것이 쉽지가 않습니다. 아직까지도 대형 포털 사이트를 제외하곤 대부분의 사이트에서는 테이블 태그를 사용하여 레이아웃을 잡고 있고 있습니다.

그러나 분명한 것은 앞으로는 테이블 태그 대신 CSS를 사용하여 레이아웃을 잡는 방식이 일반화 될 것입니다. 드림위버와 같은 위지윅 에디터에서도 이를 지원하기 위한 기능적인 보완이 이루어질 것으로 예상됩니다.

그러므로 가능하면 CSS를 배우고 나서는 CSS를 이용하여 레이아웃을 잡는 방법을 공부해야 합니다.

특히 웹디자이너와 같이 이쪽으로 직업을 생각하고 계신 분들은 반드시 CSS 공부를 열심히 하여 레이아웃을 CSS로 잡아야 합니다. 앞으로는 CSS를 다루는 능력에 따라서 웹디자이너의 실력을 평가받게 될 것입니다.

Related links
원문은 영문이나 이를 한글로 번역한 페이지입니다. 단계적으로 이해하기 쉽게 설명되어 있습니다.
CSS 레이아웃의 예제를 구할 수 있습니다. 영문이지만 예제만 참고해도 좋으므로 어렵지 않습니다.

웹표준에 대한 정보가 많은 모질라 개발자 센터의 레이아웃 관련 문서입니다.
CSS를 이용하여 레이아웃을 잡는 방법을 설명합니다. 영문이고 고급강좌이기에 초보자가 이해하기는 힘듭니다.

Copyright © Homejjang.com All rights reserved.