HTML/CSS 기초 - 레이아웃의 종류

블로그나 웹사이트를 만들기 위해서는 가장 먼저 생각해야하는 것이 레이아웃입니다. 가입형 블로그를 개설하거나 티스토리 같은 서비스형 블로그를 개설하더라도 가장 먼저 선택을 하는 것이 이미 만들어진 블로그 스킨을 선택하게 되는데 스킨의 레이아웃이 어떤 것인지를 먼저 결정해야합니다. 스킨의 레이아웃의 형태는 1단, 2단, 3단 레이아웃이 있으며 이것은 본문의 열(Column)이 몇개 있느냐에 따른 분류입니다. 본문의 열이 여러개인 경우는 중요한 컨텐트부분이 하나가 있고 나머지는 사이드바가 됩니다. 물론 컬럼이 하나인 경우는 사이드바가 없고 사이드바에 들어갈 내용은 푸터(Footer)에 위치하게 됩니다. 또한 레이아웃은 고정폭(Fixed Width)인가 유동폭(Liquid Width)인가에 따라서도 분류됩니다.

페이지 레이아웃은 주로 많이 사용하는 것으로 계속 사용하면 되겠지만 이러한 여러가지 레이아웃에 대해서 알아두면 CSS에서의 모든 요소의 배치는 쉬워집니다. 이전 글들은 모두 이러한 배치에 관한 것들이므로 이번 글이후로는 응용하는 것에 불과합니다.

블로그에서 가장 많이 쓰이는 레이아웃은 고정폭의 2단(Two Columns Fixed Width) 레이아웃인데 사이드바를 보다 유연하게 사용하려면 3단 레이아웃을 사용하면서 2단의 레이아웃처럼 사용하는 방법이 가장 좋습니다. 즉 사이드바 두개를 한쪽으로 몰아 넣는 것이죠. 제 블로그는 3단 레이아웃으로 사이드바가 두개이며 오른쪽에 몰려 있습니다. 이렇게 하면 큰 사이즈의 광고도 넣을 수 있고 좁은 폭의 모듈도 설치할 수 있으며 광고도 넣을 수가 있게 됩니다. 요즘은 구글광고가 대세이기 때문에 블로그를 만들기 전에 광고를 위치시키기 위해서 어떤 레이아웃을 사용할지 우선 고려해야할 사항이 됩니다.

CSS는 여러번 말씀드리지만 레이아웃을 위한 도구입니다. CSS의 기본 원칙인 컨텐트(HTML)와 프리젠테이션(CSS)의 분리에 충실하기 위해서는 모든 레이아웃은 CSS로만 이루어지고 글 내용은 HTML에서만 담당하도록 해야합니다. 그래서 테이블 형태의 레이아웃이나 IFRAME을 이용한 레이아웃도 배제시켜야합니다.

웹디자인에서 가장 우선적으로 고려해야할 사항이 방문자를 위한 디자인입니다. 방문자의 컴퓨터는 사양도 다르고 모니터의 해상도도 아주 다양합니다. 10년전에 나온 컴퓨터를 사용하는 사람도 아직 많고 최신의 컴퓨터와 모니터를 사용하는 사람도 많아졌습니다. 그래서 어떤 모니터는 넓은 해상도를 갖지 못하여 웹페이지를 넓게 디자인하면 전체화면을 보기 위해서 좌우로 화면을 스크롤해야하는 불편도 있게 되며 넓은 모니터를 사용하는 방문자는 좌우 공간이 텅 비게 되어 어떤 사이즈를 기준으로 해야할지 난감하게 됩니다. 그래서 국제적으로 표준이 된 레이아웃이 가로폭 960픽셀인데 이것도 요즘은 좁은 상태죠. 가로폭이 960픽셀이라는 것은 고정폭 레이아웃을 의미합니다.

1. 고정폭(Fixed Width) 레이아웃

요즘 대부분의 레이아웃은 고정폭에 컨텐트 영역을 중앙에 배치합니다. 고정폭 레이아웃은 모니터의 해상도와는 상관없이 항상 고정된 폭을 유지하므로 이미지나 어떤 요소라도 사이즈의 변동이 없기 때문에 웹디자이너의 의도대로 레이아웃을 보존합니다. 단점이라면 좌우로 여유공간은 낭비된다는 것입니다. 그래서 사용되는 것이 유동폭 레이아웃입니다.

2. 유동폭(Liquid Width) 레이아웃

