CSS Layout
>
3 column fixed width layout

Last Modified : 2011.12.05

주요 엘리먼트 배치

이번 과정에서는 CSS 를 사용하여 웹사이트의 화면을 완성해 나가는 방법을 설명한다.
CSS로 화면구성을 할 때 중요하게 쓰이는 CSS 속성은 float 과 margin 이다.
여기서 소개하는 방법에서 특별한 점이 있다면 margin 값에 음수를 쓴다는 데 있다.
이제부터 margin 에 음수값으로 두는 것을 음수 마진이라 하겠다.
음수마진은 화면구성를 위해 필요한 엘리먼트의 수를 최소화 할 수 있다.
표준을 따른다고 하더라도 브라우저마다 다르게 보일 수 있기 때문에 결과물을 파이어폭스, 구글 크롬, 인터넷 익스플로러 등 대표적인 웹브라우저에서 테스트를 하면서 진행하도록 한다.

고정크기를 가지는 3열(Column) 레이아웃

실습할 레이아웃은 고정넓이를 가진 3열로 된 것을 선택했다.
실습 화면은 header, man-menu, sidebar, content, extra, footer 로 구성된다.

header
가장 위에 있으며 대부분 회사 로고 이미지가 위치한다.
main-menu
header 바로 밑에서 메인 메뉴를 보이는 부분이다.
sidebar
왼쪽에 배치할 것이고, 메인 메뉴에 대한 서브 메뉴가 위치하는 부분이다.
content
중앙에 배치할 것하고, 페이지의 주요 내용을 위치하는 부분이다.
extra
오른쪽에 배치할 것이고, 광고나 새로운 아이디어를 구현하는 부분이다.
footer
가장 아래쪽에 있으며 Copyright, 연락처, 찾아오시는 길 등의 글로벌 메뉴를 보이는 부분이다.

주요 부분에 대한 크기를 지정한다.

header

넓이: 1000px
높이: 48px

main-menu

넓이: 1000px
높이: 35px

sidebar

넓이: 175px
높이: 내용에 따라 변함

Content

넓이: 720px
높이: 내용에 따라 변함

extra

넓이: 205px
높이: 내용에 따라 변함

footer

넓이: 1000px
높이: 56px

디폴트 HTML 문서 템플릿

XHTML 1.0 Strict 을 따르는 웹사이트를 만들어 볼 것이다.
이 문법에 맞게 작성하려면 새창을 띄우거나 프레임을 사용하는 HTML 코드를 써서는 안된다.
아래를 복사하여 사용하고 있는 에디터에 붙여넣는다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Keywords" content="keywords" />
<meta name="Description" content="description" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>
<body>

</body>
</html>

붙여넣기 해서 작성한 파일을 index.html 이름으로 웹사이트의 최상위 디렉토리에 저장한다.
만약 여러분의 에디터가 이클립스라면, 이클립스는 HTML문서를 작성할 때 DocType(Document Type) 별로 HTML 문서 템플릿을 제공한다.
디폴트 문서 템플릿이 마음에 들지 않는다면 수정할 수 있다.

이제 페이지의 주요 구성요소를 입력할 차례이다.
layout.html 파일의 body 엘리먼트 사이에 다음 내용을 붙여넣는다.


<div id="wrap">

	<div id="header"></div>
	
	<div id="main-menu"></div>
	
	<div id="container">
		<div id="content"></div>
	</div>
	
	<div id="sidebar"></div>
	
	<div id="extra"></div>
	
	
	<div id="footer"></div>
	
</div>

위에서 wrap 과 container 는 설명하지 않은 엘리먼트이다.
이 엘리먼트는 견고한 레이아웃을 위해서 필요한 여분의 엘리먼트라고 생각하면 된다.
wrap 은 문서의 모든 div 를 포함한다.
container 는 여기에서 설명하는 3열을 배치하는 데 필요하다.
되도록이면 이런 여분의 엘리먼트는 그 수를 최소화 해야 한다.

이 레이아웃의 좋은점에 대해서 생각해 보면, 비록 container 안에 있지만 HTML문서에서 content 가 sidebar 보다 먼저 나온다는 것이다.
웹페이지에서 content 가 가장 중요하기 때문에 코드에서 먼저 나오는 것이 유지보수에 더 낫다.

다음은 css 폴더에 screen.css 파일을 아래와 같은 내용으로 만든다.


@CHARSET "UTF-8";
/*** The Essential Code ***/
html, body {
	margin: 0;
	padding: 0;
}

#wrap {
	margin: 0 auto;
	padding: 0;
	width: 1000px;
}

#header {
	width: 1000px;
	height: 48px;
}

#main-menu {
	width: 1000px;
	height: 35px;	
}

#container {
	width: 100%;
}

#content {
	
}

#sidebar {
	width: 175px;
}

#extra {
	width: 205px; 
}

#footer {
	width: 1000px;
	height: 70px;
}

/*** Just for Looks ***/
#header, #footer {
	font-size: large;
	text-align: center;
	background: #999;
}

#main-menu {
	font-size: large;
	text-align: center;
	background: #DAEAAA;
}
#content {
	font-size: large;
	text-align: center;
	background: #DDD;
	height: 100px;
}

#sidebar {
	font-size: large;
	text-align: center;
	background: #66F;
	height: 100px;
}

#extra {
	font-size: large;
	text-align: center;
	background: #F66;
	height: 100px;
}

먼저 이 문서를 해석하기 위해 CSS 의 파일의 기본 형식부터 알아보자.
CSS 문서의 내용은 다음과 같은 형식의 반복이다.


selector {
	속성: 속성값;
	속성: 속성값;
	..
	.
}

selector 종류에는 Type, Descendant, Class, id, Child, attribute 가 있다.
다음은 각 셀렉터의 모습이다.


/* Type Selector */
body {

}
/* Descendant Selector */
ul strong {

}
/* Class Selector */
.redwine {

}
/* id Selector */
#header {

}
/* Child Selector */
body > p {

}
/* attribute Selector */
input[type="text"] {

}

id selector 를 CSS 파일에서 정의할 때는 id 앞에 # 을 붙여야 한다.
id 는 HTML문서에서 해당 엘리먼트에 유일성을 부여한다.
따라서 id 값은 단 한번 나와야 한다.
때문에 id 는 HTML문서에서 단 한번만 나타나야 하는 엘리먼트에 사용한다.
index.html 에서 wrap, header, main-menu, container, content, sidebar, extra, footer 가 바로 그런 엘리먼트이다.
반면, Class selector 를 CSS 파일에서 선언할 때는 클래스 이름앞에 . 을 붙여야 한다.
Class 는 id 와 달리 HTML문서에서 반복되어 사용할 수 있다.

지금까지 작성한 페이지를 웹브라우저로 확인한다.
예제보기 1

screen.css 설명

아직까지 완성 전 코드이지만 지금까지의 CSS 파일의 내용을 살펴보자.
screen.css 파일이 완성되면 화면 구성도 완성된다.
HTML 문서의 내용은 바뀌지 않는다.

html,body


html, body {
	margin: 0;
	padding: 0;
}

selector 자리에 , 는 "or" 를 의미한다.
그래서 위 CSS 코드는 html 과 body 엘리먼트 모두에 적용된다.
div 와는 달리 html 과 body 엘리먼트는 거의 모든 웹브라우저에서 디폴트 마진과 패딩을 가지고 있다.
만약 해상도가 낮은 모니터에서는 작지만 이 값 때문에 정밀하게 계산된 화면이 깨질 수 있다.
그래서 대부분의 웹디자이너는 html 과 body 의 마진과 패딩을 0 으로 설정한 후 디자인을 시작한다.

wrap


#wrap {
	margin: 0 auto;
	padding: 0;
	width: 1000px;
}

