개발자를 위한 웹 표준 CSS의 이해 1(CSS BoxModel, Position, float, clear, z-index)

CSS에서 boxmodel, position, float 대하여 알아보도록 하겠습니다.

IE 8을 사용하면서 가장 저의 마음에 들었던 부분이 있습니다.

바로 개발자 도구입니다.

이전에는 IE 6, 7 사용 시 IEDeveloperToolbar라는 툴을 설치하여 사용하였는데. 그때도 “이거 괜찮다” 라는 생각을 많이 했었습니다.

IE 8의 개발자 도구는 그야 말로 획기적인 툴이라고 말씀 드리고 싶습니다. *_*

갑자기 이야기가 삼천포에 갔네요.. *_*;;

본론으로 들어가서.

1. Box Model

CSS 중 가장 많이 사용하는 Attibute가 바로 border, padding, margin이 아닐까 합니다.

Layout 이나 Box Model 작성 시 필수로 사용하게 되는 속성들입니다.

http://trio.co.kr/webrefer/css2/box.html

우측 하단에 보이는 레이아웃이라는 녀석에 대해서 중점적으로 설명할까 합니다.

그림 1-1

Offset은 오늘은 그냥 넘어 가도록 하겠습니다.

현재 Contents를 선택한 상태이며, 적용된 CSS는 다음과 같습니다.

.divContent{
	border:solid 1px red;
	padding:2px;
	margin:2px;
}

.divContent1{
	border:solid 1px red;
}

HTML

<body>
	<div class="divContent">
		Contents</div>
	<div class="divContent1">
		Contents1</div>
</body>

padding:2px의 경우 혹시 모르시는 분들을 위해..

padding:2px; 상하좌우 선택자
padding:2px 2px; 상하/좌우 선택자
padding:2px 2px 2px; 상/좌우/하 선택자
padding:2px 2px 2px 2px; 상/우/하/좌 선택자(시계방향)

그림 1-1에서 984X25의 값은 일단 width/height이며, border + padding + conents 입니다.

좀더 정확히 table의 값을 300px로 설정하겠습니다.

.divContent2{
	border:solid 1px red;
	width:300px;
	padding:2px;
	margin:2px;
}

그림 1-2

table의 width를 300px로 설정하였으나, 찍어 보면 306으로 나옵니다.

이는 좌우 border + 좌우 padding 값을 더하면 306이라는 값이 나오게 됩니다.

width나 height값 역시 동일합니다.

html에서 하나의 element는 각각의 margin, border, padding을 가지며, border, padding 그리고 설정한 width값의 합으로 element의 width, height를 만들게 됩니다.

2. Position

Position은 박스의 위치를 계산하는데, 어떤 위치를 맞추는 지를 결정하게 된다.

position의 속성 값으로는 아래와 같은 값을 가집니다.

static (기본 값) : block element, inline element의 특성을 따르며, (top, left) 속성은 적용되지 않는다.
relative (상대) : block element, inline element의 특성을 따르며, 하위 element는 relative 속성이 선언된 부모 element를 하나의 윈도우로 인식한다.
absolute (절대) : element를 공중에 붕 띄우는 역활을 한다. 즉 top, left, right, bottom의 속성으로 원하는 위치에 놓이며 element의 흐름을 타지 않는다.
fixed (고정) : relative의 영향을 안받으며, 현재 보여지는 위치에서 스크롤로 동작을 하여도 고정위치에 놓이게 된다.
inherit : 부모의 설정 값을 상속받는다.

http://trio.co.kr/webrefer/css2/visuren.html#propdef-position

먼저 position을 설정하지 않은 상태입니다.

즉 position:static 인 상황입니다.

<style type="text/css">
	* { margin: 0; padding: 0; }
	#zero {
	　 　 background-color: #f00;
	　 　 width: 50px;
	　 　 height: 50px;
	}
	#one {
	　 　 background-color: #555;
	　 　 width: 150px;
	　 　 height: 150px;
	}
	#two {
	　 　 background-color: #ff0;
	　 　 width: 50px;
	　 　 height: 50px;
	}
	#three {
	　 　 background-color: #0f0;
	　 　 width: 50px;
	　 　 height: 50px;
	}
	#four {
	　 　 background-color: #00f;
	　 　 width: 50px;
	　 　 height: 50px;
	}
	#five {
	　 　 background-color: #f0f;
	　 　 width: 50px;
	　 　 height: 50px;
	}
</style>

<body>
	<div id=zero>000</div>
	<div id=one>
		<div id=two>222</div>
		<div id=three>333</div>
		<div id=four>444</div></div>
	<div id=five>555</div>
</body>

block-level element 다운 모습입니다. *_*;;

relative, absolute로 설정해 보도록 하겠습니다.

<style type="text/css">
	* { margin: 0; padding: 0; }
	#zero {
		background-color: #f00;
		width: 50px;
		height: 50px;
		position: relative;
	}
	#one {
		background-color: #555;
		width: 150px;
		height: 150px;
	}
	#two {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 10px;
		left: 50px;
	}
	#three {
		background-color: #0f0;
		width: 50px;
		height: 50px;
	}
	#four {
		background-color: #00f;
		width: 50px;
		height: 50px;
	}
	#five {
		background-color: #f0f;
		width: 50px;
		height: 50px;
	}
</style>

000 에 relative를 설정하였으며, 222번에는 absolute를 설정하였습니다.

relative에 변화를 위하여 left:100px;을 설정하였으며, absolute에는 변화를 확인하기 위해 left:50px; top:10px;를 설정하였습니다.

absolute를 설정하게 되면 div가 중첩되는 것을 확인 할 수 있는데요.

relative의 경우에는 중첩되지 않습니다.

relative의 좀 더 자세한 내용을 알아보기 위해 아래와 같이 다시 설정을 바꿔 보도록 하겠습니다.

<style type="text/css">
	* { margin: 0; padding: 0; }
	#zero {
		background-color: #f00;
		width: 50px;
		height: 50px;
		position: relative;
		left:100px;
	}
	#one {
		background-color: #555;
		width: 150px;
		height: 150px;
		position: relative;
		left:100px;
	}
	#two {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 10px;
		left: 50px;
	}
	#three {
		background-color: #0f0;
		width: 50px;
		height: 50px;
	}
	#four {
		background-color: #00f;
		width: 50px;
		height: 50px;
	}
	#five {
		background-color: #f0f;
		width: 50px;
		height: 50px;
	}
</style>

111번에 relative, left 값을 설정하였습니다.

전에는 222번이 111번과 중첩되었으나, 지금은 111번에 포함되어 있는 것을 확인 할 수 있습니다.

즉 relative로 설정하게 되면, 자신 만의 영역을 갖게 됩니다.

relative가 하나의 윈도우가 되어 윈도우 안에서 left, top, right, bottom 값을 갖게 됩니다.

div을 직접 변경하며 실습해 보실 것을 권합니다.

absolute를 설정하게 되면 공중에 띄운다고 생각하시고, relative를 설정하게 되면 자신만의 영역을 선언한다라고 생각하시면 될 것 같습니다.

3. float

float은 박스가 왼쪽 혹은 오른쪽으로 유동하여야 하는가 또는 유동 하지 않는가를 결정하며, absolut의 영향을 받지 않는다.

float의 속성으로는 아래의 값을 갖습니다.

left : 왼쪽으로 유동되는 박스를 생성한다.
right : 오른쪽으로 유동되는 박스를 생성한다.
none : 박스는 유동하지 않는다.
inherit : 부모 element의 float 값을 상속받는다.

http://trio.co.kr/webrefer/css2/visuren.html#propdef-float

바로 실습으로 들어갑니다.

다시 2.Position의 처음 html, css 상태로 돌아갑니다.

이 상태에서 222, 333, 444번에 float:left을 설정하도록 하겠습니다.

위와 같이 나란히 정렬 되는 것을 확인 할 수 있습니다.

여기서 444번을 밑으로 내리고자 할 경우..

float:left 속성을 제거 하는 것으로는 222번 밑으로 내릴 수 없습니다.

444번의 float:left를 제거하게 되면. 깨집니다.

내리는 방법은 clear 라는 Attribute로 해결 할 수 있습니다.

	#four {
		background-color: #00f;
		width: 50px;
		height: 50px;
		clear:both;
	}

clear라는 attribute의 역활은 float을 제거하는 역활을 하게 됩니다.

