์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- ๋ธ๋ก๊ทธ
- ๋ฐ๋ธ์ฝ์ค
- CSS
- ๋ฐ๋ธ์ฝ์ค3๊ธฐ
- fetch API
- useEffect
- history api
- Gatsby
- position
- float
- ์๊ณ ๋ฆฌ์ฆ
- ํ๋ก ํธ์๋
- Flex
- Props
- useRef
- ํ๋ก๊ทธ๋๋จธ์ค
- REACT
- ์ฝ๋ฉํ ์คํธ
- ์๋ฐ์คํฌ๋ฆฝํธ
- Today
- Total
๋ชฉ๋กposition (1)
Daehyunii's Dev-blog

Float ์ํ์ ๋ ฌ ๋ ์ด์์์์ ์ฌ์ฉํ๊ธด ํ์ง๋ง, ์์ฆ์ ๋๋ถ๋ถ flex๋ก ํ๋ค. float๋ฅผ ์ฌ์ฉํ๋ ์์๋ค๋ง ํ์ ์์๋ก ๋ฌถ๊ณ , ๋ถ๋ชจ์ clearfix ํด๋์ค๋ฅผ ์ ์ฉํด์ ๊ด๋ฆฌํด์ผ ๋ฌธ์ ๊ฐ ์๊ธฐ์ง ์๋๋ค. float๋ฅผ ์ฌ์ฉํ๋ฉด flex, inline-flex, grid๋ฅผ ์ ์ธํ๊ณ ๋ display๊ฐ block์ผ๋ก ๋ฐ๋๋ค. 1. Float ํด์ ๋ฐฉ๋ฒ float๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ ์์์ ์ํฅ์ด ๊ฐ๊ธฐ ๋๋ฌธ์ float ์์ฑ์ ํด์ ํ๋ ๊ฒ์ด ํ์ํ๋ค. ์ด 3๊ฐ์ง ๋ฐฉ๋ฒ์ด ์กด์ฌํ๋, 3๋ฒ์งธ ๋ฐฉ๋ฒ์ด ๊ฐ์ฅ ์ ํฉํ ๋ฐฉ๋ฒ์ด๋ค. clear๋ฅผ ์ ์ฉํ ๋ง์ง๋ง ์์์ ๋ค์ ํ์ ์์๋ฅผ ์ถ๊ฐํ๋ค. ๋ถ๋ชจ์ overflow: hidden์ ์ถ๊ฐํ๋ค. ::after๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ์์์๋ฅผ ๋ง๋ค๊ณ clear๋ฅผ ์ฌ์ฉํ๋ค. ::after๋ฅผ ์ฌ์ฉํ๊ธฐ ..