[TIL] 1104 LikeLion๐ฆ FES 04
Margin Collapsing
๋ธ๋ก ์์์ ์์ง๋ฐฉํฅ ๋ง์ง์ด ์๋ก ๋ง๋ฟ์ ์๋ค๋ฉด ๋ ์ค ํฐ ๋ง์ง๋ง ์ ์ฉ๋๋ ํ์
ํด๊ฒฐ๋ฐฉ๋ฒ
- ๋ถ๋ชจ์์์ overflow: hidden; ์ ์ฉ
- ์์์์์ display: inline-block; ์ ์ฉ
CSS ๋ง์ง ์์(Margin-collapsing) ์๋ฆฌ ์๋ฒฝ ์ดํด
Position
default ๊ฐ์ static
relative๋ ๋ณธ์ธ์ด ์๋ ์์ด์ผ ํ ์์น ๊ธฐ์ค์ด๋ค.
position: relative;
left: 50px;
์ ์ฃผ๋ฉด static์์น ๊ธฐ์ค ์ค๋ฅธ์ชฝ์ผ๋ก 50px ์ด๋.
absolute๋ normal-flow๋ฅผ ๋ฒ์ด๋์ static์ด์์ ์์น์์ ๋ถ ๋ ์๋ ๋๋์ด๋ค.
top, left๋ก ์์น๋ฅผ ์ด๋์ํค๋ฉด position์ด static์ด ์๋ ๋ถ๋ชจ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ์ด๋ํ๋ค.
๋ถ๋ชจ ์์ ์ค relative๊ฐ ์๋ค๋ฉด body๋ฅผ ๊ธฐ์ค์ผ๋ก ํ๋ค.
์ 1ํ ์์ ๋ง์ ์บ๋ฆญํฐ ๊ทธ๋ฆฌ๊ธฐ ๊ฒฝ์ง๋ํ
์ด ์ข๊ฒ๋ 2๋ฑ์์ ์์ํ๋ค
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([TIL] 1104 LikeLion๐ฆ FES 04), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@cnsrn1874/TIL1104-LikeLion-FES-04์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค