block level์š”์†Œ

  1. ํ˜ผ์ž ํ•œ ์ค„์„ ๋‹ค ์ฐจ์ง€ํ•œ๋‹ค.
  2. ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•ด์„œ ์œ„๋กœ ์˜ฌ๋ผ๊ฐˆ ๊ณต๊ฐ„์ด ์ถฉ๋ถ„ํ•œ ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ด๋‚˜, ์˜ฌ๋ผ๊ฐ€์ง€ ์•Š๋Š”๋‹ค.
  3. ํฌ๊ธฐ ์กฐ์ ˆ์€ ๊ฐ€๋Šฅํ•˜๋‹ค.

inline level์š”์†Œ

  1. ์ฝ˜ํ…์ธ  ํฌ๊ธฐ ๋งŒํผ๋งŒ ํฌ๊ธฐ๊ฐ€ ๊ณ ์ •๋œ๋‹ค.
  2. ํฌ๊ธฐ ์กฐ์ ˆ์ด ์•ˆ๋œ๋‹ค.
  3. ๊ณต๊ฐ„์ด ์ถฉ๋ถ„ํ•˜๋ฉด ์œ„๋กœ ์˜ฌ๋ผ์˜จ๋‹ค.

padding: ์•ˆ์—ฌ๋ฐฑ

margin: ๋ฐ”๊นฅ์—ฌ๋ฐฑ

์ž์‹ ์˜์—ญ์ด ๋ถ€๋ชจ ์˜์—ญ์„ ๋ฒ—์–ด๋‚˜์ง€ ์•Š์ง€๋งŒ ๊ฐ’์„ ์ฃผ๋ฉด ๋ฒ—์–ด๋‚จ

vw, vh (๋ทฐํฌํŠธ ๊ธฐ์ค€ ๋‹จ์œ„): ๋ทฐ์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋น„์œจ๋กœ ์„ค์ • ๋‹จ์œ„

%: ๋ถ€๋ชจ ์š”์†Œ์˜ ํฌ๊ธฐ์— ๋”ฐ๋ผ ๋น„์œจ๋กœ ์„ค์ • ๋‹จ์œ„

inline-block: ์ธ๋ผ์ธ์˜ ์†์„ฑ์„ ๊ฐ€์ง€์ง€๋งŒ ๋ธ”๋Ÿญ์˜ ํฌ๊ธฐ ์กฐ์ ˆ ์†์„ฑ ๋˜ํ•œ ๊ฐ€์ง„๋‹ค.

box-shadow: ๊ทธ๋ฆผ์ž ์ถ”๊ฐ€(์ˆ˜ํ‰๊ฑฐ๋ฆฌ, ์ˆ˜์ง๊ฑฐ๋ฆฌ, ํ๋ฆผ์ •๋„, ๋ฒˆ์ง์ •๋„, ์ƒ‰์ƒ, ๊ทธ๋ฆผ์ž ๋ฐฉํ–ฅ)