margin 에는 4개의 값이 있어야 한다.
만약 값이 하나만 있다면 top right bottom left 에 모두 그 값으로 설정된다.
값이 2개이면 첫번째 값이 top과 bottom 에 대한 값이고 두번째 값이 right 와 left 에 대한 값이다.
값이 3개라면 순서대로 top right bottom 에 대한 값이며 left는 right와 같게 설정된다.
값이 4개라면 순서대로 top right bottom left 에 대한 값이다.

margin 프로퍼티의 두번째 값 auto 는 해당 엘리먼트를 가운데에 위치시킨다.
속성값 0이면 단위를 적지 않아도 된다.
div 엘리먼트의 디폴트 margin 과 padding 값은 0 이다.
wrap 는 HTML문서내의 모든 엘리먼트를 담아야 하니 전체 넓이만큼 넓이를 지정한다.

CSS 파일에서 /*** Essential Code ***/ 부분이 중요하다.
/*** Just for Looks ***/ 부분은 예제를 브라우저로 확인할 때 보기 좋으라고 쓴 것으로, 프로젝트가 진행되면서 없어질 부분이다.

container


#container {
	width: 100%;
}

container 의 width가 100% 로 설정되어 있다.
100% 라 함은 container 의 내용이 확보할 수 있는 최대한의 넓이를 말한다.
container 가 마진과 패딩이 0 이고 border 역시 설정되어 있지 않기 때문에 100% 는 1000px 이다.

content 을 중앙에 배치

content 의 margin 을 다음과 같이 조정한다.


#content {
	margin-left: 175px;
	margin-right: 205px;
}

예제보기 2

sidebar 를 content 의 왼쪽에 배치

웹브라우저에서 content 가 중앙에 위치하는 것을 확인할 수 있다.
이젠 sidebar 와 extra 가 중앙의 content 양쪽에 위치시켜야 하는데, 이때 float 와 음수 마진을 이용한다.
먼저 sidebar 가 content 의 왼쪽에 위치하도록 코드를 수정하기로 하자.
CSS파일을 아래와 같이 고친다.


#container {
	float: left;
	width: 100%;
}

#content {
	margin-left: 175px;
	margin-right: 205px;
}

#sidebar {
	float: left;
	width: 175px;
}

#extra {
	float: left;
	width: 205px; 
}

#footer {
	clear: both;
	width: 1000px;
	height: 70px;
}

예제보기 3
아직 sidebar 가 content 의 왼쪽에 있지 않다.
다음 예제에서 완성하기로 하자.
우선 center 를 감싸고 있는 container 에 float 속성이 적용한다.
container 다음부터 나오는 엘리먼트인 sidebar, extra 도 역시 float 속성을 적용해야 한다.
footer 는 clear 프로퍼티를 both 로 설정해서 footer 의 위치를 가장 아래에 위치하도록 보장한다.

이제 sidebar 에 한줄을 더한다.


#sidebar {
	float: left;
	width: 175px;
	margin-left: -1000px;
}

예제보기 4

"예제보기 4"와 같은 결과가 나오는 이유

container, sidebar, extra 모두 float 이 적용되었으므로 정상적인 흐름안의 박스처럼 위 아래에 있는 것이 아니라 옆으로 인접해 있다고 생각해야 한다.
float 이 적용된 엘리먼트에 음수 마진이 left 으로 적용되면 엘리먼트는 left 방향으로 엘리먼트가 움직이게 된다.

extra 를 content 의 오른쪽에 배치

sidebar 가 제대로 위치를 잡았다.
다음은 extra 가 content 의 오른쪽으로 위치하도록 하겠다.
이때에도 음수 마진을 이용한다.


#extra {
	float: left;
	width: 205px;
	margin-left: -205px; 
}

예제보기 5

참고문서

http://www.html.net/tutorials/css/
http://www.subcide.com/articles/creating-a-css-layout-from-scratch/P1/
http://www.alistapart.com/articles/holygrail/
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
http://www.w3.org/QA/2002/04/valid-dtd-list.html
http://www.ibm.com/developerworks/kr/library/wa-css/
http://www.maxdesign.com.au/articles/css-layouts/

다음 : 메인 메뉴