WebStandards-Basic 5.positioning

Understanding HTML/CSS

배치하기

을수

eulsoo.jung@gmail.com

이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.

1. 일반적인 흐름에서의 배치
2. 떠있는 상태에서의 배치
3. 절대적인 상태에서의 배치

처음 인쇄에서는 모두 글씨였습니다.
그렇기 때문에 어쩔 수 없이
선형적(linearity)인 흐름을 이용했습니다.

좌측에서 우측으로
글자들이 이어지며
한줄이 모두 차면 아
래줄로 이어집니다.

하지만 기술이 발달하면서 다양한 배치를
이용해 사람들에게 편리함을 주기도 하고
시각적 자극을 줄수도 있게 되었습니다.

HTML은 선형적(linearity)입니다.
브라우저가 위에서 아래로 순서대로 처리 된다는 말이죠.

CSS없이 HTML만 있
는 상태입니다.

여기에 CSS를 더해서 시각적
순서를 완전히 바꾸는 배치로 만들수 있습니다.

선형적인 정보를 원하
는 목적의 우선순위에
따라 배치를 완전히 바
꾸게 됩니다.

이렇듯 배치를 한다는 것은
웹문서를 만드는 가장 중요한
이유중에 하나입니다.

하지만 시각장애인에게는
음성리더기가 순서대로 읽어줄때
이해할 수 있는 논리적인
구조가 중요합니다

디자이너가 직접 코드
를 배워야 하는 이유가
이런면에 있다고 생각
합니다. ^^

진짜 좋은 배치란 두가지를
모두 만족시킬 수 있도록 디자인
되는것이 아닐까요?

웹페이지의 모든 박스들의
배치는 세가지 상태에서 이루어집니다.

웹페이지의 모든 박스들의
배치는 세가지 상태에서 이루어집니다.
첫째. 일반적인 흐름(normal flow)에서
둘째. 떠있는 상태(float)에서
셋째. 절대적인 상태(absolute)에서

1.일반적인 흐름(normal flow)
에서의 배치

일반적인 흐름(normal flow)상태에서의 배치란
우리가 알고 있는 block box와 inline box들이
만들어지는 상황이라고 쉽게 생각하시면 됩니다.

박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄을 이루고 있는 line box 그리고
글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.

•학교
•병원
•공항

왼쪽 위에서 시작.
아래로 쌓임.

block box

inline box

inline box

꽉차고 세로로 쌓임

width, height
상하 마진,패딩

왼쪽에서 오른쪽으
로 흐름

여기에 margin과 padding을 주고
width와 height로 사이즈를 주어서
자신의 크기를 조절하고 서로를 밀어 배치하는
관계성이 있는 배치입니다.
content

padding

height

width

아래의 예를 만들어 보면서
일반적인 흐름(normal flow)을 이용한
배치에 대해 좀 더 알아봅시다

20
496x96
20

20

자신의 높이(96)와 상하 마진(20)을

226x196

40

이용해서 하단에 있는 박스들을
밀어서 배치합니다.
226x196

div class=mother
div class=top/div
div class=left/div
div class=right/div
/div

96

2

196
먼저 div(block box)로 필요한
박스들을 만들고
들어있는 컨텐츠가 없기 때문에
자신의 높이를 height로
지정해서 만들고 border를 줍니다
196

세로로 쌓였습니다.

.mother div {border:2px solid black;}
.top {height:96px; }
.left {height:196px; }
.right {height:196px; }

div class=mother
div class=top/div
div class=left/div
div class=right/div
/div

496x96

226x196

자신에게 width값을 지정하여

226x196

임의의 사이즈를 가진 박스로
만듭니다.

.top {width:496px; height:96px; }
.left {width:226px; height:196px; }
.top을 기준(제외하고)
div를 가진 모든
형제요소를 선택
(left,right를 모두선택)

.left와 .right가 같으니까

.right {width:226px; height:196px; }

요렇게도 한번에 선택할 수
있겠죠?

.top {width:496px; height:96px; }
.top ~ div {width:226px; height:196px; }

div class=mother
div class=top/div
div class=left/div
div class=right/div
/div

20
496x96
20

