14. 일반적인 흐름(normal flow)상태에서의 배치란
우리가 알고 있는 block box와 inline box들이
만들어지는 상황이라고 쉽게 생각하시면 됩니다.
박스를 자세히 들여다보면 가장자리를 둘러싸고 있는 container box와 글줄을 이루고 있는 line box 그리고
글줄을 따라 흐르고있는 inline box로 이루어져 있습니다.
•학교
•병원
•공항
왼쪽 위에서 시작.
아래로 쌓임.
block box
inline box
inline box
꽉차고 세로로 쌓임
width, height
상하 마진,패딩
왼쪽에서 오른쪽으
로 흐름
15. 여기에 margin과 padding을 주고
width와 height로 사이즈를 주어서
자신의 크기를 조절하고 서로를 밀어 배치하는
관계성이 있는 배치입니다.
content
padding
height
width
16. 아래의 예를 만들어 보면서
일반적인 흐름(normal flow)을 이용한
배치에 대해 좀 더 알아봅시다
20
496x96
20
20
자신의 높이(96)와 상하 마진(20)을
226x196
40
이용해서 하단에 있는 박스들을
밀어서 배치합니다.
226x196
18. 96
2
196
먼저 div(block box)로 필요한
박스들을 만들고
들어있는 컨텐츠가 없기 때문에
자신의 높이를 height로
지정해서 만들고 border를 줍니다
196
세로로 쌓였습니다.
19. .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
21. .mother div {border:2px solid black;}
.top {width:496px; height:96px; }
.left {width:226px; height:196px; }
.top을 기준(제외하고)
div를 가진 모든
형제요소를 선택
(left,right를 모두선택)
.left와 .right가 같으니까
.right {width:226px; height:196px; }
요렇게도 한번에 선택할 수
있겠죠?
.mother div {border:2px solid black;}
.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
29. float속성은 4가지 값을 가질 수 있습니다.
띄우다
(왼쪽으로 띄움)
{float: left }
{float: right } (오른쪽으로 띄움)
{float: none} (띄우지 않음)
{float: inherit} (상속받음)
가로배치에 쓰이기때문에
왼쪽과 오른쪽 배치밖에는
없습니다.
37. 20
만약 사이즈가
부모 박스
496x96
보다 커진다면?
20
float:left
226x196
float:left
40
20
.left를 감싸고 있는 부모박스
.mother 인 .mother는 width값이 지정되
있지 않으므로 가장 부모인 body
즉 뷰포트에 영향을 받습니다.
700x196
59. 하지만 사이즈가 이미 있다면
float을 주어도 쪼그라들 수 가 없겠죠? ^^
200x150
div {
float:left;
width:200px;
height:150px;
border:4px solid red;}
60. 이번에는 한쪽이 글일때 float을 어떻게 사용하는지
알아봅시다.
20
20
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.
20
226x196
20
61. 또한 브라우저를 줄이면 상단 박스와
글들은 사이즈가 자동으로 줄어 들어야 하는 조건입니다.
20
20
20
이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있
습니다. 이글들은 inline box로 되어있으면
20
226x196
20
글줄은 line box로 되어 있습니다.
어떻게 하면 될까요?
62. 그냥 width를 지정하지 않으면 되겠죠?
원래 block box 기본 성질을 이용하는 겁니다.
20
20
?x96
20
이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있
습니다. 이글들은 inline box로 되어있으면
20
226x196
20
글줄은 line box로 되어 있습니다.
한번 해볼까요?
63. .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
64. .top은 문제가 없지만 p는 그렇지 않네요.
20
20
x96
20
20
226x196
20
헉! 떨어져 버리네요.
이것은 글입니다. 보이지는 않지만 바깥 block box에 width, height 가 지정 되어 있
습니다. 이글들은 inline box로 되어있으면 글줄은 line box로 되어 있습니다.
65. 여전히 떠있는 상태(float)로 되어있기 때문에
브라우저는 들어있는 글만큼을 사이즈로 인식하고 있습니다.
20
20
x96
20
20
226x196
20
글줄(line box)들을 둘러싼
block box가 존재하겠죠?
이것은 글입니다. 보이지는 않지만 바깥 block box에 width, height 가 지정 되어 있
습니다. 이글들은 inline box로 되어있으면 글줄은 line box로 되어 있습니다.
66. 왜 떨어졌을까요?
20
20
x96
20
20
둘다 떠있는상태 (float) 로
226x196
20
나란히 배치하기엔
가로 공간이 부족합니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에 width, height 가 지정 되어 있
습니다. 이글들은 inline box로 되어있으면 글줄은 line box로 되어 있습니다.
67. 사실 브라우저 입장에서는
둘러싼 block box만 가로막지 않으면
모든 inline box는 좌우로
계속 이어져서 흐르는 한 줄이입니다.
block box line box inline box
68. 그래서 넓이가 확보될 수 있도록
충분하게 뷰포트를 넓혀주면 들어 갈 수는 있습니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에 width, height 가 지정 되어 있습니다. 이글들은 inline box로 되어있으면 글줄은 line box로 되어 있습니다.
하지만 조금이라도 한줄로 있을수 없는
사이즈로 줄여지면 다시 떨어지기
때문에 원하는 결과는 아니죠.
69. 그래서 좌측 박스만 띄웁니다!
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있
float
20
226x196
20
습니다. 이글들은 inline box로 되어있으면
글줄은 line box로 되어 있습니다.
float을 주지 않습니다.
70. .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}
div class=mother
div class=top/div
div class=left/div
p class=right이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있습니다. 이글들은 inline
box로 되어있으면 글줄은 line box로 되어 있습니다./p
/div
71. 이제 뷰포트를 늘여도 알맞게 늘어납니다.
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
20
226x196
20
로 되어있으면 글줄은 line box로 되어있습니다.
어떻게 된걸까요?
72. float을 주지 않은 p의 block box는
떠있는 박스의 아래로 기어
들어가기 때문입니다!
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
line box와 inline box들은
float된 박스 아래에 있지
못하고 우측으로 밀려납니다.
73. 위의 사건은 다음과 같은 순서로 배치가 일어납니다.
1. 좌측박스가 왼쪽으로 뜹니다(float:left)
떠있는 상태
float
20
일반적인 흐름
normal flow
일반적인 흐름
normal flow
74. 2. 뜬 좌측 박스 밑으로 p가
기어들어 갑니다.
떠있는 상태
float
일반적인 흐름
normal flow
20
일반적인 흐름
normal flow
75. 3. p의 block box는 그대로 인채 line box와
그안에 들어있는 글(inline box)이 떠있는 박스
아래의 자리에 있지 못하고 밀려납니다.
일반적인 흐름
normal flow
떠있는 상태
20
block box
line box
일반적인 흐름
normal flow
76. p block 박스는 일반적인 흐름(normal flow)에
width가 지정되지 않았기 때문에 자연스럽게 늘어
날수 있으며, 글들(line, inline box)도 늘어나게 됩니다.
일반적인 흐름
normal flow
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
일반적인 흐름
line box와 inline box들은
normal flow
float된 박스 아래에 있지
못하고 우측으로 밀려납니다.
77. float:right를 주어도 같은 방식으로 렌더링 됩니다.
이제 margin은 float:right준 박스의 좌측으로 주어야 겠지요?
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.
float:right
226x196
20
20
line box와 inline box들은
float된 박스 아래에 있지
못하고 우측으로 밀려납니다.
78. 방금과 같은 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 graffiti
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
80. 또 다른 특성을 하나 알아보겠습니다.
띄우는 상태(float)는 block box를 들어있는
내용만큼 쪼그라들게 만들뿐아니라
float을 inline box에 적용할 경우
block box로 만들어 버립니다.
81. 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;
}
82. 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
background-color:yellow;
font-size:20px;
float:left;
width:100px;
padding:10px 20px;
text-align:center; }
83. 이제 마진을 이용해 간격을 벌립니다.
병원
학교
군대
직장
margin-left:2px
a {
div
a
a
a
a
/div
href=#병원/a
href=#학교/a
href=#군대/a
href=#직장/a
background-color:yellow;
font-size:20px;
float:left;
width:100px;
margin-left:2px;
padding:10px 20px;
text-align:center; }
84. a:first-child로 첫a의 간격을 없애줍니다.
병원
학교
군대
직장
a:first-child {margin:0;}
a {
div
a
a
a
a
/div
href=#병원/a
href=#학교/a
href=#군대/a
href=#직장/a
background-color:yellow;
font-size:20px;
float:left;
width:100px;
margin-left:2px;
padding:10px 20px;
text-align:center; }
85. 이렇듯 float을 이용한 가로배치는
1.block box를 쪼그라들게 하고
2. inline box는 block box로 만들어 버립니다.
87. 먼저 .top, .left, .right를 둘러싼 .mother박스를
관찰해 봅시다.
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
20
226x196
20
로 되어있으면 글줄은 line box로 되어있습니다.
.mother{border:2px dashed black;}
를 주어서 확인해봅시다!
88. 헉! 감싸고 있던 .mother박스가
이런 상태였군요!
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
20
89. 떠있는 자식 때문에 박스 아래쪽이
기어들어가 있습니다.
떠있는 상태
float:left
20
일반적인 흐름 상태
normal flow
뜨지 않은 자식까지만
감쌀 수 있습니다.
90. 여기서 만약 P를 삭제 한다면?
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
20
91. 부모인 .mother는 일반적인 흐름의 자식
높이 만큼만을 감쌀 수 있습니다.
20
x96
20
20
float:left
226x196
20
20
일반적인 흐름의 자식이
.top밖에 없으므로
.top만 감쌀 수 있습니다.
92. 일반적인 흐름을 가지고 있는 자식들이 모두 없다면
.mother는 아무 높이값도 가질 수 없습니다.
float:left
x96
226x196
20
20
.top도 삭제하였습니다.
93. 반대로 P를 추가 한다면
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에
226x196
20
20
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.
20
94. P의 block box들은 아래로 계속 기어 들어가고
line box와 inline box 만 float된 박스
주위로 밀려나 둘러싸게 됩니다.
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에
226x196
20
20
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box로 되어있으면 글줄은 line box로 되어
있습니다.
20
95. 이상태에서 p다음에 float된 박스를 추가한다면?
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
20
96. .mother {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;
background-color:black;}
.right {}
.add {float:left; width:200px; height:200px;}
div class=mother
div class=top/div
div class=left/div
p class=right이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있습니다. 이글들은 inline
box로 되어있으면 글줄은 line box로 되어 있습니다./p
div class=add/div
/div
97. .add는 같은 처지인 .left와는 가로로 배치되지만
떠있기 때문에 .mother는
.add의 크기 만큼을 감싸주지 못합니다.
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
float:left
200x200
20
98. .mother 다음에 float된 박스를 자식으로
가지고 있는 .father가 온다면?
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
20
99. .mother {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;
background-color:black;}
.father {border:2px solid black;}
div class=mother
div class=top/div
div class=left/div
p class=right이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있습니다. 이글들은 inline
box로 되어있으면 글줄은 line box로 되어 있습니다./p
/div
div class=father
div class=left/div
p class=right이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있습니다. 이글들은 inline
box로 되어있으면 글줄은 line box로 되어 있습니다./p
/div
100. .mother와 같은 레벨의 .father가 온다해도
마찮가지로 떠있는 상태(float)의 요소로 기어들어갑니다.
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
이것은 글입니다. 보
226x196
20
20
float:left
226x196
20
이지는 않지만 바깥
block box에 width,
height 가 지정 되어
있습니다. 이글들은
inline box로 되어있
으면 글줄은 line box
로 되어있습니다.
101. 어떻하면 float의 영향을 끊어서
float된 자식 밑으로 부모박스의 아래부분이
기어들어 가는 것을 막을 수 있을까요?
103. 첫번째는 clear속성을 이용하는 방법입니다.
{clear: left }
{clear: right }
{clear: both}
{clear: none}
(float:left일때)
(float:right일때)
(float:left,right 모두일때)
(클리어하지 않음)
가로배치에 쓰이기때문에
왼쪽과 오른쪽 배치밖에는
없습니다.
104. 영향을 받고 싶지 않은 자식에 clear를 적용합니다.
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에
226x196
20
20
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.
clear:left;
105. clear가 적용된 p부터
float의 영향에서 벗어납니다.
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
부모박스도 영향을 끊은 자식
20
기어들어가지
않습니다.
때문에 제대로 자식들의 높이만
큼 감싸줄 수 있습니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에 width, height 가 지정 되어 있습니다. 이글
들은 inline box로 되어있으면 글줄은 line box로 되어있습니다.
clear:left;
106. 만약 대상 컨텐츠가 없을 경우
빈태그를 삽입해 clear속성을 줄 수 있습니다.
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
div로 빈 block box를
만들어 clear:left를 줍니다.
107. .mother {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;
background-color:black;}
.clearfix {clear:left;}
div class=mother
div class=top/div
div class=left/div
p class=right이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있습니다. 이글들은 inline
box로 되어있으면 글줄은 line box로 되어 있습니다./p
div class=clearfix/div
/div
108. 빈태그에 clear속성을 이용하여
떠있는 상태(float)의 영향을 끊어버렸습니다.
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
부모박스도 영향을 끊은 자식
20
때문에 제대로 자식들의 높이만
큼 감싸줄 수 있습니다.
clear:left;
기어 들어가지
않습니다.
110. 빈태그 대신 :after 선택자를 이용해봅시다!
.mother {padding:20px 20px 0; border:2px solid black; zoom:1;}
.top {height:96px; margin:0 0 20px; background-color:black;}
.left {float:left; width:226px; height:196px; margin:0 20px 0 0;
background-color:black;}
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)의
p class=right이것은 글입니다. 보이지는 않지만 바깥
맨뒤에
block box에 width, height 가 지정 되어 있습니다. 이글들은 inline 컨텐츠를 삽입할 수
있습니다.
box로 되어있으면 글줄은 line box로 되어 있습니다./p
div class=clearfix/div
/div
111. :after와 clear속성을 이용하여
떠있는 상태(float)의 영향력을 끊어버렸습니다.
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
부모박스도 영향을 끊은 자식
20
때문에 제대로 자식들의 높이만
큼 감싸줄 수 있습니다.
:after로 가상으로 만들어진 요소를 만들어
clear속성을 주고 클리어링 시켰습니다.
기어 들어가지
않습니다.
112. 두번째 클리어링 방법을 알아보기 위해서
일반적인 흐름(normal flow)에 대해서
좀 더 알아봅시다.
113. 일반적인 흐름(normal flow)에서의 배치는
세가지 상황일 때를 말한다고 했습니다.
block box가
만들어지는 상황
(block formatted context)
inline box가
만들어지는 상황
(inline formatted context)
position:relative가
적용될 때
(relative positioning)
114. 그 중 우리가 흔히 자식박스를 감싸기 위해
block box를 하나 만드는 것도
브라우저 입장에서는
“block box가 만들어지는 상황”에 포함됩니다.
block
formatted
context
115. “block box가 만들어지는 상황”에서 자식하나가
float으로 떠있기 때문에 감싸 안을 수 없게
된 것입니다.
block
formatted
context
116. 부모에게 몇가지 속성이 적용될 때
“block box가 만들어지는 상황”이
새롭게 구성되는데
이 때 float된 자식까지를 포함할 수 있게 됩니다.
new block
formatted
context
118. 물론 여기에 사용할 용도로 만들어진 속성은
아니지만, 각자의 역할을 할때
새로운 block formatted context가
구성 되도록 설계 된 것입니다.
정해진 width나 height보다 컨텐츠가
넘칠경우 잘라버리기
overflow:hidden
float:left, right
display: inline-block
띄워서 왼쪽이나 오른쪽으로 배치하기
인라인박스처럼 좌에서우로 흐르지만, 사이즈
와 상하마진, 패딩도 줄 수있는 박스로 만들기
119. 이렇게 새롭게 된 부모박스는
float된 자식까지 감싸안을 수 있습니다.
20
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
.mother{overflow:hidden}
121. 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;
문에는 사용하지 않는 것이
background-color:black;}
좋습니다.
122. float으로 클리어링을 할 경우
뜨면서 들어있는 컨텐츠만큼을 사이즈로
인식하기 때문에 width속성과 함께 사용합니다.
.mother {float:left; width:496px; padding:20px 20px 0; border:2px solid black;}
.top {height:96px; margin:0 0 20px; background-color:black;}
margin:0 auto. 가운데 정렬
.left {float:left; width:226px; height:196px; margin:0 20px 0 0;
을 사용할 수 없게 됩니다.
background-color:black;}
123. 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;}수 없게 됩니다.
을 사용할
.left {float:left; width:226px; height:196px; margin:0 20px 0 0;
background-color:black;}
124. 물론 .mother안에 들어 있는 컨텐츠들의 높이를
정해 버린다면 그냥 height값을 줘도 되겠죠...
20
x96
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
320px
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
20
125. 하지만 데이타(글)의 양을 알 수 없을 경우의
유연하게 조절되지 않기 때문에 한정적일 뿐입니다.
x96
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
226x196
로 되어있으면 글줄은 line box로 되어있습니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box로 되어있으면 글줄은 line box로
되어있습니다.
128. 절대적인 위치를 이용하는 방법은
좌표값을 이용하기 때문에 상대적으로 쉽습니다.
(0, 0)
(20,20)
496x96
(20,220)
(300,220)
226x196
226x196
129. normal flow와 float을 이용하는
방법은 자연스럽게 아래박스를 밀 수 있는 반면
496x96
496x116
226x196
40
226x196
130. 좌표로 지정된 요소들은 밀려나지 않습니다. 다른 주위
에 것들과는 관계성이 없이 절대적(absolute)인것이죠.
(0, 0)
(20,20)
(20,220)
(300,220)
131. 그렇기 때문에 꼭 필요한 곳에
한정지어 사용할 수 밖에 없습니다.
(450,5)
20
496x96
20
error!
20
226x196
40
226x196
132. position속성은 다음과 같습니다.
{position: absolute }
{position: fixed }
{position: relative }
{position: static }
{position: inherit }
다른요소와 관계성 없이 절대적으로 좌표값으로 배치
스크롤이 생겨도 viewport 기준, 좌표값으로 고정
일반 normal flow처럼 관계성을 가지고 좌표값으로 배치
(absolute의 기준으로 사용하기도 함)
position속성을 주지 않은것 같이
부모의 position속성을 상속받음
133. position:relative를 가지고 있는 부모를
기준으로 지정된 위치로 이동
20
x96
error!
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
20
134. 기준을 삼을 부모에 적용
.mother {position:relative; 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;
background-color: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
p class=right이것은 글입니다. 보이지는 않지만 바깥
block box에 width, height 가 지정 되어 있습니다. 이글들은 inline
box로 되어있으면 글줄은 line box로 되어 있습니다./p
div class=alramboxerror!/div
/div
135. 만약 기준이 이동한다면 같이 이동하겠죠?
body {padding:0 0 30px;}
20
x96
error!
20
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
float:left
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
20
137. 만약 기준이 없다면?
body {padding:0 0 30px;}
20
error!
x96
결국 마지막 부모인
20
body까지 올라가
기준으로 삼습니다.
float:left
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
로 되어있으면 글줄은 line box로 되어있습니다.
226x196
20
20
20
138. position:relative는 자기가 원래 있었던 자리를
기준으로해서 떨어져나와(offset) 이동합니다.
20
20
x96
20
이때 float된 상태와 원래
이것은 글입니다. 보이지는 않지만 바깥 block box에
그 자리는 유지합니다. box
width, height 가 지정 되어 있습니다. 이글들은 inline하지만
20
position:relative
top:20px
left:50px
20
226x196
float:left
로 되어있으면 글줄은 line box로나와 이동할때는
떨어져 되어있습니다.
주위에 영향을 주지 않습니다.
139. 주변의 상황이 변하여도 normal flow의
주위박스와의 관계성은 계속해서 유지됩니다.
이런 측면으로 알수 있듯이 relative는
20
x96
absolute와는 완전히 다른 일반적인
흐름(normal flow)을 이용한 배치 방
20
법중에 하나입니다.
40 위와의 간격이 20에서 40으로 변하였습니다.
이것은 글입니다. 보이지는 않지만 바깥 block box에
width, height 가 지정 되어 있습니다. 이글들은 inline box
20
로
position:relative 되어있으면 글줄은 line box로 되어있습니다.
20
top:20px
left:50px
226x196
float:left
140. 그렇기 때문에 일반적인 흐름(normal flow)
에서의 배치중에 하나입니다.
block box들이 만들어질 때
(block formatted context)
inline box들이 만들어질 때 position:relative가 적용될 때
(inline formatted context)
(relative positioning)
141. 만약 .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만 감싸게 됩니다.
142. position:absoute도 float과 같이 width가 주어지지
않으면, 쪼그라들고 inline box들이 block box로 변합니다.
이것은 글입니다.
p 이것은 글입니다. /p
들어있는 컨텐츠 만큼
이것은 글입니다.
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;}
148. z-index값크기 층에서 다시
부모자식 관계로 우선순위가 결정됩니다.
부모자식관계
z-index 값크기
마크업순서
position
float
normal flow
149. z-index가 같지만
마크업순서가
낮다
마크업순서가 1이지만
z-index가 있어서 2,3보다 높다.
z-index가 제일 높지만
absolute4가 더 높다
div class=mother
normal / z-index:300
div class=floatfloat/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