Search

배치 속성

배치 속성

μš”μ†Œλ₯Ό μ»¨ν…Œμ΄λ„ˆ λ‚΄μ—μ„œ μ–΄λ–»κ²Œ λ°°μΉ˜ν•  지λ₯Ό μ§€μ •ν•˜λŠ” 속성
β€’
배치 속성 μ’…λ₯˜
β€’
κΈ°λ³Έ μ˜ˆμ‹œ μ½”λ“œ

배치 속성 μ’…λ₯˜

속성
μ„€λͺ…
κΈ°λ³Έ μ˜ˆμ‹œ μ½”λ“œ
float
μš”μ†Œλ₯Ό 쒌츑 λ˜λŠ” 우츑으둜 μ •λ ¬ν•©λ‹ˆλ‹€.
float: left;
clear
ν”Œλ‘œνŠΈλœ μš”μ†Œμ˜ 영ν–₯을 받지 μ•Šλ„λ‘ μ„€μ •ν•©λ‹ˆλ‹€.
clear: both;

κΈ°λ³Έ μ˜ˆμ‹œ μ½”λ“œ

β€’
float
β€’
clear

float

β€’
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>배치 속성 - float</title> <link rel="stylesheet" href="css/01_float.css"> </head> <body> <center><h1>float</h1></center> <div class="container"> <!-- (.item>(h1{float}+p>(img)))*3 --> <div class="item"> <h1>float</h1> <p> <img src="img/float.jpg" alt="이미지" width="120"> ꡭ방상 λ˜λŠ” κ΅­λ―Όκ²½μ œμƒ κΈ΄μ ˆν•œ ν•„μš”λ‘œ μΈν•˜μ—¬ 법λ₯ μ΄ μ •ν•˜λŠ” 경우λ₯Ό μ œμ™Έν•˜κ³ λŠ”, μ‚¬μ˜κΈ°μ—…μ„ ꡭ유 λ˜λŠ” 곡유둜 μ΄μ „ν•˜κ±°λ‚˜ κ·Έ κ²½μ˜μ„ ν†΅μ œ λ˜λŠ” 관리할 수 μ—†λ‹€. 제1ν•­μ˜ νƒ„ν•΅μ†ŒμΆ”λŠ” κ΅­νšŒμž¬μ μ˜μ› 3λΆ„μ˜ 1 μ΄μƒμ˜ λ°œμ˜κ°€ μžˆμ–΄μ•Ό ν•˜λ©°, κ·Έ μ˜κ²°μ€ κ΅­νšŒμž¬μ μ˜μ› 과반수의 찬성이 μžˆμ–΄μ•Ό ν•œλ‹€. λ‹€λ§Œ, λŒ€ν†΅λ Ήμ— λŒ€ν•œ νƒ„ν•΅μ†ŒμΆ”λŠ” κ΅­νšŒμž¬μ μ˜μ› 과반수의 λ°œμ˜μ™€ κ΅­νšŒμž¬μ μ˜μ› 3λΆ„μ˜ 2 μ΄μƒμ˜ 찬성이 μžˆμ–΄μ•Ό ν•œλ‹€. κ΅­λ¬΄μœ„μ›μ€ ꡭ정에 κ΄€ν•˜μ—¬ λŒ€ν†΅λ Ήμ„ λ³΄μ’Œν•˜λ©°, ꡭ무회의의 κ΅¬μ„±μ›μœΌλ‘œμ„œ ꡭ정을 μ‹¬μ˜ν•œλ‹€. λŒ€ν†΅λ Ήμ€ 법λ₯ μ—μ„œ ꡬ체적으둜 λ²”μœ„λ₯Ό μ •ν•˜μ—¬ μœ„μž„λ°›μ€ 사항과 법λ₯ μ„ μ§‘ν–‰ν•˜κΈ° μœ„ν•˜μ—¬ ν•„μš”ν•œ 사항에 κ΄€ν•˜μ—¬ λŒ€ν†΅λ Ήλ Ήμ„ λ°œν•  수 μžˆλ‹€. </p> </div> <div class="item"> <h1>float : left;</h1> <p> <img src="img/float.jpg" alt="이미지" class="left" width="120"> ꡭ방상 λ˜λŠ” κ΅­λ―Όκ²½μ œμƒ κΈ΄μ ˆν•œ ν•„μš”λ‘œ μΈν•˜μ—¬ 법λ₯ μ΄ μ •ν•˜λŠ” 경우λ₯Ό μ œμ™Έν•˜κ³ λŠ”, μ‚¬μ˜κΈ°μ—…μ„ ꡭ유 λ˜λŠ” 곡유둜 μ΄μ „ν•˜κ±°λ‚˜ κ·Έ κ²½μ˜μ„ ν†΅μ œ λ˜λŠ” 관리할 수 μ—†λ‹€. 제1ν•­μ˜ νƒ„ν•΅μ†ŒμΆ”λŠ” κ΅­νšŒμž¬μ μ˜μ› 3λΆ„μ˜ 1 μ΄μƒμ˜ λ°œμ˜κ°€ μžˆμ–΄μ•Ό ν•˜λ©°, κ·Έ μ˜κ²°μ€ κ΅­νšŒμž¬μ μ˜μ› 과반수의 찬성이 μžˆμ–΄μ•Ό ν•œλ‹€. λ‹€λ§Œ, λŒ€ν†΅λ Ήμ— λŒ€ν•œ νƒ„ν•΅μ†ŒμΆ”λŠ” κ΅­νšŒμž¬μ μ˜μ› 과반수의 λ°œμ˜μ™€ κ΅­νšŒμž¬μ μ˜μ› 3λΆ„μ˜ 2 μ΄μƒμ˜ 찬성이 μžˆμ–΄μ•Ό ν•œλ‹€. κ΅­λ¬΄μœ„μ›μ€ ꡭ정에 κ΄€ν•˜μ—¬ λŒ€ν†΅λ Ήμ„ λ³΄μ’Œν•˜λ©°, ꡭ무회의의 κ΅¬μ„±μ›μœΌλ‘œμ„œ ꡭ정을 μ‹¬μ˜ν•œλ‹€. λŒ€ν†΅λ Ήμ€ 법λ₯ μ—μ„œ ꡬ체적으둜 λ²”μœ„λ₯Ό μ •ν•˜μ—¬ μœ„μž„λ°›μ€ 사항과 법λ₯ μ„ μ§‘ν–‰ν•˜κΈ° μœ„ν•˜μ—¬ ν•„μš”ν•œ 사항에 κ΄€ν•˜μ—¬ λŒ€ν†΅λ Ήλ Ήμ„ λ°œν•  수 μžˆλ‹€. </p> </div> <div class="item"> <h1>float : right;</h1> <p> <img src="img/float.jpg" alt="이미지" class="right" width="120"> ꡭ방상 λ˜λŠ” κ΅­λ―Όκ²½μ œμƒ κΈ΄μ ˆν•œ ν•„μš”λ‘œ μΈν•˜μ—¬ 법λ₯ μ΄ μ •ν•˜λŠ” 경우λ₯Ό μ œμ™Έν•˜κ³ λŠ”, μ‚¬μ˜κΈ°μ—…μ„ ꡭ유 λ˜λŠ” 곡유둜 μ΄μ „ν•˜κ±°λ‚˜ κ·Έ κ²½μ˜μ„ ν†΅μ œ λ˜λŠ” 관리할 수 μ—†λ‹€. 제1ν•­μ˜ νƒ„ν•΅μ†ŒμΆ”λŠ” κ΅­νšŒμž¬μ μ˜μ› 3λΆ„μ˜ 1 μ΄μƒμ˜ λ°œμ˜κ°€ μžˆμ–΄μ•Ό ν•˜λ©°, κ·Έ μ˜κ²°μ€ κ΅­νšŒμž¬μ μ˜μ› 과반수의 찬성이 μžˆμ–΄μ•Ό ν•œλ‹€. λ‹€λ§Œ, λŒ€ν†΅λ Ήμ— λŒ€ν•œ νƒ„ν•΅μ†ŒμΆ”λŠ” κ΅­νšŒμž¬μ μ˜μ› 과반수의 λ°œμ˜μ™€ κ΅­νšŒμž¬μ μ˜μ› 3λΆ„μ˜ 2 μ΄μƒμ˜ 찬성이 μžˆμ–΄μ•Ό ν•œλ‹€. κ΅­λ¬΄μœ„μ›μ€ ꡭ정에 κ΄€ν•˜μ—¬ λŒ€ν†΅λ Ήμ„ λ³΄μ’Œν•˜λ©°, ꡭ무회의의 κ΅¬μ„±μ›μœΌλ‘œμ„œ ꡭ정을 μ‹¬μ˜ν•œλ‹€. λŒ€ν†΅λ Ήμ€ 법λ₯ μ—μ„œ ꡬ체적으둜 λ²”μœ„λ₯Ό μ •ν•˜μ—¬ μœ„μž„λ°›μ€ 사항과 법λ₯ μ„ μ§‘ν–‰ν•˜κΈ° μœ„ν•˜μ—¬ ν•„μš”ν•œ 사항에 κ΄€ν•˜μ—¬ λŒ€ν†΅λ Ήλ Ήμ„ λ°œν•  수 μžˆλ‹€. </p> </div> </div> </body> </html>
HTML
볡사
β€’
CSS
.container { position: relative; width: 600px; border: 3px dashed orange; margin: auto; } .item { border: 2px solid #ddd; height: 330px; } img.left { float: left; /* fl */ } img.right { float: right; /* flr */}
CSS
볡사

clear

β€’
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>clear</title> <link rel="stylesheet" href="css/02_clear.css"> </head> <body> <center><h1>clear</h1></center> <div class="container"> <h1>clear : none; (default)</h1> <div class="inner"> <div class="item left"></div> <div class="item right"></div> <div class="item next"></div> </div> </div> <div class="container"> <h1>clear : left;</h1> <div class="inner"> <div class="item left"></div> <div class="item next clear-left"></div> </div> </div> <div class="container"> <h1>clear : right</h1> <div class="inner"> <div class="item right"></div> <div class="item next clear-right"></div> </div> <div/>
HTML
볡사
β€’
CSS
.container { position: relative; width: 1024px; min-height: 500px; border: 3px dashed orange;
CSS
볡사

clearfix - κ°€μƒμ„ νƒμžλ₯Ό ν™œμš©ν•œ float clear

β€’
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>clearfix</title> <link rel="stylesheet" href="css/03_clearfix.css"> </head> <body> <center><h1>clearfix</h1></center> <h3>float 둜 인해 λ‹€μŒ μš”μ†Œμ— 영ν–₯을 λ―ΈμΉ˜λŠ” 것을 ν•΄λ‹Ή λΆ€λͺ¨μš”μ†Œμ—μ„œ ν•΄μ†Œν•˜λŠ” 기법</h3> <div class="container"> <h1>clear - :after</h1> <!-- :after : λ¬Έμž₯의 λ§ˆμ§€λ§‰ μ˜μ—­μ— κ°€μƒμš”μ†Œλ₯Ό μ§€μ •ν•˜λŠ” κ°€μƒμ„ νƒμž --> <div class="inner"> <div class="item left"></div> <div class="item right"></div> <!-- :after - μ—¬κΈ°μ„œ clear 속성을 μ μš©ν•˜μ—¬, λ‹€μŒμš”μ†Œμ— λ―ΈμΉ˜λŠ” 영ν–₯을 방지 --> </div> <div class="item next"></div> </div> </body> </html>
HTML
볡사
β€’
CSS
.container { position: relative; width: 1024px; min-height: 500px; border: 5px dashed orange; margin: auto; } .item { width: 300px; height: 200px; } /* πŸ‘©β€πŸ« clearfix */ .inner:after { clear: both; display: block; content: ''; } h1 { text-align: center; } .left { float: left; background-color: pink; height: 600px; border: 5px solid red; } .right { float: right; background-color: lightblue; height: 400px; border: 5px solid blue; } .next { width: 100%; background-color: cornflowerblue; }
CSS
볡사
μŠ€νƒ€μΌ 속성
μŠ€νƒ€μΌ 속성