226x196
각 박스에 필요한 여백(padding)과
서로간의 간격(margin)을 이용하여
원하는 위치까지 밀어서 배치합니다.
226x196

20
496x96
20

226x196
20

226x196

.mother {padding:20px 0 0 20px;}
.top {width:496px; margin:0 0 20px; height:96px; }
.left {width:226px; height:196px; }
.right {width:226px; height:196px; }

div class=mother
div class=top/div
div class=left/div
div class=right/div
/div

20
496x96
20

226x196
20

보통의 경우에 일반적인
흐름(normal flow)에서
할 수 있는 배치입니다.
226x196

20
496x96
20

226x196
20

226x196

?

일반적인 흐름(normal flow)

에서문제는 가로 배치!
블록박스를 가로로 배치하
기 위해 뭔가가 필요합니다.

이제 떠있는 상태(float)에서
의 배치가 필요한 순간입니다!

2. 떠있는 상태(float)
에서의 배치

float속성은 4가지 값을 가질 수 있습니다.

띄우다

(왼쪽으로 띄움)
{float: left }
{float: right } (오른쪽으로 띄움)
{float: none} (띄우지 않음)
{float: inherit} (상속받음)

가로배치에 쓰이기때문에
왼쪽과 오른쪽 배치밖에는
없습니다.

20
496x96
20
float:left
226x196
20

이제 배치하려는 박스에
float:left
226x196

각 각 float:left를 주면

.left {float:left; width:226px; height:196px; }
.right {float:left; width:226px; height:196px; }

div class=mother
div class=top/div
div class=left/div
div class=right/div
/div

20
496x96
20
float:left

float:left

226x196

226x196

20

나란히 가로로 배치됩니다.

일반적인 흐름
(normal flow)
떠있는 상태
(float)

각 각 떠서 왼쪽방향으로
당겨지면서 배치됩니다.

떠있는 상태
40

떠있는 상태

배치가 끝났으면
마진을 이용해서
간격을 벌립니다.

.left {float:left; margin:0 40px 0 0; width:226px; height:196px; }
.right {float:left; width:226px; height:196px; }

div class=mother
div class=top/div
div class=left/div
div class=right/div
/div

20
496x96
20
float:left
226x196

float:left
40

226x196

20

완성!

20

만약 사이즈가
부모 박스
496x96
보다 커진다면?
20
float:left
226x196

float:left
40

20

.left를 감싸고 있는 부모박스
.mother 인 .mother는 width값이 지정되
있지 않으므로 가장 부모인 body
즉 뷰포트에 영향을 받습니다.

700x196

20
496x96
20
float:left
226x196

40

만약 브라우저 크기를 조절해서
뷰포트의 넓이를 충분히
확보해 준다면 올라가서
나란히 배치됩니다.

20

float:left
700x196

아래로 떨어져
버립니다.

float을 이용한 가로배치를
하나 더 해볼까요?
20
20

80x50
5

ul class=tab
li/li
li/li
li/li
li/li
/ul

먼저 부모인 .tap상단과 좌측에 패딩을 주고
각 박스에 height값을 지정합니다.

20
50
50
20
50
50

.tab {padding:20px 0 0 20px;}
.tab li {height:50px;}

ul class=tab
li/li
li/li
li/li
li/li
/ul

배경색을 지정해 줍니다.

20
50
50
20
50
50

.tab li {height:50px; background-color: green;}

ul class=tab
li/li
li/li
li/li
li/li
/ul

width를 지정합니다.
20

20

80x50
80x50
20
80x50
80x50

지금까지는 일반적인 상태
(normal flow)입니다.

.tab li {width:80px; height:50px; background-color: green;}

ul class=tab
li/li
li/li
li/li
li/li
/ul

float:left로 가로로 배치합니다.
20
20

80x50

80x50

80x50

80x50

이제 떠있는 상태가
되었습니다.

.tab li {float:left; width:80px; height:50px; background-color: green;}

ul class=tab
li/li
li/li
li/li
li/li
/ul

margin-left로 간격을 벌립니다.

20
20

80x50

.tab li {
float:left;
width:80px;
height:50px;
margin-left:5px;
background-color: green;
}

ul class=tab
li/li
li/li
li/li
li/li
/ul

:first-child 로 첫번째 마진을 없앱니다.

20
20

완성!

.tab li {
float:left;
width:80px;
height:50px;
margin-left:5px;
background-color: green;
} 
.tab li:first-child {margin:0;} 

ul class=tab
li/li
li/li
li/li
li/li
/ul

떠있는 상태(float)에 대해서
조금더 알아봅시다.

사이즈가 지정되지 않은
일반적인 흐름 상태에서 떠있는 상태로
만들때 박스는 어떤 변화가 생기는지 알아봅시다.
이것은 글입니다.

뷰포트에 꽉차죠?

p {border:2px solid black;}
p 이것은 글입니다. /p

float을 적용하게 되면 블록박스는 들어있는
컨텐츠 만큼을 자신의 사이즈로 생각합니다.


들어있는 컨텐츠 만큼
쪼그라듭니다!

p {ﬂoat:left; border:2px solid black;}

이미지의 들어있을 경우에도

div {border:2px solid black;}
divimg src=”foo.jpg”//div

200x150

사이즈가 있는 박스라도

.mother {border:2px solid black;}

.mother div {width:200px; height:150px; border:4px solid red;}
div class=”mother”div/div/div

200x150

감싸고 있는 박스에
float을 주면 쪼그라듭니다.

하지만 사이즈가 이미 있다면
float을 주어도 쪼그라들 수 가 없겠죠? ^^

200x150

div {
float:left;
width:200px;
height:150px;
border:4px solid red;}

이번에는 한쪽이 글일때 float을 어떻게 사용하는지
알아봅시다.

20
20

20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.

20

226x196

20

또한 브라우저를 줄이면 상단 박스와
글들은 사이즈가 자동으로 줄어 들어야 하는 조건입니다.

20
20

20
이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있
습니다. 이글들은 inline box로 되어있으면

20

226x196

20

글줄은 line box로 되어 있습니다.

어떻게 하면 될까요?

그냥 width를 지정하지 않으면 되겠죠?
원래 block box 기본 성질을 이용하는 겁니다.

20
20

?x96
20

20

226x196

20


한번 해볼까요?

.mother {padding:20px 20px 0;}
.top {width:496px; height:96px; margin:0 0 20px; background-color:black;}
.left {float:left; width:226px; height:196px; margin:0 20px 0 0;
background-color:black;}
.right {float:left; width: 226px; height:196px}
글이 늘어나면 자연스럽게
늘어 날 수 있도록
width, height를 모두 지정
하지 않습니다.

div class=mother
div class=top/div
div class=left/div
p class=right이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있습니다. 이글들은 inline
box로 되어있으면 글줄은 line box로 되어 있습니다./p
/div

.top은 문제가 없지만 p는 그렇지 않네요.

20
20

x96
20

20

226x196

20

헉! 떨어져 버리네요.

이것은 글입니다. 보이지는 않지만 바깥 block box에 width, height 가 지정 되어 있
습니다. 이글들은 inline box로 되어있으면 글줄은 line box로 되어 있습니다.

여전히 떠있는 상태(float)로 되어있기 때문에
브라우저는 들어있는 글만큼을 사이즈로 인식하고 있습니다.

20
20

x96
20

20

226x196

20

글줄(line box)들을 둘러싼
block box가 존재하겠죠?


왜 떨어졌을까요?

20
20

x96
20

20

둘다 떠있는상태 (float) 로

226x196

20

나란히 배치하기엔
가로 공간이 부족합니다.


사실 브라우저 입장에서는
둘러싼 block box만 가로막지 않으면
모든 inline box는 좌우로
계속 이어져서 흐르는 한 줄이입니다.

block box line box inline box

그래서 넓이가 확보될 수 있도록
충분하게 뷰포트를 넓혀주면 들어 갈 수는 있습니다.

이것은 글입니다. 보이지는 않지만 바깥 block box에 width, height 가 지정 되어 있습니다. 이글들은 inline box로 되어있으면 글줄은 line box로 되어 있습니다.

하지만 조금이라도 한줄로 있을수 없는
사이즈로 줄여지면 다시 떨어지기
때문에 원하는 결과는 아니죠.

그래서 좌측 박스만 띄웁니다!

20
20

