시작
안녕하십니까? 자크로난입니다.
그림1 기존 스킨을 적용한 블로그
위 그림은 제가 이전에 썼던 Moving Box라는 스킨을 적용한 제 블로그를 캡쳐한 것입니다.
자세히 살펴 보면 메뉴 우측에 여백을 발견 할 수 있는데, 사용자의 화면 해상도가 높아질수록 더 많은 여백이 생기게 됩니다.
결국, 사용자의 화면 해상도에 맞춘 블로그 컨텐츠를 보여주면, 효율적인 화면 구성이 가능 하게 됩니다.
이를 해결 할 방법 중 하나는 컨텐츠 영역의 사이즈를 늘리는 것입니다.
하지만 사용자 화면의 해상도는 제각각이기 때문에, 적절한 방법이라 볼 순 없습니다.
하여 효율적인 화면 구성을 가능 하게 만드는 방법들 중 Liquid Layout, Positioning Layout과 다루어 보도록 하겠습니다.
기존 스킨 구조
화면 구성을 하기 전에 기존 스킨 구조를 파악하는 것이 우선이겠죠? 아래 Moving Box 스킨 구조를 간단한 그림으로 표현했습니다.
자세히 설명드리면,
#CONTAINER 영역 안에 #CONTENT와 #SIDEBAR로 구성됩니다.
#CONTENT은 블로그 컨텐츠 영역이며 700px로 고정 되어 있습니다.
3, 그림에는 나와 있지 않지만, #SIDEBAR는 사용자 화면에 따라 200px 혹은 400px로 변합니다.
화면 구성에 대해 대충 알게 되었으니 실제 코드를 다루도록 하겠습니다. 또한, 사이드바가 경우에 따라 사이즈 변하는 것은 불필요 하므로 200px로 고정 시키겠습니다.
적용하기 앞서…
Moving Box 스킨은 블로그 페이지 로딩 시 자바스크립트 함수를 이용해 화면 레이아웃이나 엘리먼트 속성등을 초기화 합니다. 이들 작업 중에 initLayoutInfo 함수가 가변 컨텐츠 구성에 걸림돌이 됩니다. 그래서 아래와 같이 주석 처리 했습니다.
function pageLoad()
{
imgDate();
/*initLayoutInfo();*/
column321();
}
코드1 Skin.html에서 블로그 로딩할 때 읽는 자바스크립트 함수
Liquid Layout
이 글에서 Box model, HTML, CSS 등 기본적인 사항에 대한 내용은 배제토록 하겠습니다. 필요하신 분들은 네이버나 구글을 이용해 관련 자료를 찾아 보시면 됩니다.
그럼, Liquid Layout이란 이름을 어디에서 나오게 된 것인지 사전적 의미부터 집어 보도록 하겠습니다.
liq·uid〔〕〔L 「흐르고 있다」의 뜻에서〕 n.
1 [U.C] 액체, 유(동)체(fluid)
2【음성】 유음(流音);유음 문자 《[, ];때로는 [, , ] 등》
━ a.
1 액체의;유동체의(cf. SOLID 1, GASEOUS)
liquid fuel (로켓의) 액체 연료
liquid medicine 물약(⇒ medicine (관련))
liquid soap 액체 비누
2 투명한, 맑은 <하늘 등>
the liquid sky 투명한 하늘
3 <소리·시 등이> 유창한, 흐르는 듯한;【음성】 유음의
4 유동성의, 움직이기 쉬운, 불안정한(unstable);융통성 있는;<재산·담보 등이> 현금화하기쉬운
liquid assets[capital] 유동 자산[자본]
5 <방침·신념·의견 등이> 쉽게 변하는, 확고하지 않은
liquid principles 흔들리는 원칙
6 <운동·동작 등이> 매끄러운, 우아한
liquid·ly ad. liquid·ness n.
▷ liqudity n.;lquidize v.
Liquid Layout에서의 Liquid란 의미는 위의 4번에 해당된다고 볼 수 있습니다. 즉, 사용자의 화면에 따라 컨텐츠 영역이 맞춰지는 레이아웃을 의미 합니다.
Moving Box 스킨에서 변경 해야 될 html과 css를 아래와 같이 간소화 하여 표현했습니다.
<div id="container">
<div id="content">
</div>
<div id="sidebar">
<div id="sidebar1">
</div>
<div id="sidebar2">
</div>
</div>
</div>
코드2 기존 레이아웃의 skin.html
body.column3 #wrap { background:url("images/bg_wrap.gif") repeat-y /*@post-width:-680=*/ -60px /*@*/ 0;}
body.column3 #container {width:100%;}
body.column3 .module_search {left:/*@post-width:341=*/ 961px /*@*/;}
body.column3 #sidebar {width:466px;}
body.column3 #sidebar1 {float:left; width:203px;padding:0 0 0 20px;}
body.column3 #sidebar2 {float:right; width:203px;padding:0 20px 0 0;}
body.column3 #footer {width:/*@post-width:488=*/ 1108px /*@*/;}
#sidebar {float:left; padding-top:19px;
#content {float:left; width:/*@post-width=*/ 620px /*@*/; margin:0;padding:0 22px 20px 48px; background:#ffffff;}
#footer {margin:0 0 0 48px; background:#ffffff;}
코드3 기존 레이아웃의 style.css
각 영역의 사이즈를 정리 해 보면
- CONTENT 620px
- SIDEBAR 466px
- SIDEBAR1 203px
- SIDEBAR2 203px
- FOOTER 886px
- MODULE_SEARCH 961px
모두 고정적인 사이즈를 갖습니다.
그럼 어떻게 CONTENT 영역에 사용자 화면에 맞춘 사이즈를 지정 해 줄 수 있을까요? 방법은 간단합니다.
모든 웹 페이지는 브라우저가 관장하고, 브라우저는 사용자의 화면 크기를 알고 있습니다. 페이지에서 유동적인 영역을 그리기 이전에 정적인 영역을 먼저 그리도록 합니다. 즉, 고정 사이즈를 가지고 있는 SIDEBAR를 먼저 그리고 나머지 영역에 CONTENT 영역을 그리도록 하면 브라우저는 이를 쉽게 처리 하게 됩니다. 하지만 이런 구성은 SIDEBAR가 왼쪽에 CONTENT는 오른쪽에 배치되게 됩니다. 우리가 구성 할 방법은 CONTENT가 왼쪽, SIDEBAR는 오른쪽이므로 반대로 처리 해야 됩니다. 이 부분은 뒤에서 다루도록 하고 정리해서 말씀 드리면 '브라우저의 전체 영역에서 SIDEBAR 영역을 빼서 나머지 영역에 CONTENT를 배치 한다'는 점을 이해하시면 되겠습니다. 그럼 이제 SKIN.HTML 부분을 아래와 같이 수정하겠습니다.
<div id="container">
<div id="sidebar">
</div>
<div id="content">
</div>
</div>
코드4 Liquid Layout 적용을 위한 skin.html
SIDEBAR 태그는 우측에 위치하고, CONTENT 태그가 좌측에 위치해야 하므로, SIDEBAR 태그에 float 속성에 right를 주어 화면 우측에 위치 시킨 다음 나머지 부분으로 CONTENT 태그 영역으로 배치 하면 됩니다.
body.column3 #wrap { padding: 2.15em 0 0 0; }
body.column3 .module_search { position:absolute; left:80%;}
body.column3 #container { width:100%; margin:0 auto; }
body.column3 #content { margin:0 250px 0 0; padding-left:10px; background:#ffffff; }
body.column3 #sidebar { float:right; width:220px; line-height:120%; }
body.column3 #footer { clear:both; width:/*@post-width:488*/95% /*@*/; }
코드5 Liquid Layout을 적용한 style.css
그리고 위 코드에서 중요한 점이 CONTENT 영역의 margin 값입니다.
CONTENT 영역의 우측 MARGIN을 250px로 지정하여 전체 사이즈에서 250px만큼을 제외한 나머지를 표현 할 수 있게 됩니다.
CONTENT 태그는 브라우저 크기만큼 너비가 잡히는데, 컨텐츠의 내용이 SIDEBAR 태그 영역에 영향을 끼치지 못하도록 SIDEBAR 태그 너비보다 약간 더 많은 너비의 우측 여백을 남겨 서로의 영역을 구분토록 하였습니다.
그림4 CONTENT 태그 영역
마지막으로 FOOTER 태그는 전체 너비의 95%로 잡아 브라우저 크기에 따라 유동적으로 구성 되도록 하였습니다. 이 방식은 SIDEBAR 태그의 너비에 따라 CONTENT 태그 영역의 우측 여백을 새로이 바꿔야 하는 단점이 있지만 전체적인 구성이 물 흐르듯이 조화롭게 구성되어 있기 때문에, 안정적인 구조를 가진다는 장점이 있습니다. 아래 그림은 Liquid Layout을 적용한 블로그 화면입니다.
그림5 Liquid Layout이 적용된 블로그 화면
Positioning Layout
Liquid Layout이 고정 사이즈 영역을 이용하여 유동적인 영역을 표현했다면, Positioning Layout은 고정 사이즈를 갖는 영역을 절대 위치로 지정하여 표현 하는 방법입니다. 자세히 말씀 드리면 SIDEBAR를 특정 위치(우측 끝에 HEADER 영역 아래)에 두고, CONTENT 영역은 SIDEBAR가 표현될 만큼의 우측 공간(margin)을 지정합니다. 이렇게 되면 브라우저는 전체 사이즈에서 CONTENT를 우측 SIDEBAR가 표현 될 만큼의 영역을 남겨 두고 표현하게 됩니다. Positioning Layout을 이용한 영역은 브라우저가 다른 영역들을 모두 다 그리고 나서 표현 되기 때문에, 그 위치에 다른 영역이 있든 없는 모두 덮어버리는 특징이 있습니다. 즉, CONTENT 영역 다음으로 표현 되는 FOOTBAR 영역이 SIDEBAR 영역을 침범하더라도 SIDEBAR 영역은 이를 무시하고 덮어 버리게 됩니다. 영역 충돌을 방지 하기 위해 CONTENT 영역과 동일하게 FOOTBAR 영역도 우측 공간을 주도록 하겠습니다.
그림6 CONTENT 태그 영역과 FOOTER 태그 영역
그림7 SIDEBAR 태그 영역 설정 방법
<div id="container">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
코드6 Liquid Layout을 적용한 style.css
SIDEBAR 영역을 절대 위치로 지정했기 떄문에, CONTENT 영역이 SIDEBAR 영역에 영향을 받지 않으므로 Liquid Layout과 다르게 CONTENT 영역을 앞에 배치했습니다.
body.column3 #wrap { padding: 2.15em 0 0 0; }
body.column3 .module_search { position:absolute; left:80%;}
body.column3 #container { width:100%; margin:0 auto; }
body.column3 #content { margin:0 250px 0 0; padding-left:10px; background:#ffffff; }
body.column3 #sidebar { position:absolute; top:180px; right:10px; width:220px; line-height:120%; }
body.column3 #footer { margin-right:250px; clear:both; /*width:@post-width:48895%*//*@*/; }
코드7 Liquid Layout을 적용한 style.css
SIDEBAR 영역의 절대 위치를 주기 위한 position 속성과 HEADER 영역과의 충돌을 막기 위해 top 속성을 줬습니다.
마지막 팁
레이아웃을 잡을 때 간단한 두 가지 알아 두시면 좋은 점이 있습니다.
- 레이아웃을 설계 할 때는 브라우저가 어떻게 행동 할지 예측 하는 버릇을 들입시다. 어차피 여러분들이 작성하는 레이아웃 설계 양식은 HTML형식의 텍스트 문서이므로, 브라우저는 HTML Parser라는 개체가 위에서 아래로 훑어 가면서 해석하게 되어 있습니다. 이 점을 잘 이해하시면 HTML 문서를 브라우저에 돌려 보지 않더라도, 어떻게 화면에 구성 될지에 대해 예측 가능하게 됩니다.
- 이미 많은 페이지에 나와 있는 HTML 설계 양식의 패턴을 이해하시기 바랍니다. 사실 많은 사이트들의 웹 페이지들이 많은 패턴의 레이아웃 설계 양식을 사용 하는 것 같지만, 제 생각에는 많이 쓰이는 레이아웃 패턴은 정해져 있는 것 같습니다. 이러한 패턴을 미리 이해하시면 여러분들이 원하는 레이아웃을 빠르고 정확하게 구성 하실 수 있습니다.
Reference
CSSPlay : http://www.cssplay.co.uk/boxes/minwidth.html
네이버 블로그 : http://blog.naver.com/fbsuna
Box Model : http://minicube.kr/blog/65