๋ชฉ์ฐจ
flexbox
๋ถ๋ชจ์์ ๋ด์ ์์์์๋ค์ ๋ํ
๊ณต๊ฐ ๋ฐฐ๋ถ, ์ ๋ ฌ์ ํ ์ ์๋ ๋ชจ๋ธ์ด๋ค!
css์์ ๋ ์ด์์์ ๊ตฌ์ฑํ ๋ float์ ์ด์ฉํ์์ง๋ง
์ต๊ทผ์๋ flex๋ฅผ ์ ์ ๋ง์ด ์ฌ์ฉํ๋ ์ถ์ธ์ด๋ค.
์ฌ์ค ํธํ์ฑ๋ฌธ์ ๋ก ์ฌ์ฉ ์๊ฐ ์ ์๋๋ฐ ๋ง์ด ํด๊ฒฐ์ด ๋์๋ค๊ณ ํ๋ค.
์ํ์ ๋ ฌ
๋ค๋ฅธ ๋ฐฉ๋ฒ๋ค๊ณผ์ ๋น๊ต
๋จผ์ ๊ธฐ์กด์ ๋ค๋ค๋ ๊ฒ๋ค์ ์ดํด๋ณด์!
1. float
<div class="container clearfix">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
.container{
width: 400px;
border: 1px solid #000;
/* overflow: hidden; */ /*์ด ์์ฑ์ ์ด์ฉํด๋ ๋๋ค.*/
}
.item {
width: 100px;
height: 100px;
border: 1px solid #000;
background: gold;
border-radius: 5px;
float: left;
}
.clearfix::after{ /*๋ค์์ ์ค๋ ์์๊ฐ ์์ด๋ ์ฌ์ฉ๊ฐ๋ฅํ๋๋ก!*/
clear:both;
content: "";
display: block;
}
๊ธฐ์กด์ ๋ค๋ค๋ ๋ด์ฉ์ธ float๋ฅผ ์ด์ฉํ์ฌ
์ํ์ ๋ ฌ์ ํ ์ ์๋๋ฐ
์ด ๊ฒฝ์ฐ์๋ ๋ถ๋ชจ์์์ clearfix
์ฆ, clear ์์ฑ์ ์ด์ฉํด float์ ํด์ ์์ผ์ฃผ๋ฉด์
์์์์๋ฅผ ๊ฐ์ธ๋ ๊ฒ์ฒ๋ผ ๋ณด์ด๊ฒ ํ ์ ์๋ค.
(overflow: hidden๋ ๊ฐ์ ํจ๊ณผ๋ฅผ ๋ผ ์ ์๋ค!)
2. inline-block
inline-block ์์๋ ์ํ์ ๋ ฌ์ด ๊ฐ๋ฅํ๋ฏ๋ก
display๋ฅผ ์ด์ฉํด block -> inline-block ์ผ๋ก ๋ณํํ๋ฉด
.container{
width: 400px;
border: 1px solid #000;
}
.item {
width: 100px;
height: 100px;
border: 1px solid #000;
background: gold;
border-radius: 5px;
display: inline-block;
}
์์ ๊ฐ์ ๊ฒฐ๊ณผ๊ฐ ๋์จ๋ค.
์ํ์ ๋ ฌ์ด ๋๊ธด ํ์ง๋ง
๋ฏธ๋ฌํ ๊ณต๋ฐฑ.. ์ด ๋ ์์ด ๋์ฃ๊ฐ์์ด๋ค
์ด๋ฅผ ํด๊ฒฐํ๋ ค๋ฉด
margin๊ฐ์ -(์์)๋ก ์ ์ฉ์ ํ๋ ๋ฑ์
์ธ๋ถ์ ์ธ ์กฐ์ ์ด ํ์ํ๋ค.
3. flex
.container{
width: 400px;
border: 1px solid #000;
display: flex;
}
.item {
width: 100px;
height: 100px;
border: 1px solid #000;
background: gold;
border-radius: 5px;
}
์ค๋์ ์ฃผ์ธ๊ณต flex๋ฅผ ์ด์ฉํ๋ฉด
๋ถ๋ชจ์์์ ๋จ ํ ์ค๋ง์ผ๋ก ์ํ๋ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์๋ค!
'๐ | WEB DEV > HTML CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
PoeimaWeb) HTML5_2~3(๊ธฐ๋ณธ๋ฌธ๋ฒ, ์๋ฉํฑ, ๊ฒ์์์ง) (0) | 2024.06.16 |
---|---|
CSS_flex(2) (0) | 2022.01.30 |
HTML & CSS ํ์ฉ ํ๋ก์ ํธ_ ์นด๋์ ํ & ๋์คํ์ฑ (0) | 2022.01.28 |
CSS _transition(2) (timing-function) (0) | 2022.01.14 |
CSS _transition(1) (property, timing, delay) (0) | 2022.01.14 |
๋๊ธ