[TIL] 1105 LikeLion๐ฆ FES 05
float
inline ์์๋ float๋ ์์๋ฅผ ์์๋ณธ๋ค. ๊ทธ๋์ ์ฌ์ง ๋ฐ์ผ๋ก ๋ค์ด๊ฐ์ง ์๊ณ ๊ฐ์ธ๋ ํํ๊ฐ ๋๋ค.
float ํด์ ์ํค๋ ๋ฐฉ๋ฒ
overflow: hidden
๋ถ๋ชจ๊ฐ float๋ ์์์ ์์๋ณด๊ฒ ํ๋ค
clear-fix
float๋ ์์์์๋ฅผ ๊ฐ์ง ๋ถ๋ชจ์์์๊ฒ clear-fix๋ผ๋ ํด๋์ค๋ฅผ ๋ถ์ฌํ๊ณ ๊ฐ์์์๋ฅผ ๋ง๋ค์ด์ ๊ฐ์์์์ clear:left or right or both;
clear-fix::after {
display: block;
content: "";
clear: both;
}
CSS Float ๋ฐ Clear ์ค๋ช
-CSS float ๋ฐ clear๋ ์ด๋ป๊ฒ ์๋ํฉ๋๊น?
๋ฌด์์ด ์ ์ผ ๋์ float ํด์ ๊ธฐ๋ฒ์ธ๊ฐ?
CSS ํ์ด์ง ๋ ์ด์์ 1๋ถ โ floats, positioning, display, float-root, table
Float ํด์ (Clear)
๊ฐ์์์
::before๋ ์ฒซ๋ฒ์งธ ์์ ์์
::after๋ ๋ง์ง๋ง ์์ ์์
๊ฐ์์์์ ์ด๋ฏธ์ง ๋ฃ๊ธฐ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([TIL] 1105 LikeLion๐ฆ FES 05), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@cnsrn1874/TIL-1105-LikeLion-FES-05์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค