๋ชฉ์ฐจ
float
๋ถ๋ชจ ์์ ๊ธฐ์ค, ์ผ์ชฝ or ์ค๋ฅธ์ชฝ ๋ฐฐ์น ์ง์
margin : auto
: ๊ฐ์ด๋ฐ๋ก! (โป์ฃผ์ : block์์๋ง ์ ์ฉ๊ฐ๋ฅ!)
์์
<div class="parent">
<div class="child"></div>
</div>
.parent {
border: 5px solid red;
width: 600px;
/*์์์์์ height๊ฐ ์ง์ ํด์ฃผ๋ฉด ์๋์ผ๋ก ๋์ด๋๊ธฐ ๋๋ฌธ์ ๋์ด ๋ฐ๋ก ์ง์ X*/
}
.child {
background-color: gold;
width: 200px;
height: 200px;
}
float ์์ฑ์ ๋ฐ๋ก ์ฃผ์ง ์์ ์ํ์ด๋ค.
์ผ์ชฝ์ผ๋ก ๋ฐฐ์น ๋์ด์๋ ๊ฒ์ ๋ณด๊ณ
"๊ธฐ๋ณธ๊ฐ์ด float: left ์ธ๊ฐ?" ๋ผ๊ณ ์๊ฐํ ์ ์์ง๋ง
์๋๋ค!
float ์์ฑ์ ์ค ๊ฒฝ์ฐ
.parent {
border: 5px solid red;
width: 600px;
/*์์์์์ height๊ฐ ์ง์ ํด์ฃผ๋ฉด ์๋์ผ๋ก ๋์ด๋๊ธฐ ๋๋ฌธ์ ๋์ด ๋ฐ๋ก ์ง์ X*/
}
.child {
background-color: gold;
width: 200px;
height: 200px;
}
์ ์ฒ๋ผ float: left๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ์์์์๊ฐ ์๋ค๊ณ ํ๋จํด์ ๋์ด๊ฐ์ ์๋๋ค!
์ฆ, ์์์์๊ฐ ๋ถ๋ชจ ์์ฑ์ ์์ ๋ฐฐ์น๊ฐ ๋๋ค.
float๋ ๋ง๊ทธ๋๋ก ๋ฅ๋ฅ ๋ ์๋ ๊ฒ์ผ๋ก ์๊ฐํ๋ฉด ๋๋ค.
๋ถ๋ชจ์์์ ๋์ด๊ฐ์ ์ค ๋ ์ง์ height๊ฐ์ ์ฃผ๋ ๋ฐฉ๋ฒ๋ ์์ง๋ง,
์์์์์ ๋ง๊ฒ ๋ณํ๋ฅผ ์ฃผ๋ ค๋ฉด ์ผ์ผํ ๋ณ๊ฒฝ์ ํด์ผํ๋ค.
๊ทธ๋์ overflow: hidden์ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด ์๋ค.
.parent {
border: 5px solid red;
width: 600px;
overflow: hidden;
}
.child {
background-color: gold;
width: 200px;
height: 200px;
float: left;
}
float์์ฑ์ ์ฃผ์ง ์์๋ ๊ฒ๊ณผ ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์๋ค!
์์ ์์์ height๊ฐ์ ๋ณํ๋ฅผ ์ฃผ์ด๋ ์๋์ผ๋ก ๋ง์ถฐ์ง๋ค.
(height: auto๊ฐ ์ ์ฉ์ด ๋๋ ๊ฒ!)
float ์์ฑ ์ ์ํ ์ !
float์์ฑ์ ์ฌ์ฉํ ๋ left์ right๋ฅผ ์ฌ์ฉํ ๋
ํ ๊ฐ์ง ์๊ณ ์์ผ๋ฉด ์ข์ ํ์ด ์๋ค!
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
div {
width: 100px;
height: 100px;
border: 1px solid #000;
border-radius: 5px;
box-sizing : border-box;
}
.container {
width: 500px;
overflow: hidden;
}
.box1{background: #000;float: left;}
.box2{background: gold;float: left;}
.box3{background: crimson;float: right;}
.box4{background: dodgerblue;float: right;}
์์ ๊ฐ์ ๊ฒฐ๊ณผ๊ฐ ๋์ค๋๋ฐ
box3 ์ box4๊ฐ float : right๋ก ์ค๋ฅธ์ชฝ ์ ๋ ฌ์ด ๋์ด์๋ค.
์ด๋ ๋จผ์ right๋ฅผ ์ ์ฉํ box3๊ฐ ๋จผ์ ๋ฐฐ์น๊ฐ ๋ ๊ฒ์ ์ ์ ์๋ค!
๊ฐ์ด๋ฐ ์ ๋ ฌ (margin: auto)
ํ ๋ฒ ์ธ๊ธ์ ํ์ง๋ง margin: auto๋ block์์์๋ง ์ ์ฉ์ด ๊ฐ๋ฅํ๋ค.
div๋ ๋ธ๋ก์์ ์ค ํ๋์ด๊ธฐ ๋๋ฌธ์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ๋ค์๊ณผ ๊ฐ์ ๋ฐฉ๋ฒ์ผ๋ก ๊ฐ๋ฅํ๋ค!
.parent {
border: 5px solid red;
width: 600px;
overflow: hidden;
}
.child {
background-color: gold;
width: 200px;
height: 100px;
margin: auto;
}
div๋ฅผ inline-block์์๋ก ๋ฐ๊พธ์ด๋ณด์
.child {
background-color: gold;
width: 200px;
height: 100px;
margin: auto;
display: inline-block;
}
margin: auto๊ฐ ์์ด๋ ๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ๋์ง ์๋๋ค.
๊ทธ๋ ๋ค๋ฉด inline์์์ inline-block์์๋ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ด ๋ถ๊ฐ๋ฅํ ๊ฑธ๊น??
๊ฐ๋ฅํ๋ค!!
๋ถ๋ชจ์์์ text-align: center๋ฅผ ๋ฃ์ด์ฃผ๋ฉด ๋๋ค.
.parent {
border: 5px solid red;
width: 600px;
overflow: hidden;
text-align: center;
}
.child {
background-color: gold;
width: 200px;
height: 100px;
display:inline-block;
}
๊ฐ์ด๋ฐ๋ก ์ ๋ ฌ์ด ์ ๋ ๋ชจ์ต์ด๋ค.
์ด๋, ๋ค์ ์ฃผ์ํ ์ ์ ์ด ๋ฐฉ๋ฒ์ block์์์๋ ์ ์ฉ๋์ง ์๋๋ค.
์ ๋ฆฌํด๋ณด๋ฉด,
margin: auto : block ์์ / ์๊ธฐ ์์ ์๊ฒ ๋ถ์ฌ
text-align: center : inline, inline-block ์์ / ๋ถ๋ชจ ์์์ ๋ถ์ฌ
clear
: float์์ฑ์ ๋ค์ ์์๋ก '์๋ ์์'์ด ๋๋ค. ์ด๊ฒ์ ํ์ด์ค ๋ ์ฌ์ฉํ๋ค.
์ฝ๊ฒ ๋งํ๋ฉด float๋ฅผ ์ค ๊ฒ์ ๋ค์ ์์๋ float์ด ์๋ ์ ์ฉ์ด ๋๋๋ฐ
์ด๋ฅผ ํด์ ์ํฌ ๋ ์ฌ์ฉํ๋ค.
clear : both, left, right
์์
<div class="parent">
<div class="top">float: none</div>
<div class="left">float: left</div>
<div class="right">float: right</div>
<div class="clear">clear: both</div>
</div>
.parent {
border: 1px solid #000;
width: 600px;
}
.top {
background-color: blueviolet;
height: 50px;
}
.left {
background-color: rgb(234, 167, 255);
height: 70px;
width: 200px;
float: left;
}
.right {
background-color: rgb(217, 103, 255);
height: 70px;
width: 400px;
float: right;
}
.clear {
background-color: blueviolet;
/* clear: both; */
height: 50px;
}
์ ์ฝ๋์ ์คํ ๊ฒฐ๊ณผ์ด๋ค.
float ํน์ clear: both์ ๋ถ์ฌํ์ง ์์๋๋ฐ
๊ทธ ๊ฒฐ๊ณผ๋ก ์์ฒ๋ผ ํ๋ฉด์์ ๋์ค์ง ์๊ณ ์จ์ด๋ฒ๋ฆฐ๋ค.
์ด๋ ์ ์์๊ฐ float ์์ฑ์ด ์๊ธฐ ๋๋ฌธ์
float:none ์ผ๋ก ์ ์ฉ์ด ๋ ๊ฒ์ด๋ค!
๊ทธ๋ ๋ค๋ฉด clear:both๋ก ํด์ ๋ฅผ ์์ผ๋ณด์
.clear {
background-color: blueviolet;
clear: both;
height: 50px;
}
ํด์ ๋ฅผ ํด์ฃผ์๊ธฐ ๋๋ฌธ์ ์ ์์ ์ผ๋ก ํ๋ฉด์ด ๋์ค๋ ๊ฒ์ ์ ์์๋ค!
์ฌ๋ฌ ์์ ๊ฐ๋ก ๋ฐฐ์น๋ฅผ ์ํ 2๊ฐ์ง ๋ฐฉ๋ฒ
block์์์ธ section๊ณผ article ํ๊ทธ๋ฅผ ์ด์ฉํด ์์๋ณด์.
์ด ์์๋ค์ ๋ณธ๋ ๊ฐ๋ก๋ฐฐ์น๋ฅผ ํ ์ ์๋ ํน์ฑ์ ๊ฐ์ง๊ณ ์๋ค!
(์์ธํ ๋ด์ฉ: https://bluishhot-star.tistory.com/67 )
<section class="parent">
<article class="child"></article>
<article class="child"></article>
<article class="child"></article>
</section>
.parent {
border: 1px solid #000;
width: 300px;
}
.child {
background-color: gold;
width: 100px;
height: 50px;
border: 1px solid red;
}
์์ ๊ทธ๋ฆผ์ ๊ฐ๋ก ๋ฐฐ์นํด๋ณด์!
1. float์ overflow
<section class="parent">
<article class="child"></article>
<article class="child"></article>
<article class="child"></article>
</section>
.parent {
border: 1px solid #000;
width: 300px;
overflow: hidden;
}
.child {
background-color: gold;
width: 100px;
height: 50px;
border: 1px solid red;
float: left;
box-sizing: border-box; /*์ฌ์ด์ฆ ์ง์ ํ๋๋ก ๋ง์ถฐ์ฃผ๊ธฐ*/
}
float: left๋ฅผ ์ด์ฉํด ์์๋ค์ ๊ฐ๋ก๋ก ๋ฐฐ์นํ๊ณ
overflow: hidden์ ํตํด์ ๋ถ๋ชจ์์์ ์์ด๋ฒ๋ฆฐ height๋ฅผ ์ฐพ์์ฃผ์๋ค.
2. inline-block์ผ๋ก ๋ณํ
.parent {
border: 1px solid #000;
width: 400px;
text-align: center;
}
.child {
background-color: gold;
border: 1px solid red;
width: 100px;
height: 50px;
display: inline-block;
}
inline-block์์๋ก ๋ณํํ ๋ค
๋ถ๋ชจ์์์ text-align: center๋ฅผ ์ ์ฉํด์ ๊ฐ์ด๋ฐ ์ ๋ ฌ์ ํด์ฃผ์๋ค.
๋๊ฐ์ง๋ฅผ ๋ชจ๋ ํด๋ณด์๋๋ฐ ์ด ๋์ ์ฐจ์ด์ ์ ๋ฌด์์ผ๊น?
1๋ฒ ๋ฐฉ๋ฒ์ ๋จ 1px์ ์ค์ฐจ์์ด ์ ํํ ๋ฐฐ์นํ ๋ ์ฌ์ฉํ๋ค.
border-sizing: border-box๋ฅผ ์ฌ์ฉํ ๊ฒ๋ ๊ทธ ์ด์ ์ด๋ค.
(๊ฐ๋ก๋ฐฐ์นํ ๋ ๋ณดํต ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ)
2๋ฒ ๋ฐฉ๋ฒ์ 1px 2px์ด ๋ค์ ์ค์ํ์ง ์์ ๊ฒฝ์ฐ์ ๊ฐํธํ๊ฒ ์ฌ์ฉํ๋ค.
(๊ฐ๋ก๋ฐฐ์นํ๊ณ ์ ๋นํ ๊ฐ์ด๋ฐ์ ์์ผ๋ฉด ๋ผ~)
'๐ | WEB DEV > HTML CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
CSS ํฌ์ง์ (1)_๋ถ๋ชจ์์ ์์์์ (0) | 2022.01.05 |
---|---|
HTML ์๋ฉํฑ ํ๊ทธ (๋ ์ด์์ ์ค๊ณ) (0) | 2022.01.05 |
HTML ์ธ๋ผ์ธ ์์, ๋ธ๋ก์์, ์ธ๋ผ์ธ๋ธ๋ก (0) | 2022.01.05 |
CSS ๊ธฐ๋ณธ (5)_๋ฐ์ค(padding, margin, box-sizing, box-shadow, test-shadow) (0) | 2022.01.02 |
CSS ๊ธฐ๋ณธ (4)_๋ฐ์ค(border, border-radius) (0) | 2022.01.01 |
๋๊ธ