WebStandards-Basic 5.positioning

  • 6,944 views
Uploaded on

http://www.eulsoo.com

http://www.eulsoo.com

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,944
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
19
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Understanding HTML/CSS 배치하기 을수
  • 2. eulsoo.com
  • 3.    eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.
  • 4. 1. 일반적인 흐름에서의 배치 2. 떠있는 상태에서의 배치 3. 절대적인 상태에서의 배치
  • 5. 처음 인쇄에서는 모두 글씨였습니다. 그렇기 때문에 어쩔 수 없이 선형적(linearity)인 흐름을 이용했습니다. 좌측에서 우측으로 글자들이 이어지며 한줄이 모두 차면 아 래줄로 이어집니다.
  • 6. 하지만 기술이 발달하면서 다양한 배치를 이용해 사람들에게 편리함을 주기도 하고 시각적 자극을 줄수도 있게 되었습니다.
  • 7. HTML은 선형적(linearity)입니다. 브라우저가 위에서 아래로 순서대로 처리 된다는 말이죠. CSS없이 HTML만 있 는 상태입니다.
  • 8. 여기에 CSS를 더해서 시각적 순서를 완전히 바꾸는 배치로 만들수 있습니다. 선형적인 정보를 원하 는 목적의 우선순위에 따라 배치를 완전히 바 꾸게 됩니다.
  • 9. 이렇듯 배치를 한다는 것은 웹문서를 만드는 가장 중요한 이유중에 하나입니다. 하지만 시각장애인에게는 음성리더기가 순서대로 읽어줄때 이해할 수 있는 논리적인 구조가 중요합니다
  • 10. 디자이너가 직접 코드 를 배워야 하는 이유가 이런면에 있다고 생각 합니다. ^^ 진짜 좋은 배치란 두가지를 모두 만족시킬 수 있도록 디자인 되는것이 아닐까요?
  • 11. 웹페이지의 모든 박스들의 배치는 세가지 상태에서 이루어집니다.
  • 12. 웹페이지의 모든 박스들의 배치는 세가지 상태에서 이루어집니다. 첫째. 일반적인 흐름(normal flow)에서 둘째. 떠있는 상태(float)에서 셋째. 절대적인 상태(absolute)에서
  • 13. 1.일반적인 흐름(normal flow) 에서의 배치
  • 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
  • 17. <div class="mother"> <div class="top"></div> <div class="left"></div> <div class="right"></div> </div>
  • 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>
  • 20. 496x96 226x196 자신에게 width값을 지정하여 226x196 임의의 사이즈를 가진 박스로 만듭니다.
  • 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>
  • 22. 20 496x96 20 226x196 각 박스에 필요한 여백(padding)과 서로간의 간격(margin)을 이용하여 원하는 위치까지 밀어서 배치합니다. 226x196
  • 23. 20 496x96 20 226x196 20 226x196
  • 24. .mother {padding:20px 0 0 20px;} .mother > div {border:2px solid black;} .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>
  • 25. 20 496x96 20 226x196 20 보통의 경우에 일반적인 흐름(normal flow)에서 할 수 있는 배치입니다. 226x196
  • 26. 20 496x96 20 226x196 20 226x196 ? 일반적인 흐름(normal flow) 에서문제는 가로 배치! 블록박스를 가로로 배치하 기 위해 뭔가가 필요합니다.
  • 27. 이제 떠있는 상태(float)에서 의 배치가 필요한 순간입니다!
  • 28. 2. 떠있는 상태(float) 에서의 배치
  • 29. float속성은 4가지 값을 가질 수 있습니다. 띄우다 (왼쪽으로 띄움) {float: left } {float: right } (오른쪽으로 띄움) {float: none} (띄우지 않음) {float: inherit} (상속받음) 가로배치에 쓰이기때문에 왼쪽과 오른쪽 배치밖에는 없습니다.
  • 30. 20 496x96 20 float:left 226x196 20 이제 배치하려는 박스에 float:left 226x196 각 각 float:left를 주면
  • 31. .mother {padding:20px 0 0 20px;} .mother > div {border:2px solid black;} .top {width:496px; margin:0 0 20px; height:96px; } .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>
  • 32. 20 496x96 20 float:left float:left 226x196 226x196 20 나란히 가로로 배치됩니다.
  • 33. 일반적인 흐름 (normal flow) 떠있는 상태 (float) 각 각 떠서 왼쪽방향으로 당겨지면서 배치됩니다.
  • 34. 떠있는 상태 40 떠있는 상태 배치가 끝났으면 마진을 이용해서 간격을 벌립니다.
  • 35. .mother {padding:20px 0 0 20px;} .mother > div {border:2px solid black;} .top {width:496px; margin:0 0 20px; height:96px; } .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>
  • 36. 20 496x96 20 float:left 226x196 float:left 40 226x196 20 완성!
  • 37. 20 만약 사이즈가 부모 박스 496x96 보다 커진다면? 20 float:left 226x196 float:left 40 20 .left를 감싸고 있는 부모박스 .mother 인 .mother는 width값이 지정되 있지 않으므로 가장 부모인 <body> 즉 뷰포트에 영향을 받습니다. 700x196
  • 38. 20 496x96 20 float:left 226x196 40 만약 브라우저 크기를 조절해서 뷰포트의 넓이를 충분히 확보해 준다면 올라가서 나란히 배치됩니다. 20 float:left 700x196 아래로 떨어져 버립니다.
  • 39. float을 이용한 가로배치를 하나 더 해볼까요? 20 20 80x50 5
  • 40. <ul class="tab"> <li></li> <li></li> <li></li> <li></li> </ul>
  • 41. 먼저 부모인 .tap상단과 좌측에 패딩을 주고 각 박스에 height값을 지정합니다. 20 50 50 20 50 50
  • 42. .tab {padding:20px 0 0 20px;} .tab > li {height:50px;} <ul class="tab"> <li></li> <li></li> <li></li> <li></li> </ul>
  • 43. 배경색을 지정해 줍니다. 20 50 50 20 50 50
  • 44. .tab {padding:20px 0 0 20px;} .tab > li {height:50px; background-color: green;} <ul class="tab"> <li></li> <li></li> <li></li> <li></li> </ul>
  • 45. width를 지정합니다. 20 20 80x50 80x50 20 80x50 80x50 지금까지는 일반적인 상태 (normal flow)입니다.
  • 46. .tab {padding:20px 0 0 20px;} .tab > li {width:80px; height:50px; background-color: green;} <ul class="tab"> <li></li> <li></li> <li></li> <li></li> </ul>
  • 47. float:left로 가로로 배치합니다. 20 20 80x50 80x50 80x50 80x50 이제 떠있는 상태가 되었습니다.
  • 48. .tab {padding:20px 0 0 20px;} .tab > li {float:left; width:80px; height:50px; background-color: green;} <ul class="tab"> <li></li> <li></li> <li></li> <li></li> </ul>
  • 49. margin-left로 간격을 벌립니다. 20 20 80x50
  • 50. .tab {padding:20px 0 0 20px;} .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>
  • 51. :first-child 로 첫번째 마진을 없앱니다. 20 20 완성!
  • 52. .tab {padding:20px 0 0 20px;} .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>
  • 53. 떠있는 상태(float)에 대해서 조금더 알아봅시다.
  • 54. 사이즈가 지정되지 않은 일반적인 흐름 상태에서 떠있는 상태로 만들때 박스는 어떤 변화가 생기는지 알아봅시다. 이것은 글입니다. 뷰포트에 꽉차죠? p {border:2px solid black;} <p> 이것은 글입니다. </p>
  • 55. float을 적용하게 되면 블록박스는 들어있는 컨텐츠 만큼을 자신의 사이즈로 생각합니다. 이것은 글입니다. 들어있는 컨텐츠 만큼 쪼그라듭니다! p {float:left; border:2px solid black;} <p> 이것은 글입니다. </p>
  • 56. 이미지의 들어있을 경우에도 div {border:2px solid black;} <div><img src=”foo.jpg”/></div>
  • 57. 200x150 사이즈가 있는 박스라도 .mother {border:2px solid black;} .mother > div {width:200px; height:150px; border:4px solid red;} <div class=”mother”><div></div></div>
  • 58. 200x150 감싸고 있는 박스에 float을 주면 쪼그라듭니다.
  • 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>
  • 79. 좀 다르긴 하지만 일반적인 워드 프로그램에서도 같은 개념을 찾아 볼 수 있습니다.
  • 80. 또 다른 특성을 하나 알아보겠습니다. 띄우는 상태(float)는 block box를 들어있는 내용만큼 쪼그라들게 만들뿐아니라 float을 inline box에 적용할 경우 block box로 만들어 버립니다.
  • 81. <a>를 이용해서 탭버튼을 만든다고 할때 병원 학교 군대 직장 가정 inline box이기 때문에 html코드에서 4px <a>inline 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로 만들어 버립니다.
  • 86. float을 사용할 때 골치 아픈 일이 생기게 됩니다.
  • 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된 자식 밑으로 부모박스의 아래부분이 기어들어 가는 것을 막을 수 있을까요?
  • 102. 이렇게 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; 기어 들어가지 않습니다.
  • 109. 하지만 클리어링만을 위해 불필요한 빈태그를 계속 넣어야 할까요?
  • 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
  • 117. 바로 overflow, float, display:inline-block 속성등이 적용될 때 입니다. new block formatted context overflow:hidden float:left, right display: inline-block
  • 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}
  • 120. 이것이 두번째 클리어링 하는 방법입니다.
  • 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로 되어있습니다.
  • 126. 이렇게 클리어링을 하는 방법은 크게 2가지 모두5가지라고 할 수 있습니다.
  • 127. 3. 절대적인 위치(absolute)를 이용한 배치
  • 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="alrambox">error!</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
  • 136. 사실 position:absolute는 한단계씩 올라가면서 relative가 선언된 부모를 계속 찾게 됩니다. x96 float:left 226x196 error!
  • 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;}
  • 143. position:fixed는 무조건 뷰포트기준입니다. .box { position:fixed; bottom:0; left: 100px;
  • 144. 스크롤이 내려가도 뷰포트 기준으로 그대로 있습니다! .box { position:fixed; bottom:0; left: 100px;
  • 145. 그럼 지금까지 배운 3가지 배치방법들의 쌓이는 순서는 어떻게 될까요?
  • 146. 먼저 크게 세가지 순서의 층이 있습니다. position float normal flow
  • 147. position층에서 다시 우선순위가 있습니다 z-index 값크기 마크업순서 position float normal flow
  • 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="float">float</div> <div class="a">absolute 1 / z-index:100 <div class="aa">absolute 1_1 / z-index:500</div> <div class="ab">absolute 1_2 / z-index:500</div> </div> <div class="b">relative 2</div> <div class="c">relative 3</div> <div class="d">absolute 4 / z-index:150</div> </div>
  • 150. eulsoo.com
  • 151.    eulsoo.jung@gmail.com 이 저작물은 크리에이티브 커먼즈 저작자표시-변경금지 4.0 국제 라이선스에 따라 이용할 수 있습니다.