Dreamweaver MX에서 표 없는 레이아웃 만들기
몇 년 전에 웨일즈에 있는 농가에서 하루 밤을 지낸 적이 있습니다.
벽이 기울어지고 짚으로 이은 지붕에 꼬불꼬불한 계단이 있는 전통적인 농가의 모습이었습니다.
부엌에는 Aga가 잘 쌓여 있었고 고양이들이 평평한 바닥에서 곤히 자고 있었습니다.
부엌의 오른쪽에는 오크 나무로 만든 커다란 탁자가 있었습니다.
부엌 탁자는 평평한 물건을 놓기엔 제격이죠.
일상적인 식사 장소는 경우에 따라 바느질 탁자, 책상, 그림 작업대, 회의실 탁자, 다투는 장소, 앉아 담소하는 장소가 되기도 합니다.
부엌 탁자에는 일반적으로 음식, 대형 도로 지도, 숙제, 공작물, 그림, 풀, 밀가루, 온갖 액체 등으로 가득 찹니다.
부엌 탁자는 제가 방문했던 Welsh 농가에 있던 탁자와 같이 흠집을 바로 찾을 수 있는 일반적인 그런 탁자입니다.
부엌 탁자와 마찬가지로 HTML <table> 태그는 원래 용도가 아닌 온갖 종류의 작업에 사용됩니다.
대부분은 페이지에 항목을 정렬하는 데 사용되고 경우에 따라 페이지에 "kevin woz 'ere"를 새겨 넣을 때 사용하기도 합니다.
이 글에서는 Macromedia Dreamweaver MX에서 HTML 표를 사용하지 않고 페이지를
디자인하고 레이아웃하는 방법에 대해 설명합니다.
HTML로 표 만들기
----------------------------------------------------------------------------------------
기본 디자인 원칙에 따르면 잘 정리된 페이지를 만들려면 요소를 가로와 세로로 잘 정렬되도록 만들어야 합니다.
HTML 표는 기본적으로 이러한 정렬 작업에 매우 적합합니다.
HTML 표가 분명히 페이지 레이아웃에 적합하지만 페이지 구성 시 불편하고 깔끔하지 못한 경우가 있습니다.
표를 살펴보면 구조를 생각하기 보다 단지 표시하기 위해 코드를 사용하는 경향이 있고, 가장 기본적인 레이아웃을 보여주기 위해 중첩된 표를 사용해야 하며, 엄청난 양의 태그를 요구하는 불필요한 태그로 과잉 대역폭을 유발하는 단점들이 있습니다.
CSS 소개: 보다 쉬운 대안
----------------------------------------------------------------------------------------
다행히 표 레이아웃 대신 CSS(Cascading Style Sheets)를 대안으로 사용할 수 있습니다. CSS도 그 고유의 단점을 갖고 있지만 표로 인해 발생하는 여러 문제를 해결해 줍니다.
이 작업을 위해 특별히 만들어진 CSS는 표의 한계를 넘어 CSS의 이점을 확실히 보여줍니다.
이러한 이점에 대해서는 다음을 참조하십시오.
? An Overview of Cascading Style Sheets(Dreamweaver 지원 센터)
? Dreamweaver MX에서 가장 효과적인 CSS 활용(DevNet)
? Turning the Tables(DreamweaverFever.com)
이 글에서는 표 대신 CSS를 사용하여 가상 법률 회사의 기본적인 웹 사이트를 만들 것입니다.
점점 더 흥미롭지 않나요?
먼저 이 글에 사용될 첨부 파일(8K)을 다운로드하여 Dreamweaver MX의 새 사이트나 기존 사이트에 이 파일을 압축 해제합니다.
사이트를 정의하는 방법에 대한 단계는 Dreamweaver MX 도움말 파일(도움말(Help) > Dreamweaver 사용 설명서(Using Dreamweaver))을 참조하십시오.
압축 해제한 이미지 폴더를 해당 사이트의 루트 폴더로 이동시키거나 복사해야 합니다.
CSS 배치 기능을 사용하여 페이지 레이아웃
----------------------------------------------------------------------------------------
처음으로 CSS 배치(CSS-P) 기능을 사용하여 페이지를 디자인할 때 약간의 문제가 발생할 수도 있습니다.
훌륭한 디자인의 원리 면에서는 동일하지만 표를 사용하여 페이지를 레이아웃할 때와는 크게 다른 기술을 사용합니다.
이미 알고 있는 지식은 잊어버리고 마음을 열어 완전히 다른 지식을 받아 들여야 합니다.
전자 렌지로 요리하는 법을 배우는 것과 약간 비슷하지만 궁극적으로는 보다 훨씬 더 유용합니다.
제작할 페이지는 생각보다 간단하고 개방적이므로 방법을 배우면 즉시 만들 수 있습니다.
걷기 전에 뛰는 방법을 배우는 것은 아무 의미가 없습니다.
페이지 제작 작업을 로고, 일부 탐색 기능, 장식 이미지 및 텍스트의 조합으로 한정하겠습니다.
행운이 조금만 따른다면 그림 1과 같은 멋진 페이지를 만들 수 있을 것입니다.
그림1) 최종 페이지의 모양
이 자습서에서는 다음 단계에 따라 페이지를 만들 것입니다.
1.페이지 만들기
2.스타일 시트 만들기
3.텐츠 배치
4.로고, 탐색 및 장식 요소 배치
5.페이지의 유효성 검사 및 테스트
----------------------------------------------------------------------------------------
Drew Mclellan
New Riders에서 발간한 Dreamweaver MX Web Development(dreamweaverfever.com/dwd/)의 저자이고 익스텐션 저술자로 활동하면서 다양한 Dreamweaver 저술 작업을 하고 있습니다.
그는 DreamweaverFever.com을 운영하고 있으며 Team Macromedia 자원 봉사자로 다양한 지원 포럼의 사용자들에게 도움을 주고 있습니다.
실제로 그는 런던 교외의 에이전시에서 웹 개발 관리자로 맹활동하고 있습니다