๐ CSS
๐ฅ Resetting๊ณผ Normalizing CSS์ ์ฐจ์ด์ ์ ๋ฌด์์ธ๊ฐ์?โ
Resetting
์ ์์์ ๋ชจ๋ ๊ธฐ๋ณธ ๋ธ๋ผ์ฐ์ ์คํ์ผ์ ์ ๊ฑฐํ๊ธฐ ์ํ ๊ฒ์
๋๋ค.
Normalizing
์ ๋ชจ๋ ์คํ์ผ์ ์ ๊ฑฐํ๋ ๊ฒ์ด ์๋๋ผ ์ ์ฉํ ๊ธฐ๋ณธ ์คํ์ผ์ ๋ณด์กดํฉ๋๋ค. ๋ํ ์ผ๋ฐ์ ์ธ ๋ธ๋ผ์ฐ์ ์ข
์์ฑ์ ๋ํ ๋ฒ๊ทธ๋ฅผ ์์ ํ๋น๋ค.
๐ฅ * { box-sizing: border-box; }
๋ ๋ฌด์์ ํ๋์? ์ฅ์ ์ ๋ฌด์์ธ๊ฐ์?โ
์ด ์์๋ width
์ height
๊ฐ ์ด๋ป๊ฒ ๊ณ์ฐ๋๋์ง๋ฅผ ๋ณ๊ฒฝํ์ฌ, border
์ padding
๋ ๊ณ์ฐ์ ํฌํจ๋ฉ๋๋ค. padding
๊ณผ border
๋ฅผ ๋ฐ์ค ๋ชจ๋ธ์ ์ผ๋ถ๋ถ์ผ๋ก ์๊ฐํ๋ฉด, ๋์์ด๋๊ฐ ์ค์ ๋ก ์๊ฐํ๋ ๊ฒ๊ณผ ์ ๋ค์ด ๋ง์ต๋๋ค.