x96
20

float
20

226x196

20


float을 주지 않습니다.

.mother {padding:20px 20px 0;}
.top {width:496px; height:96px; margin:0 0 20px; background-color:black;}
.right {float:left; width: 226px; height:196px}

div class=mother
div class=top/div
div class=left/div
/div

이제 뷰포트를 늘여도 알맞게 늘어납니다.

20
20

x96
20

20

226x196

20


어떻게 된걸까요?

float을 주지 않은 p의 block box는
떠있는 박스의 아래로 기어
들어가기 때문입니다!

20
20

x96
20

226x196
20

20
line box와 inline box들은
float된 박스 아래에 있지
못하고 우측으로 밀려납니다.

위의 사건은 다음과 같은 순서로 배치가 일어납니다.

1. 좌측박스가 왼쪽으로 뜹니다(float:left)

떠있는 상태
float

20

일반적인 흐름
normal flow

일반적인 흐름
normal flow

2. 뜬 좌측 박스 밑으로 p가
기어들어 갑니다.

떠있는 상태
float

일반적인 흐름
normal flow

20

일반적인 흐름
normal flow

3. p의 block box는 그대로 인채 line box와
그안에 들어있는 글(inline box)이 떠있는 박스
아래의 자리에 있지 못하고 밀려납니다.
일반적인 흐름
normal flow

떠있는 상태
20

block box

line box

일반적인 흐름
normal flow

p block 박스는 일반적인 흐름(normal flow)에
width가 지정되지 않았기 때문에 자연스럽게 늘어
날수 있으며, 글들(line, inline box)도 늘어나게 됩니다.

일반적인 흐름
normal flow

20

20

x96
20

226x196
20

20

일반적인 흐름
normal flow


float:right를 주어도 같은 방식으로 렌더링 됩니다.
이제 margin은 float:right준 박스의 좌측으로 주어야 겠지요?

20
20

x96
20

float:right
226x196

20

20

방금과 같은 float의 렌더링 과정은 주로 아래와 같은
본문 상황을 염두해 두고 설계되었습니다.

float

Another New York Times bestseller from
Laurie Halse Anderson! High school
senior Tyler Miller used to be the kind of
guy who faded into the background.
But since he got busted for doing grafﬁti
on the school, and spent the summer
doing outdoor work to pay for it, he
stands out like you wouldn't believe. His new physique attracts the
attention of queen bee Bethany Milbury, who just so happens to be his
father's boss's daughter, the sister of his biggest enemy, and Tyler's
secret crush. And thatfloating된 img다음으로 나오는 that have
sets off a string of events and changes
Tyler questioning his place in school, in his family, and in the world.
일반적인 흐름의 요소(p들)의

img

block box들은 모두 아래로
들어가게 되고 line box와 inline박스들
만 주위로 밀려나 흐르게 됩니다.

p
p

좀 다르긴 하지만
일반적인 워드 프로그램에서도
같은 개념을 찾아 볼 수 있습니다.

또 다른 특성을 하나 알아보겠습니다.
띄우는 상태(float)는 block box를 들어있는
내용만큼 쪼그라들게 만들뿐아니라
float을 inline box에 적용할 경우
block box로 만들어 버립니다.

a를 이용해서 탭버튼을 만든다고 할때

병원 학교 군대 직장 가정
inline box이기 때문에 html코드에서

4px
ainline box이기

줄바뀜이 될경우 한칸띤것과같이
(spacebar) 4px의 white space가
생깁니다.

때문에 좌우로
흘러갑니다.
div

a
a
a
a
a
/div

href=#병원/a

href=#학교/a

href=#군대/a

href=#직장/a

href=#가정/a

a {

background-color:yellow;

font-size:20px;

}

float을 주는 순간 block box로 렌더링됩니다.

병원

학교

군대

직장

float이 적용 되어 block box로
렌더링 되기 때문에 inline box
일때의 4px 간격은 없어집니다.

div

a
a
a
a
/div

width, height, 상하 padding, margin
을 줄수 있습니다.

a {

href=#병원/a

href=#학교/a

href=#군대/a

href=#직장/a


font-size:20px;

ﬂoat:left;

width:100px;

padding:10px 20px;

text-align:center; }

