[HTML/CSS/JS] CSS layout ๊ธฐ๋Šฅ

CSS layout ์ž‘์—…

์—˜๋ฆฌ๋จผํŠธ๋ฅผ ํ™”๋ฉด์— ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ

display

  • block : ๊ธฐ๋ณธ ์†์„ฑ, ์œ„์—์„œ ์•„๋ž˜๋กœ ์Œ“์Œ
  • inline : ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์Œ“์ž„(๊ฝ‰ ์ฐจ๋ฉด ์˜ค๋ฅธ์ชฝ ์•„๋ž˜๋กœ ์Œ“์ž„, span, a, strong โ€ฆ)
  • inline-block : inline์˜ ์†์„ฑ์—์„œ, ๋„“์ด์™€ ๋ฐฐ์น˜ ๋“ฑ์˜ ์˜ต์…˜์„ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Œ

position

  • static : ์ˆœ์„œ๋Œ€๋กœ ๋ฐฐ์น˜
  • absolute : ๊ธฐ์ค€์ (์ƒ์œ„ ์—˜๋ฆฌ๋จผํŠธ ์ค‘ static์ด ์•„๋‹Œ position, ์ƒ์œ„ ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ๋ชจ๋‘ static์ด๋ผ๋ฉด body๊ฐ€ ๊ธฐ์ค€)์— ๋”ฐ๋ผ ์œ„์น˜(top, left ๊ฐ’์„ ์ฃผ๋Š” ๊ฒƒ์ด ์ข‹์Œ)
  • relative : ์›๋ž˜ ์ž์‹ ์ด ์œ„์น˜ํ•˜์—ฌ์•ผ ํ•  ๊ณณ์„ ๊ธฐ์ค€์œผ๋กœ ์ƒ๋Œ€์ ์ธ ๊ณณ
  • fixed : ์Šคํฌ๋กค ๊ฐ™์€ ๊ฒƒ์— ์›€์ง์ด์ง€ ์•Š๋Š” ๊ณ ์ •๋œ ๋ ˆ์ด์–ด

float

  • left : ์ขŒ์ธก ๋์— ๋ฐฐ์น˜
  • right : ์šฐ์ธก ๋์— ๋ฐฐ์น˜
  • clear ์†์„ฑ์„ ๋‹ค๋ฅธ ์—˜๋ฆฌ๋จผํŠธ์— ์ ์šฉํ•˜๋ฉด, float๋ฅผ ์ง€์ •ํ•ด ์ฃผ์—ˆ๋˜ ํšจ๊ณผ๊ฐ€ ์‚ฌ๋ฆฌ์ง€๊ฒŒ ๋จ
  • ์ž์‹์ด float ์†์„ฑ์ด๋ฉด ๋ถ€๋ชจ๊ฐ€ ์ž์‹์œผ๋กœ ์ธ์ง€ํ•˜์ง€ ์•Š์ง€๋งŒ, overflow:auto; ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ์ž์‹์œผ๋กœ ์ธ์ง€

box-model

  • margin : ์—˜๋ฆฌ๋จผํŠธ ๊ฐ„ ๊ฐ„๊ฒฉ
  • border : ํ…Œ๋‘๋ฆฌ ์ •๋ณด(๋‘๊ป˜)
  • padding : ์—˜๋ฆฌ๋จผํŠธ ์•ˆ์— ์ฝ˜ํ…์ธ ์™€ ๊ทธ ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํฌ๊ธฐ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ

box-sizing

  • border-box : ๋‚ด๋ถ€์˜ ์—˜๋ฆฌ๋จผํŠธ ํฌ๊ธฐ๋ฅผ ๊ณ ์ •ํ•˜๋ฉด์„œ ๋ถ€๋ชจ ์—˜๋ฆฌ๋จผํŠธ์˜ padding ๊ฐ’์„ ๋Š˜๋ฆด ์ˆ˜ ์žˆ์Œ