그리고 웹 표준 권고안에 있었던 내용으로 기억하고 있는데.

float attribute가 선언된 다음에는 반듯이 clear attribute를 사용하여 제거하는 것을 권장한다고 했던 것 같습니다.

정확한 내용이 아니네요 이 부분은..

4. z-index

z-index 란 position:absulte attribute가 선언 되어있는 element의 쌓여 있는 순서를 정하는 것입니다.

1번 div가 2번 div로 올라오게 만들 경우에는

1번 div를 2번 div보다 나중에 선언하면 됩니다.

그런 경우가 아니라면 z-index를 이용하여 나중에 선언된 element의 z-index 값 보다 큰 값을 설정하여 화면에 표시 할 수 있습니다.

마지막 소스를 보시면 금방 확인 가능하리라 생각됩니다.

<style type="text/css">
	* { margin: 0; padding: 0; }
	#zero {
		background-color: #f00;
		width: 50px;
		height: 50px;
	}
	#one {
		background-color: #555;
		width: 150px;
		height: 150px;
		position:relative;
	}
	#two {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		float:left;
	}
	#two1 {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:10px;
		left:10px;
	}
	#two2 {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:20px;
		left:20px;
	}
	#two3 {
		background-color: #ff0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:30px;
		left:30px;
	}
	#three {
		background-color: #0f0;
		width: 50px;
		height: 50px;
		float:right;
		z-index:13;
	}
	#three1 {
		background-color: #0f0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:10px;
		right:10px;
		z-index:12;
	}
	#three2 {
		background-color: #0f0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:20px;
		right:20px;
		z-index:11;
	}
	#three3 {
		background-color: #0f0;
		width: 50px;
		height: 50px;
		position:absolute;
		top:30px;
		right:30px;
		z-index:10;
	}
	#four {
		background-color: #00f;
		width: 50px;
		height: 50px;
		clear:both;
	}
	#five {
		background-color: #f0f;
		width: 50px;
		height: 50px;
	}
</style>

<body>
	<div id=zero>000</div>
	<div id=one>
		<div id=two>222</div>
		<div id=two1>2221</div>
		<div id=two2>2222</div>
		<div id=two3>2223</div>
		<div id=three>333</div>
		<div id=three1>3331</div>
		<div id=three2>3332</div>
		<div id=three3>3333</div>
		<div id=four>444</div></div>
	<div id=five>555</div>
</body>

이상 오늘은 여기까지 하도록 하겠습니다.

box model, position, float 등은 꼭 숙지하셔야 되는 내용입니다.

글 재주가 없어서..

파악하는데 시간이 좀 걸릴 수도 있을 것 같습니다.

그래도. 중요한 내용이니 검색 등을 이용하시여.. 꼭 숙지 하시길 바랍니다.

참고 사이트

http://www.w3.org/TR/CSS2/

http://trio.co.kr/webrefer/css2/cover.html

2011/03/09 - [Developer/웹개발 기초] - 개발자를 위한 웹 표준 CSS의 이해 2(작성 방법, 우선순위, Selector)

감사합니다.

저작자표시 비영리 변경금지

'Developer' 카테고리의 다른 글

Team Foundation 2010(TFS 2010) 설치부터 구성까지..(구성편) (3)	2011.02.18
Team Foundation 2010(TFS 2010) 설치부터 구성까지..(설치편) (1)	2011.02.18
개발자를 위한 웹 표준 HTML의 이해 3(Web Content Accessibility Guidelines 1.0) (0)	2011.02.16
개발자를 위한 웹 표준 HTML의 이해 2(Block elements, Inline elements) (0)	2011.02.15
개발자를 위한 웹 표준 HTML의 이해 1(DTD[Document Type Definition]) (0)	2011.02.15

Angeleyes

개발자를 위한 웹 표준 CSS의 이해 1(CSS BoxModel, Position, float, clear, z-index)

1. Box Model

2. Position

3. float

4. z-index

'Developer' 카테고리의 다른 글

티스토리툴바

개발자를 위한 웹 표준 CSS의 이해 1(CSS BoxModel, Position, float, clear, z-index)

1. Box Model

2. Position

3. float

4. z-index

'Developer' 카테고리의 다른 글

'Developer' Related Articles

티스토리툴바