이제 마진을 이용해 간격을 벌립니다.

병원

학교

군대

직장

margin-left:2px

a {

div

a
a
a
a
/div

href=#병원/a

href=#학교/a

href=#군대/a

href=#직장/a


font-size:20px;

ﬂoat:left;

width:100px;

margin-left:2px;

padding:10px 20px;


a:first-child로 첫a의 간격을 없애줍니다.

병원

학교

군대

직장

a:first-child {margin:0;}

a {

div

a
a
a
a
/div

href=#병원/a

href=#학교/a

href=#군대/a

href=#직장/a


font-size:20px;

ﬂoat:left;

width:100px;

margin-left:2px;

padding:10px 20px;


이렇듯 float을 이용한 가로배치는
1.block box를 쪼그라들게 하고
2. inline box는 block box로 만들어 버립니다.

float을 사용할 때
골치 아픈 일이 생기게 됩니다.

먼저 .top, .left, .right를 둘러싼 .mother박스를
관찰해 봅시다.

20
20

x96
20

20

226x196

20


.mother{border:2px dashed black;}
를 주어서 확인해봅시다!

헉! 감싸고 있던 .mother박스가
이런 상태였군요!

20
x96
20

float:left


226x196
20

20

20

떠있는 자식 때문에 박스 아래쪽이
기어들어가 있습니다.

떠있는 상태
float:left

20

일반적인 흐름 상태
normal flow

뜨지 않은 자식까지만
감쌀 수 있습니다.

여기서 만약 P를 삭제 한다면?

20
x96
20

float:left


226x196
20

20

20

부모인 .mother는 일반적인 흐름의 자식
높이 만큼만을 감쌀 수 있습니다.

20
x96

20

20
float:left
226x196
20

20

일반적인 흐름의 자식이
.top밖에 없으므로
.top만 감쌀 수 있습니다.

일반적인 흐름을 가지고 있는 자식들이 모두 없다면
.mother는 아무 높이값도 가질 수 없습니다.

float:left
x96

226x196
20

20

.top도 삭제하였습니다.

반대로 P를 추가 한다면

20
x96
20

float:left


226x196
20

20


20

P의 block box들은 아래로 계속 기어 들어가고
line box와 inline box 만 float된 박스
주위로 밀려나 둘러싸게 됩니다.

20
x96
20

float:left


226x196
20

20


width, height 가 지정 되어 있습니다. 이글들은 inline box로 되어있으면 글줄은 line box로 되어
있습니다.

20

이상태에서 p다음에 float된 박스를 추가한다면?

20
x96
20

float:left


226x196
20

20

20

.mother {padding:20px 20px 0; border:2px solid black;}
.top {height:96px; margin:0 0 20px; background-color:black;}
.right {}
.add {float:left; width:200px; height:200px;}
div class=mother
div class=top/div
div class=left/div
div class=add/div
/div

.add는 같은 처지인 .left와는 가로로 배치되지만
떠있기 때문에 .mother는
.add의 크기 만큼을 감싸주지 못합니다.

20
x96
20

float:left


226x196
20

20

float:left
200x200

20

.mother 다음에 float된 박스를 자식으로
가지고 있는 .father가 온다면?

20
x96
20

float:left


226x196
20

20

20

.father {border:2px solid black;}
div class=mother
div class=top/div
div class=left/div
/div
div class=father
div class=left/div
/div

.mother와 같은 레벨의 .father가 온다해도
마찮가지로 떠있는 상태(float)의 요소로 기어들어갑니다.

20
20

x96
20

float:left

이것은 글입니다. 보

226x196
20

20

float:left
226x196

20

이지는 않지만 바깥
block box에 width,
height 가 지정 되어
있습니다. 이글들은
inline box로 되어있
으면 글줄은 line box
로 되어있습니다.

어떻하면 float의 영향을 끊어서
float된 자식 밑으로 부모박스의 아래부분이
기어들어 가는 것을 막을 수 있을까요?

이렇게 float의 영향력을 끊는 일을
흔히 클리어링이라고 하는데
크게 두가지 종류로 나눌 수 있습니다.

첫번째는 clear속성을 이용하는 방법입니다.

{clear: left }
{clear: right }
{clear: both}
{clear: none}

(float:left일때)
(float:right일때)
(float:left,right 모두일때)
(클리어하지 않음)

가로배치에 쓰이기때문에
왼쪽과 오른쪽 배치밖에는
없습니다.

영향을 받고 싶지 않은 자식에 clear를 적용합니다.

20
20

x96
20

float:left


226x196
20

20


clear:left;

clear가 적용된 p부터
float의 영향에서 벗어납니다.

20
20

x96
20

float:left


226x196
20

부모박스도 영향을 끊은 자식

20

기어들어가지
않습니다.

때문에 제대로 자식들의 높이만
큼 감싸줄 수 있습니다.

이것은 글입니다. 보이지는 않지만 바깥 block box에 width, height 가 지정 되어 있습니다. 이글
들은 inline box로 되어있으면 글줄은 line box로 되어있습니다.
clear:left;

만약 대상 컨텐츠가 없을 경우
빈태그를 삽입해 clear속성을 줄 수 있습니다.

20
20

x96
20

float:left


226x196
20

20
div로 빈 block box를
만들어 clear:left를 줍니다.

.clearfix {clear:left;}

div class=mother
div class=top/div
div class=left/div
div class=clearfix/div
/div

빈태그에 clear속성을 이용하여
떠있는 상태(float)의 영향을 끊어버렸습니다.

20
20

x96
20

float:left


226x196
20


20


clear:left;

기어 들어가지
않습니다.

하지만 클리어링만을 위해 불필요한
빈태그를 계속 넣어야 할까요?

빈태그 대신 :after 선택자를 이용해봅시다!
.mother {padding:20px 20px 0; border:2px solid black; zoom:1;}

ie6~7에서 클리어
될 수 있도록 하기위해
넣어줍니다.

clear을 적용할 수 있는 block값으로 설정

.mother:after {clear:left; content: .; display:block; visibillity:hidden; height:0;}
컨텐츠를 넣는 역할
점하나만 넣어줍니다.

넣은 점이 보이지 않도록 해줍니다.

똑같이 clear속성을 줍니다.

:after선택자는 가상으로 요

div class=mother
소를 만들어서 선택하기 때
div class=top/div
문에 .mother가 가지고 있는
div class=left/div
자식(.top, .left, .right)의
맨뒤에
block box에 width, height 가 지정 되어 있습니다. 이글들은 inline 컨텐츠를 삽입할 수
있습니다.
div class=clearfix/div
/div

:after와 clear속성을 이용하여
떠있는 상태(float)의 영향력을 끊어버렸습니다.

20
20

x96
20

float:left


226x196
20


20


:after로 가상으로 만들어진 요소를 만들어
clear속성을 주고 클리어링 시켰습니다.

기어 들어가지
않습니다.

두번째 클리어링 방법을 알아보기 위해서
일반적인 흐름(normal flow)에 대해서
좀 더 알아봅시다.

일반적인 흐름(normal flow)에서의 배치는
세가지 상황일 때를 말한다고 했습니다.

block box가
만들어지는 상황
(block formatted context)

inline box가
만들어지는 상황
(inline formatted context)

position:relative가
적용될 때
(relative positioning)

그 중 우리가 흔히 자식박스를 감싸기 위해
block box를 하나 만드는 것도
브라우저 입장에서는
“block box가 만들어지는 상황”에 포함됩니다.
block
formatted
context

“block box가 만들어지는 상황”에서 자식하나가
float으로 떠있기 때문에 감싸 안을 수 없게
된 것입니다.

block
formatted
context

부모에게 몇가지 속성이 적용될 때
“block box가 만들어지는 상황”이
새롭게 구성되는데
이 때 float된 자식까지를 포함할 수 있게 됩니다.

new block
formatted
context

바로
overflow, float, display:inline-block
속성등이 적용될 때 입니다.
new block formatted context
overflow:hidden
float:left, right
display: inline-block

물론 여기에 사용할 용도로 만들어진 속성은
아니지만, 각자의 역할을 할때
새로운 block formatted context가
구성 되도록 설계 된 것입니다.

정해진 width나 height보다 컨텐츠가
넘칠경우 잘라버리기

overflow:hidden
float:left, right
display: inline-block

띄워서 왼쪽이나 오른쪽으로 배치하기

인라인박스처럼 좌에서우로 흐르지만, 사이즈
와 상하마진, 패딩도 줄 수있는 박스로 만들기

이렇게 새롭게 된 부모박스는
float된 자식까지 감싸안을 수 있습니다.

20
20

x96
20

float:left


226x196
20

20

.mother{overflow:hidden}

이것이 두번째 클리어링 하는 방법입니다.

overflow:hidden으로 클리어링을 할
경우 컨텐츠가 넘칠 경우 잘라버리기 때문에
문제가 있을수 없는 곳에 사용합니다.

전체 레이아웃에 사용할
.mother {overflow:hidden; padding:20px 20px 0; border:2px solid black;} 경
우 안에서
.top {height:96px; margin:0 0 20px; background-color:black;} 레이어창등 어떤
.left {float:left; width:226px; height:196px; margin:0컨텐츠가 나올지 모르기 때
20px 0 0;
문에는 사용하지 않는 것이
좋습니다.

float으로 클리어링을 할 경우
뜨면서 들어있는 컨텐츠만큼을 사이즈로
인식하기 때문에 width속성과 함께 사용합니다.

.mother {float:left; width:496px; padding:20px 20px 0; border:2px solid black;}
margin:0 auto. 가운데 정렬
을 사용할 수 없게 됩니다.

display:inline-block 으로 클리어링
을 할 경우 컨텐츠 만큼을
사이즈로 인식(ie7제외)하기 때문에
width속성과 함께 사용합니다.

.mother {display:inline-block; width:496px; padding:20px 20px 0; border:2px
solid black;}

margin:0 auto. 가운데 정렬
.top {height:96px; margin:0 0 20px; background-color:black;}수 없게 됩니다.
을 사용할

물론 .mother안에 들어 있는 컨텐츠들의 높이를
정해 버린다면 그냥 height값을 줘도 되겠죠...

20
x96
20

320px


float:left


226x196
20

20

20

하지만 데이타(글)의 양을 알 수 없을 경우의
유연하게 조절되지 않기 때문에 한정적일 뿐입니다.

x96


226x196


width, height 가 지정 되어 있습니다. 이글들은 inline box로 되어있으면 글줄은 line box로
되어있습니다.

이렇게 클리어링을 하는 방법은 크게
2가지 모두5가지라고 할 수 있습니다.

3. 절대적인 위치(absolute)를
이용한 배치

절대적인 위치를 이용하는 방법은
좌표값을 이용하기 때문에 상대적으로 쉽습니다.
(0, 0)
(20,20)

496x96
(20,220)

(300,220)

226x196

226x196

normal flow와 float을 이용하는
방법은 자연스럽게 아래박스를 밀 수 있는 반면

496x96
496x116

226x196

40

226x196

좌표로 지정된 요소들은 밀려나지 않습니다. 다른 주위
에 것들과는 관계성이 없이 절대적(absolute)인것이죠.

(0, 0)
(20,20)

(20,220)

(300,220)

그렇기 때문에 꼭 필요한 곳에
한정지어 사용할 수 밖에 없습니다.
(450,5)

20
496x96
20

error!
20

226x196

40

226x196

position속성은 다음과 같습니다.
{position: absolute }
{position: fixed }
{position: relative }
{position: static }
{position: inherit }

다른요소와 관계성 없이 절대적으로 좌표값으로 배치
스크롤이 생겨도 viewport 기준, 좌표값으로 고정
일반 normal flow처럼 관계성을 가지고 좌표값으로 배치
(absolute의 기준으로 사용하기도 함)
position속성을 주지 않은것 같이
부모의 position속성을 상속받음

position:relative를 가지고 있는 부모를
기준으로 지정된 위치로 이동

20
x96

error!

20


float:left


226x196
20

20

20

기준을 삼을 부모에 적용

.mother {position:relative; padding:20px 20px 0; border:2px solid black;}

왼쪽에서 200px만큼

.alrambox {position:absolute; top:100px; left:200px; width:200px;
height:50px; } /* bottom, right */
위에서 100px만큼

div class=mother
div class=top/div
div class=left/div
div class=alramboxerror!/div
/div

만약 기준이 이동한다면 같이 이동하겠죠?

body {padding:0 0 30px;}
20
x96

error!

20


float:left


226x196
20

20

20

사실 position:absolute는 한단계씩
올라가면서 relative가 선언된 부모를 계속 찾게 됩니다.

x96

float:left
226x196

error!

만약 기준이 없다면?

body {padding:0 0 30px;}
20

error!
x96

결국 마지막 부모인
20
body까지 올라가
기준으로 삼습니다.
float:left


226x196
20

20

20

position:relative는 자기가 원래 있었던 자리를
기준으로해서 떨어져나와(offset) 이동합니다.

20
20

x96
20

이때 float된 상태와 원래


그 자리는 유지합니다. box
width, height 가 지정 되어 있습니다. 이글들은 inline하지만

20

position:relative
top:20px
left:50px
20
226x196
float:left

로 되어있으면 글줄은 line box로나와 이동할때는
떨어져 되어있습니다.

주위에 영향을 주지 않습니다.

주변의 상황이 변하여도 normal flow의
주위박스와의 관계성은 계속해서 유지됩니다.
이런 측면으로 알수 있듯이 relative는
20
x96

absolute와는 완전히 다른 일반적인
흐름(normal flow)을 이용한 배치 방
20
법중에 하나입니다.

40 위와의 간격이 20에서 40으로 변하였습니다.

20

로
position:relative 되어있으면 글줄은 line box로 되어있습니다.
20
top:20px
left:50px

226x196
float:left

그렇기 때문에 일반적인 흐름(normal flow)
에서의 배치중에 하나입니다.

block box들이 만들어질 때
(block formatted context)

inline box들이 만들어질 때 position:relative가 적용될 때
(inline formatted context)
(relative positioning)

만약 .left에 position:absolute를 적용했다면?
부모중에 relative가 없어 body기준이 되었습니다.

절대적인 absolute가
우선으로 적용 되면서
float은 적용되지 않습
니다

20
position:absolute
top:20px
left:25px

x96

20

226x196
40
float:left
20

이것은 글입니다. 보이지는 않지만 바깥 block box에 width, height 가 지정 되어 있습니다. 이글들
은 inline box로 되어있으면 글줄은 line box로 되어있습니다.

.left가 일반적인흐름(normal flow)에서 완전히 없어
지면서 부모는 .top과 p만 감싸게 됩니다.

position:absoute도 float과 같이 width가 주어지지
않으면, 쪼그라들고 inline box들이 block box로 변합니다.


들어있는 컨텐츠 만큼


a 이것은 글입니다. /a

쪼그라들고

상하 패딩이 적용됩니다.

p {position:absolute; top:0; left:0; border:2px solid black;}
a {position:absolute; top:100px; left:0; padding:30px; border:2px solid black;}

position:fixed는 무조건 뷰포트기준입니다.

.box {
position:fixed;
bottom:0;
left: 100px;

스크롤이 내려가도 뷰포트 기준으로 그대로 있습니다!

.box {
position:fixed;
bottom:0;
left: 100px;

그럼 지금까지 배운 3가지 배치방법들의
쌓이는 순서는 어떻게 될까요?

먼저 크게 세가지 순서의 층이 있습니다.

position
float

normal flow

position층에서 다시 우선순위가 있습니다

z-index 값크기
마크업순서

position
float

normal flow

z-index값크기 층에서 다시
부모자식 관계로 우선순위가 결정됩니다.
부모자식관계
z-index 값크기
마크업순서

position
float

normal flow

z-index가 같지만

마크업순서가

낮다

마크업순서가 1이지만

z-index가 있어서 2,3보다 높다.

z-index가 제일 높지만

absolute4가 더 높다

div class=mother

normal / z-index:300

div class=ﬂoatﬂoat/div

div class=aabsolute 1 / z-index:100

div class=aaabsolute 1_1 / z-index:500/div

div class=ababsolute 1_2 / z-index:500/div

/div

div class=brelative 2/div

div class=crelative 3/div

div class=dabsolute 4 / z-index:150/div

/div

WebStandards-Basic 5.positioning

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (15)

WebStandards-Basic 5.positioning