4. positioning & floating positioning position: static & position:relative –get with the...
DESCRIPTION
Positioning 박스의 Positioning - Static Example A #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; } position 속성의 디폴트 값 static : single-column layouts where each element must sit on top of the next one (normal flow)TRANSCRIPT
4. Positioning & Floating
LINK@KOREATECH 1
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 2
Positioning 박스의 Positioning - Static
<!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>
<body> <div id="box_1" class="box"></div> <div id="box_2" class="box"></div> <div id="box_3" class="box"></div></body></html>position 속성의 디폴트 값 static
: single-column layouts where each element must sit on top of the next one (normal flow)
LINK@KOREATECH 3
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; width: 200px; height: 200px; background: #44accf; } #box_3 { position: relative; width: 200px; height: 200px; background: #b7d84b; } </style></head>
position: relative: The element is positioned relative to its normal position : position 을 relative 로 설정해야 이후 left, right, top, bottom 등의 속성을 사용할 수 있음
LINK@KOREATECH 4
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: relativeleft: 200px: Normal Flow 을 기준으로 원래 있어야 할 자리에서 왼쪽에서 200px 만큼 간격을 띄움 .: 즉 , left 는 offset 속성임 . : 원래 자신이 있어야 하는 공간에 다른 요소가 침범 못함
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>
<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 6
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 7
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 8
[top, bottom, left, right 의 기준점 ]: position 설정값을 지니고 있는 가장 가까운 부모 박스
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> LINK@KOREATECH 9
Just like relative elements, absolute elements create a new coordinate system for child elements.
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>
LINK@KOREATECH 10
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>
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>
LINK@KOREATECH 11
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
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; 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 12
<!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>
Positioning 박스의 Positioning – Fixed
– See http://www.alistapart.com/d/css-positioning-101/example_i.html• Open the HTML source and find the fixed box
– 스크롤바를 움직여도 그 위치
LINK@KOREATECH 13
always there!!!
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 14
Floating First Example
– http://www.alistapart.com/d/css-floats-101/example_a.html
Floating 의 개념– 일반적으로는 Normal flow 를 따르면서 각각의 블록 요소들이 위에서
아래로 차곡차곡 쌓입니다 .– 플로트된 요소는 일단 이런 일반적인 흐름을 따르다가 , 흐름에서
빠져나와 부모 요소의 오른쪽 또는 왼쪽 끝에 달라붙습니다 .– 즉 , 부모 요소의 폭이 플로트된 요소들이 모두 들어갈 만큼 충분하기만
하다면 아래로 쌓이는 게 아니라 옆으로 쌓입니다 .
img { float: right; margin: 10px;}
LINK@KOREATECH 15
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 16
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>
LINK@KOREATECH 17
<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>
블럭들이 전부 옆으로 늘어설 공간이 충분치 않으면 블록이 그 다음 줄에 배치가 됩니다 .
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 18
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><img src="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 19
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 20
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 21
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; } .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>
<!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>
분홍색 블럭이 문서의 일반적인 흐름에서 벗어나 있더라도 그냥 그 자리에 있는 것으로 간주하고 그 밑으로 들어가라고 지시
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">Another Images</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 23
Clearing Clearing Example
– See view-source:http://www.alistapart.com/d/css-floats-101/example_f.html
LINK@KOREATECH 24
Floating & Clearing
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"> <img src="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 besitting on the right.</p></div></body></html>
골치아픈 문제 (1/3) – Collapsing
Floating & Clearing
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 besitting on the right.</p> <img src="image.gif" /></div></body></html>
골치아픈 문제 (2/3) – Collapsing
Floating & Clearing
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 besitting on the right.</p> <img src="image.gif" /> <div style="clear: right;"></div></div></body></html>
골치아픈 문제 (3/3) – Collapsing
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 28
CSS3 웹 폰트 @font-face @font-face (CSS3)
– 글꼴이 설치되지 않은 시스템에서도 해당 글꼴을 이용하여 보이도록 하는 기술
– 모빌리스 웹 폰트• 웹 폰트 웹 서비스 - http://api.mobilis.co.kr/webfonts/• NanumPenWeb 글꼴을 브라우저 로컬 시스템에 다운로드 시키는 방법
LINK@KOREATECH 29
.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>
Transition 과 Easying
LINK@KOREATECH 30
Transition 과 Easying
LINK@KOREATECH 31
Transition 과 Easying
LINK@KOREATECH 32
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.as
p&mainpage=doc/css/intro/css_syntax.asp– http://www.w3schools.com/css/– …
LINK@KOREATECH 33
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 34
Complete CSS Properties
Web Service Computing 35
http://www.quackit.com/css/properties/
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/
[Practice] make other web’s CSS mine
<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 36