유동폭 레이아웃은 어떤 해상도의 모니터라도 좌우 공간이 없이 컨텐트 영역이 모니터의 화면을 다 채우도록하는 방식입니다. 이런 레이아웃에서는 글을 읽을때 아주 불편합니다. 좌측끝에서 우측끝으로 오고 다시 밑줄로 내려가려면 한참 찾아야합니다. 유동폭이라는 의미는 이러한 레이아웃의 화면을 줄였을때 컨텐트 영역도 같이 줄어들고 영역이 줄어들면서 컨텐트의 내용도 위아래로 늘어나게 되므로 이미지가 있다면 범위를 벗어나서 디자인이 엉망이 되버립니다. 그래서 이미지가 없는 페이지 같은 경우에 사용됩니다. 또한 유동폭이라 하더라도 일정 범위까지만 화면이 줄어드는 min-width라는 속성을 사용하면 그 범위이전에는 폭이 줄어들지만 범위내에 들어오면 유동폭이 아닌 고정폭으로 전환되어 줄어들지 않게 됩니다. 이러한 방법은 유동폭과 고정폭의 잇점을 적절히 이용하므로 모니터의 공간을 잘 활용할 수 있게 됩니다.

자세한 내용은 별도로 설명드리지만 컬럼 수에 따른 레이아웃은 다음과 같은 방법이 있습니다.

3. 1단 레이아웃

컬럼이 하나있는 레이아웃은 html의 내용 그대로 순서대로 나열되는 방식이라서 특별하게 레이아웃에 관한 CSS는 없습니다. 다만 사이드바에 여러 개의 모듈이 배치될 경우 다른 레이아웃과 마찬가지의 방법을 적용하면 됩니다.

4. 2단 레이아웃

2단 레이아웃의 전형적인 예입니다. html부분에서 메인 컨텐트가 먼저 올 수도 있고 사이드바가 먼저 올 수도 있는데 검색엔진은 html의 내용 순서대로 검색을 하므로 중요한 내용이 있는 메인 컨텐트가 먼저 배치되도록 하는 것이 좋습니다. 이런 상황이라면 메인 컨텐트는 float:left;라는 속성을 적용하고 사이드바는 float:right;를 적용하거나 float:left;를 적용해도 우측의 그림처럼 배치됩니다. 하지만 html에서 반대의 경우라면 즉 메인컨텐트가 사이드바 아래에 위치한다면 메인컨텐트는  float:left;라는 속성을 적용하고 사이드바는 float:right;를 적용해야합니다. 

html의 순서는 이전과 같지만 CSS 레이아웃에서는 사이드바가 메인 컨텐트보다 앞에 나옵니다. 사이드바는  float:left;라는 속성을 적용하고 메인 컨텐트는 float:right;를 적용하면 됩니다. html에서 메인컨텐트와 사이드바가 서로 바뀌었다면 둘다 float:left;를 적용하거나 메인컨텐트를 float:right;로 적용하면 됩니다.

5. 3단 레이아웃

 
3단 레이아웃은 html이 위와 같은 상황이라면 순서대로 되어있으니 모두 float:left;를 적용하면 위 화살표대로 배치되지만 메인컨텐트는 float:left;를 나머지 두개는 float:right;를 적용하면 사이드바1이 가장 오른쪽으로 사이드바2는 그 옆에 배치됩니다. 이럴 경우는 사이드바 2는 float:left;로 해도 같은 결과가 나옵니다.

위와 같은 경우는 html에서 사이드바1이 메인 컨텐트보다 앞에 배치되어있다면 간단하겠지만 그래도 메인컨텐트를 상위에 올려 놓아야하는 상황입니다. 사이드바1과 메인컨텐트를 하나의 다른 div에 넣고 이 div을 float:left;로하고 사이드바1을 float:left;로, 메인컨텐트를 float:fight;로, 사이드바2는 float:left;나 float:right;로 하면 됩니다. 또 하나의 방법은 메인컨텐트를 중앙에 배치하기 위해서 메인 컨텐트에 사이드바 넓이 만큼의 양쪽 마진을 적용하고 두개의 사이드바에 절대위치(position:absolute;)를 적용해야하는데 자세한 설명은 다른 글에서 나옵니다.

이 경우는 간단하죠. 메인 컨텐트는 float:right;를 적용하고 두개의 사이드바는 float:left;를 적용하면 됩니다.

요약 정리가 잘돼 있는 블로그--> http://vipblogger.tistory.com/226 호기심 많은 VIP  Various Interested People