Layout Project ver 1.4

취미로 XHTML+CSS로 사이트를 꾸미는 동안 가장 힘들었던 것은 레이아웃입니다. 이제는 익숙해졌지만 그래도 계속 고민을 해봤습니다. 왜 초보자도 쉽게 다룰수 있는 레이아웃 소스가 하나도 없을까 궁금해졌습니다. 물론 구글링을 해보면 몇 가지가 있지만 지속적으로 사용하기 위한 레이아웃 소스는 찾아보지 못했습니다. 튜토리얼로 보여주는 소스가 아닌 확장성을 가지고 실제로 사용할수 있는 소스가 제공되야하지 않을까 싶습니다. 이름만 프로젝트지 현실은 그간 나름 고생하며 익힌 레이아웃에 대한 정리일 뿐입니다. 물론 최대한 친절한 설명을 위해 노력해보겠습니다. 쉽게 접근해주세요.

레 이아웃을 만드는 방법은 다양합니다. 정석이란 없다고 생각합니다. 하지만 웹표준의 권고사항을 최대한 지키면서 크로스브라우징을 지원한다면 모든 방법이 옳다고 봅니다. 가끔 웹표준에 대한 논란이 있는 곳을 살펴보면 디자이너라는 분들조차 테이블 테그를 써왔으니 굳이 CSS로 바꿀 필요도 없고, 테이블 테그로 레이아웃 만드는 것이 웹표준에 어긋나는 것은 아니다라고 말씀하십니다. 그정도니 일반인들이 자기 마음껏 사이트를 꾸미는 것이 얼마나 힘들겠습니까. 다음 티스토리만 하더라도 마음껏 자유자재로 디자인을 꾸밀 수 있다는 것이 포인트인데, 실제로 일반인이 도전할 수 있는 범위는 폰트, 색상, 이미지 같은 것을 수정하는 정도가 아닐까요? 레이아웃만 마음껏 할 수 있다면 많은 변화가 있으리라 생각합니다.

레이아웃이란 무엇일까요? 사전적 정의는 "문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일, 또는 그 기술."

좀더 자세하게 아래의 그림을 통해 보자면 Header,  Contents, Footer로 크게 구분됩니다. 흔히 사용되는 레이아웃입니다. 간단한 레이아웃처럼 보이지만 레이아웃의 전부이기도 합니다. 때문에 CSS로 쉽게 구조화 할 수 있고 확장할 수도 있습니다.


                        (via HTML5의 모든 것 http://channy.creation.net/blog/776)

앞으로 HTML5에서는 보시는 바와 같이 레이아웃도 구조화된 마크업이 가능하다고 합니다. 하지만 CSS 없이는 아무것도 아닌 것과 같습니다. 때문에 CSS로 레이아웃을 만드는 것은 언제나 유효할 것입니다. 간단하게 초보자 분들도 이해하기 쉬운 레이아웃 프로젝트의 사용법을 알려드리겠습니다.

위의 그림에 노란색 Header가 제일 위에 있습니다. 그런데 Header의 레이아웃만 사용하고 싶다면 어찌하면 좋을까요?

XHTML
<div id="header"> ... </div>
<div id="header"> ... </div>

위와 같이 동일한 header 선택자를 반복 사용하면 안되고 선택자의 이름만 바꿔주는 것만으로도 척척 만들 수 있어야겠지요.

XHTML
<div id="header1"> ... </div>
<div id="header2"> ... </div>
<div id="header3"> ... </div>
<div id="header4"> ... </div>

CSS
div#header1 { ... }
div#header2 { ... }
div#header3 { ... }
div#header4 { ... }

레이아웃은 선택자 header에 번호를 매기는 것처럼 추가 및 수정을 할 수 있게끔 쉽게 만들 수 있는 것입니다. 저 역시 처음 CSS를 가지고 놀 때 여기저기 사이트를 돌아다니며 마음에 드는 레이아웃을 따라해본 적이 많았습니다. 그렇게 하려면 레이아웃의 각 부분이 달라서 적용하는데 무척 힘들었지요. 지금 설명드린 레이아웃의 기초는 제 사이트의 메인 페이지를 보시면 이해가 쉽게 되실 겁니다. 색상만 다른 똑같은 영역이 다섯 열(5 row)로 되어있습니다. 열(row)과 행(column)이 헷갈릴 수 있으니 주의하세요. 열(row)은 Navigation(검정바탕), ElseWhere(흰바탕), Project(회색바탕), Entries(흰바탕), Foot(검정바탕) 순으로 세로로 채워지는 걸 뜻하며, 행(column)은 ElseWhere - Profile 그리고 Project, Github, Download 순으로 가로로 채워지는 걸 뜻합니다.