1 / 36

4. Positioning & Floating

4. Positioning & Floating. LINK@KOREATECH. Positioning. position: static & position:relative GET WITH THE “ Normal Flow ” The normal flow of the document is how your elements stack one on top of each other from the top down, in the order in which they appear in your markup .

aretha-lowery
Download Presentation

4. Positioning & Floating

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 4. Positioning & Floating LINK@KOREATECH

  2. Positioning • position: static & position:relative • GET WITH THE “Normal Flow” • The normal flow of the document is how your elements stack one on top of each other from the top down, in the order in which they appear in your markup. • Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. • Block boxes participate in a block formatting context. • Inline boxes participate in an inline formatting context. LINK@KOREATECH

  3. Positioning • 박스의 Positioning - Static <body> <div id="box_1" class="box"></div> <div id="box_2" class="box"></div> <div id="box_3" class="box"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example A</title> <style> #box_1 { position: static; width: 200px; height: 200px; background: #ee3e64; } #box_2 { position: static; width: 200px; height: 200px; background: #44accf; } #box_3 { position: static; width: 200px; height: 200px; background: #b7d84b; } </style> </head> position속성의디폴트 값 static : single-column layouts where each element must sit on top of the next one (normal flow) LINK@KOREATECH

  4. Positioning • 박스의 Positioning - Relative position: relative : The element is positioned relative to its normal position : position을 relative 로 설정해야 이후 left, right, top, bottom 등의 속성을 사용할 수 있음 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example A</title> <style> #box_1 { position: relative; width: 200px; height: 200px; background: #ee3e64; } #box_2 { position: relative; width: 200px; height: 200px; background: #44accf; } #box_3 { position: relative; width: 200px; height: 200px; background: #b7d84b; } </style> </head> LINK@KOREATECH

  5. Positioning • 박스의 Positioning - Relative <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example A</title> <style> #box_1 { position: relative; width: 200px; height: 200px; background: #ee3e64; } #box_2 { position: relative; left: 200px width: 200px; height: 200px; background: #44accf; } #box_3 { position: relative; width: 200px; height: 200px; background: #b7d84b; } </style> </head> position: relative left: 200px : Normal Flow을 기준으로 원래 있어야 할 자리에서 왼쪽에서 200px 만큼 간격을 띄움. : 즉, left 는 offset 속성임. : 원래자신이 있어야 하는 공간에 다른 요소가 침범 못함 LINK@KOREATECH

  6. Positioning • 박스의 Positioning - Relative <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example A</title> <style> #box_1 { position: relative; width: 200px; height: 200px; background: #ee3e64; } #box_2 { position: relative; left: 200px width: 200px; height: 200px; background: #44accf; } #box_3 { position: relative; width: 200px; height: 200px; background: #b7d84b; } </style> </head> <body> <div id="box_1" class="box"> <div id="box_2" class="box"></div> </div> <div id="box_3" class="box"></div> </body> </html> LINK@KOREATECH

  7. Positioning • position: absolute • DOES NOT GET WITH THE “Normal Flow” • This means you can put it anywhere, and it won’t affect or be affected by any other element in the flow. • 박스의 Positioning – Absolute (1/2) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Example A</title> <style> #box_1 { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: #ee3e64; } LINK@KOREATECH

  8. [top, bottom, left, right 의 기준점] : position 설정값을 지니고 있는 가장 가까운 부모 박스 Positioning • 박스의 Positioning – Absolute (2/2) #box_2 { position: absolute; top: 0; right: 0; width: 200px; height: 200px; background: #44accf; } #box_3 { position: absolute; bottom: 0; left: 0; width: 200px; height: 200px; background: #b7d84b; } #box_4 { position: absolute; bottom: 0; right: 0; width: 200px; height: 200px; background: #ebde52; } </style> </head> <body> <div id="box_1"></div> <div id="box_2"></div> <div id="box_3"></div> <div id="box_4"></div> </body> </html> LINK@KOREATECH

  9. Positioning • 박스의 Positioning – Absolute <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example F</title> <style> .box { position: absolute; width: 200px; height: 200px; } #box_1 { background: #ee3e64; top: 0; left: 0; } #box_2 { background: #44accf; top: 0; right: 0; } #box_3 { background: #b7d84b; bottom: 0; left: 0; } #box_4 { background: #ebde52; bottom: 0; right: 0; } .orange { background: #f95b34; position: absolute; top: 39%; left: 41%; width: 40px; height: 40px; } </style> </head> <body> <div id="box_1" class="box"> <div class="orange"></div> </div> <div id="box_2" class="box"> <div class="orange"></div> </div> <div id="box_3" class="box"> <div class="orange"></div> </div> <div id="box_4" class="box"> <div class="orange"></div> </div> </body> </html> Just like relative elements, absolute elements create a new coordinate system for child elements. LINK@KOREATECH

  10. Positioning • 박스의 Positioning – Absolute <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example G</title> <style> #box_1 { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; background: #44accf; } #box_2 { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; background: #ff9c34; } </style> </head> <body> <div id="box_1"></div> <div id="box_2"></div> </body> </html> By using two or all four offset properties, you can stretch an element without defining any width or height—it is bound only by its parent element or the document itself <body> <div id="box_1"> <div id="box_2"></div> </div> </body> </html> LINK@KOREATECH

  11. Positioning • 박스의 Positioning – Absolute <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example H</title> <style> #box_1 { position: absolute; top: 0; right: 20%; bottom: 0; left: 0; background: #ee3e64; } #box_2 { position: absolute; top: 0; right: 0; bottom: 0; left: 80%; background: #b7d84b; } </style> </head> <body> <div id="box_1"></div> <div id="box_2"></div> </body> </html> We can create a two-column layout that fills the entire height of the document. But, this is not the best approach to a two-column layout. It still shows the power the absolute value holds LINK@KOREATECH

  12. Positioning • 박스의 Positioning – Absolute <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example H2</title> <style> #box_1 { position: relative; width: 200px; height: 200px; background: #ee3e64; } #box_2 { position: absolute; top: 0; left: 100px; width: 200px; height: 200px; background: #44accf; } </style> </head> <body> <div id="box_1"></div> <div id="box_2"></div> <div id="box_3"></div> <div id="box_4"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example H2</title> <style> #box_1 { position: relative; width: 200px; height: 200px; background: #ee3e64; } #box_2 { position: absolute; left: 100px; width: 200px; height: 200px; background: #44accf; } </style> </head> <body> <div id="box_1"></div> <div id="box_2"></div> <div id="box_3"></div> <div id="box_4"></div> </body> </html> LINK@KOREATECH

  13. Positioning • 박스의 Positioning – Fixed • See http://www.alistapart.com/d/css-positioning-101/example_i.html • Open the HTML source and find the fixed box • 스크롤바를 움직여도 그 위치 always there!!! LINK@KOREATECH

  14. Floating • A floating box is • a box that is shifted to the left or right on the current line. • Other content in the floating box may flow along its floating box • Other content flows down the right side of a left-floated box and down the left side of a right-floated box. • This flow can be prohibited from doing so by the “clear” property. • float: left • it will move the box to the left-most boundary of its parent element • float: right • it will move the box to the right-most boundary of its parent element • float: inherit • it tells an element to inherit the float value of its parent element • float: none • it is the default value and tells an element not to float at all. LINK@KOREATECH

  15. Floating • First Example • http://www.alistapart.com/d/css-floats-101/example_a.html • Floating 의개념 • 일반적으로는 Normal flow 를 따르면서 각각의 블록 요소들이 위에서 아래로 차곡차곡 쌓입니다. • 플로트된 요소는 일단 이런 일반적인 흐름을 따르다가, 흐름에서 빠져나와 부모 요소의 오른쪽 또는 왼쪽 끝에 달라붙습니다. • 즉, 부모 요소의 폭이 플로트된 요소들이 모두 들어갈 만큼 충분하기만 하다면 아래로 쌓이는 게 아니라 옆으로 쌓입니다. img { float: right; margin: 10px; } LINK@KOREATECH

  16. Floating • Floating <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Floats 101</title> <style> .block { float: none; width: 200px; height: 200px; } .pink { background: #ee3e64; } .blue { background: #44accf; } .green { background: #b7d84b; } </style> </head> <body> <div class="block pink"></div> <div class="block blue"></div> <div class="block green"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Floats 101</title> <style> .block { float: left; width: 200px; height: 200px; } .pink { background: #ee3e64; } .blue { background: #44accf; } .green { background: #b7d84b; } </style> </head> <body> <div class="block pink"></div> <div class="block blue"></div> <div class="block green"></div> </body> </html> LINK@KOREATECH

  17. Floating • Floating – How about this? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Floats 101</title> <style> .block { float: left; width: 200px; height: 200px; } .pink { background: #ee3e64; } .blue { background: #44accf; } .green { background: #b7d84b; } </style> </head> <body> <div class="block pink"></div> <div class="block blue"></div> <div class="block green"></div> <div class="block pink"></div> <div class="block blue"></div> <div class="block green"></div> <div class="block pink"></div> <div class="block blue"></div> <div class="block green"></div> <div class="block pink"></div> <div class="block blue"></div> <div class="block green"></div> <div class="block pink"></div> <div class="block blue"></div> <div class="block green"></div> </body> </html> 블럭들이 전부 옆으로 늘어설 공간이 충분치 않으면블록이 그 다음 줄에 배치가 됩니다. LINK@KOREATECH

  18. Floating • Floating 규칙 • float 속성은 position: absolute 로 지정된 박스에는 적용되지 않는다. • 인라인 요소에 float 속성을 지정하면 자동으로 블록 요소가 된다. • 즉, display: block 속성을 지정하는 효과가 생긴다. • float 속성은 반드시 width 속성과 함께 사용해야 한다. • float은 반드시 왼쪽과 오른쪽으로만 사용가능하다. • 즉, 위쪽 또는 아래쪽으로의 floating은 지원되지 않는다. • The elements after the floating element will flow around it. • The elements before the floating element will not be affected. LINK@KOREATECH

  19. Floating • Floating Example • Other content flowsdown the right side of a left-floated box <html><head> <style type="text/css"> img { float:right; } </style></head> <body> <p> <imgsrc="logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html> LINK@KOREATECH

  20. Floating • Floating Example • If you place several floating elements after each other, they will float next to each other if there is room. <html><head> <style type="text/css"> .thumbnail { float:left; width:110px; height:90px; margin:5px; } </style> </head> <body> <img class="thumbnail" src="image.jpg" width="100" height="90"> <img class="thumbnail" src="image.jpg" width="110" height="80"> <img class="thumbnail" src="image.jpg" width="120" height="90"> <img class="thumbnail" src="image.jpg" width="130" height="90"> <img class="thumbnail" src="image.jpg" width="140" height="90"> <img class="thumbnail" src="image.jpg" width="150" height="80"> </body> </html> LINK@KOREATECH

  21. Clearing • Clearing Block 사용 용도 • float 속성이 지정된 요소 이후에 지정된 요소들은 그 float 요소들과는 함께 normal flow를 적용할 수 없다. • 이러한 상황을 해제하고 원래의 브라우저가 지닌 normal flow 로 돌아가기 위해 clear 속성을 사용한다. • clear: left • 이전에지정된 왼쪽 float 영향 해제 • clear:left가 적용되는 블럭 요소의 위쪽 끝이 float: left 속성을 쓴 어떤 요소보다 아래에 있게배치됨 • clear: right • 이전에 지정된 오른쪽 float 영향 해제 • clear:right가 적용되는 블럭 요소의 위쪽 끝이 float: right 속성을 쓴 어떤 요소보다 아래에 있게배치됨 • clear: both • 이전에지정된 양쪽 float 영향 해제 • 어느 쪽으로든 float된 요소의 아래에 있게 배치됨 LINK@KOREATECH

  22. 분홍색 블럭이 문서의 일반적인 흐름에서 벗어나 있더라도 그냥 그 자리에 있는 것으로 간주하고 그 밑으로 들어가라고 지시 Clearing • First Example <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Floats 101</title> <style> .block { width: 200px; height: 200px; } .float { float: left; } .clear { clear: left; } .pink { background: #ee3e64; } .blue { background: #44accf; } .green { background: #b7d84b; } .orange { background: #E2A741; } </style> </head> <body> <div class="block pink float"></div> <div class="block blue float"></div> <div class="block green clear"></div> <div class="block orange"></div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Floats 101</title> <style> .block { width: 200px; height: 200px; } .float { float: left; } .pink { background: #ee3e64; } .blue { background: #44accf; } .green { background: #b7d84b; } .orange { background: #E2A741; } </style> </head> <body> <div class="block pink float"></div> <div class="block blue float"></div> <div class="block green"></div> <div class="block orange"></div> </body> </html>

  23. Clearing • Clearing Example <html><head> <style type="text/css"> .thumbnail { float:left; width:110px; height:90px; margin:5px; } .text_line { clear:both; margin-bottom:2px; } </style> </head> <body> <img class="thumbnail" src="image.jpg" width="100" height="90"> <img class="thumbnail" src="image.jpg" width="110" height="80"> <img class="thumbnail" src="image.jpg" width="120" height="90"> <h3 class="text_line">AnotherImages</h3> <img class="thumbnail" src="image.jpg" width="130" height="90"> <img class="thumbnail" src="image.jpg" width="140" height="90"> <img class="thumbnail" src="image.jpg" width="150" height="80"> </body> </html> LINK@KOREATECH

  24. Clearing • Clearing Example • See view-source:http://www.alistapart.com/d/css-floats-101/example_f.html LINK@KOREATECH

  25. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Floats 101</title> <style> body { margin: 0; padding: 0; background: #ccc; } p { margin: 0; } #container { width: 280px; margin: 0 auto; padding: 10px; background: #aaa; border: 1px solid #999; } img{ float: right; } </style> </head> <body> <div id="container"> <imgsrc="image.gif" /> <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> </div> </body> </html> Floating & Clearing 골치아픈문제 (1/3)– Collapsing LINK@KOREATECH

  26. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Floats 101</title> <style> body { margin: 0; padding: 0; background: #ccc; } p { margin: 0; } #container { width: 280px; margin: 0 auto; padding: 10px; background: #aaa; border: 1px solid #999; } img { float: right; } </style> </head> <body> <div id="container"> <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <img src="image.gif" /> </div> </body> </html> Floating & Clearing 골치아픈문제 (2/3)– Collapsing LINK@KOREATECH

  27. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Floats 101</title> <style> body { margin: 0; padding: 0; background: #ccc; } p { margin: 0; } #container { width: 280px; margin: 0 auto; padding: 10px; background: #aaa; border: 1px solid #999; } img{ float: right; } </style> </head> <body> <div id="container"> <p>This is some text contained within a small-ish box. I'm using it as an example of how placing your floated elements in different orders in your HTML can affect your layouts. For example, take a look at this great photo placeholder that should be sitting on the right.</p> <imgsrc="image.gif" /> <div style="clear: right;"></div> </div> </body> </html> Floating & Clearing 골치아픈문제 (3/3)– Collapsing LINK@KOREATECH

  28. Z-index • z-index를 통한 박스 겹치기 • z-index 를 통해서 박스가 겹쳐지는순서를 지정할 수 있다. • z-index: auto • 뒤에 지정된 요소가 자동으로 위에 표시된다. • z-index: 정수 • 박스의 겹쳐지는 순서를 명시한다. • 값이 큰 박스가 값이 작은 박스보다 항상 앞에 표시된다. • 같은 값의 박스는 뒤에 지정된 요소가위에 표시된다 div#content{ z-index: 10; position: absolute; width: 150px; height: 150px; background-color: silver; } div#side{ z-index: 20; position: absolute; top: 50px; left: 50px; width: 150px; height: 150px; background-color: fuchsia; } div#footer{ z-index: 30; position: absolute; top: 100px; left: 100px; width: 150px; height: 150px; background-color: aqua; } <body> <div id="content"></div> <div id="side"></div> <div id="footer"></div> </body> </html> LINK@KOREATECH

  29. CSS3 웹 폰트@font-face • @font-face (CSS3) • 글꼴이 설치되지 않은 시스템에서도 해당 글꼴을 이용하여 보이도록 하는 기술 • 모빌리스 웹 폰트 • 웹 폰트 웹 서비스 - http://api.mobilis.co.kr/webfonts/ • NanumPenWeb 글꼴을 브라우저 로컬 시스템에 다운로드 시키는 방법 .desc{ font: 39px/0.9 "NanumPenWeb", "나눔 손글씨 펜", "Nanum Pen Script"; } <head> <meta charset="utf-8" /> <title>…</title> … … <link rel="stylesheet" href="http://api.mobilis.co.kr/webfonts/css/?fontface=NanumPenWeb" /> </head> LINK@KOREATECH

  30. Transition과 Easying LINK@KOREATECH

  31. Transition과 Easying LINK@KOREATECH

  32. Transition과 Easying LINK@KOREATECH

  33. CSS (and HTML) Reading Recommendation • MUST visit!!! • http://www.csszengarden.com/tr/korean/ • CSS Study Site • http://wwwcs.dongguk.ac.kr/~dark4447/main_file/css/css.html • http://trio.co.kr/webrefer/css/cssintro.html • http://www.cadvance.org/?leftmenu=doc/include/total_menu.asp&mainpage=doc/css/intro/css_syntax.asp • http://www.w3schools.com/css/ • … LINK@KOREATECH

  34. CSS (and HTML) Reading Recommendation • CSS and Web Design Book • 제프리 젤드만의 웹표준 가이드웹 디자이너와 개발자, 그리고 사용자를 위한 올바른 선택(2nd), 위키북스 오픈소스 & 웹 시리즈제프리 젤드만 (이준 역) | 위키북스, 2008.01.09 • 웹2.0 기획과 디자인(기획자와 디자이너가 꼭 알아야 할 웹 2.0의 77가지 키워드와 디자인 패턴)노주환 | 플루토북, 2007.10.16 • 웹디자인 2.0 고급 CSS : 감각적인 웹디자인 예술 미학앤디 클락 (정유한 역) | 에이콘 출판, 2008.01.28 LINK@KOREATECH

  35. Complete CSS Properties • http://www.quackit.com/css/properties/ Web Service Computing

  36. [Practice] make other web’s CSS mine • How to get CSS file • 1. visit a good web site designed by CSS • 2. view source of HTML • 3. find the style definition • 4. if any, download the CSS file • http://www.time.com • http://www.latimes.com/ <link rel="stylesheet" type="text/css" href="http://img.timeinc.net/time/rd/trunk/www/web/feds/c/main.css" media="all" /> <link rel="stylesheet" type="text/css" href="/stylesheets/editorial.css" /> <link rel="stylesheet" type="text/css" href="/stylesheets/left_nav.css" /> <link rel="stylesheet" type="text/css" href="/stylesheets/layout.css" /> LINK@KOREATECH

More Related