작성일자
카테고리 CSS/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





도플파란

다시 천천히 읽어봐야겠습니다. 항상 레이어부분이 헷갈리더군요.. 기초인데..ㅠㅠ

베누시안

천천히 이해하면서 코딩을 직접해보면서 하면 도움이 많이 됩니다. 댓글 감사드립니다.

Misun Kim

안녕하세요!! 베누시안님.

저는 현재 티스토리 스킨을 만들고 싶어서, HTML/CSS 공부를 인터넷 검색을 통해 하고 있는 중입니다. 지금은 베누시안님께서 열심히 써주신 포스팅으로 노트에 작성을 하며 공부를 하고 있구요! ^^

그 후에는 공부한 내용을 나름대로 정리하여, 블로그에 올리며 또 한번 복습을 하려고 하는데...
사진 같은 경우에는 그대로 퍼가지 않고, 스스로 다시 캡쳐하거나 포토샵으로 만들어서 올리려고 합니다.

그런데 이 같은 부분이 저작권에 침해가 될까봐 조심스러운 상황이라서.. 양해를 구하려고 댓글을 작성하였는데요. 어떻게 생각하시나요?? 아.. 그리고 마지막에 도움 받은 곳에 출처를 적고 있습니다. ^^

예시 : http://vipblogger.tistory.com/222

베누시안

안녕하세요. 이른 아침에 반갑습니다. 제 블로그 글이 도움이 되신다니 다행입니다. 블로그 글을 그대로 퍼가지 않고 나름대로 공부해서 정리한 다음 자신의 블로그에 글을 올리는 것은 저작권에 전혀 관계가 없습니다. 자신의 머리속에서 나온 것이니 님에게 저작권이 있는 것입니다. 사진도 자신이 만드신다고 하니 이것도 마찬가지죠.

자신이 알고 있는 지식을 막연하게 알고 있는 것 보다는 다른 사람이 한것이라도 스스로 새로운 글을 만들면 기억에 많이 남습니다. 좋은 공부방법이죠.

제 글을 보면서 문제점이 있으면 댓글을 달아주세요.

Misun Kim

아! 그렇군요! :)
긍정적인 답변 주셔서 감사합니다. 열심히 공부할게요. ^^

Misun Kim

아, 그런데 한 가지 궁금한 점이 있는데.. 유동폭 레이아웃에서..
레이아웃 화면을 줄였을 때 란 말이 -> 모니터 화면의 해상도가 줄어들었단 소리와 같은 건가요? ^^

베누시안

안녕하세요. 해상도가 줄어든다는 것보다는 화면 폭이 줄었다는 의미입니다. 모니터 화면은 사용자에 따라 다르기 때문에 웹디자인을 하면 웹브라우저를 줄여보기도 하고 해서 어떤 폭에서 어떻게 보이는지 살펴봐야합니다.

Misun Kim

마지막 질문인데요. ^^;
3단 레이아웃 첫번 째 사진 글에서..
"이럴 경우는 사이드바1은 float:left;로 해도 같은 결과가 나옵니다." 라고 하셨는데~
사이드바2가 가운데로 오는 상황인데, "사이드바2가 float:left" 로 해도 같은 결과라고 하는게 맞는거 아닌가용?.? 헷갈리네요 ''

베누시안

안녕하세요. 잘 지적하셨습니다. 엊그제 질문을 보고 한번 쭉 훝어보다가 잘못된거 같아서 수정했는데 다시 보니 원래대로가 맞는군요. 다시 수정했습니다.

Misun Kim

ㅎ.ㅎ 소개해주셔서 감사해요! 제 나름대로 공부한건데 다른 분들께도 도움이 되었으면 좋겠네요~ ^ ^

베누시안

블로그 방문에서 여기저기 둘러보니 사진이나 포토샵을 잘 다루시더군요. 저도 회사 다닐 때 사진부에 들어서 전국을 돌아다니며 사진 찍고 그랬는데 아날로그 시절이었죠. 지금도 니콘 F3가 보물 1호로 자리잡고 있답니다.
포토샵을 잘 다루시니 웹디자인 쪽으로 관심을 가지시면 잘 하실 것 같습니다. 원래 디자인의 기본 툴인 포토샵을 잘 다루면 웹디자인도 잘한답니다. 워드프레스는 앞으로 한국에서 많은 사람들에게 좋은 직업을 줄거라고 예상합니다. 워드프레스 기반으로 CSS로 멋지게 디자인하면 웹사이트는 뭐든 만들 수 있죠.

Misun Kim

ㅎ.ㅎ 블로그도 둘러봐주시고 감사해요! 어렸을 때부터 포토샵을 하나 둘 만져보다 보니 어느정도 블로그에 필요한 정도는 하게 되었네요! :)
다행히 제가 관심 있는 분야가 잘 맞겠다니 저도 기쁩니당. ^^ 워드프레스 책만 손꼽아(?ㅋ) 기다리고 있어용. ㅎㅎ 지금은 잠시 공부 휴식 중~

디노야놀자

div 태그로 레이아웃을 꾸밀 때, 본문 내용이 길어지면 자동으로 세로 폭이 늘어나잖아요. 근데 늘어난 본문의 세로 폭에 맞춰 옆에 사이드바 역시 똑같은 크기로 늘어나게 하는 방법 없나요?

제가 만들고 있는 블로그 스킨 볼 수 있는 주소이구요.
http://gskool.tistory.com

제가 원하는 모양의 레이아웃이 있는 블로그 주소입니다.
http://snpbox.tistory.com/

제 블로그를 보시면 사이드바가 더 길거나 본문이 더 길면 어느 한 쪽이 짧아
빈 공간에 그대로 body에 준 배경색이 드러나구요.
스누피님 블로그는 본문 길이가 길면 거기에 따라서 사이드바도 함께 늘어나네요.
이런 레이아웃 만들려면 어찌 해야 하는지 궁금합니다.
벌써 며칠 째 해결 못 하고 헤매는 중입니다. ㅠ.ㅠ

베누시안

이미지를 사용해야되서 요즘을 잘 사용하지 않습니다. 좀 복잡해서 이해하기도 힘들죠. 별도로 글을 올려서 설명하겠습니다.

디노야놀자

관리자의 승인을 기다리고 있는 댓글입니다

텐션

관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바