CSS Box

juya_ยท2020๋…„ 10์›” 24์ผ
0

๐Ÿ“ฆ CSS Box Model

โœ๏ธ content

: ์ฝ˜ํ…์ธ ๊ฐ€ ์žˆ๋Š” ์ƒ์ž (width/height)

โœ๏ธ padding

: ์•ˆ์ชฝ ์—ฌ๋ฐฑ

โœ๏ธ border

: ํ…Œ๋‘๋ฆฌ

๐Ÿ”Ž ํŠน์ง•

  • ๊ตต๊ธฐ, ์Šคํƒ€์ผ, ์ƒ‰์ƒ ์ง€์ • ํ•„์ˆ˜ (ex:px, solid, blue)
  • border-radius -> ํ…Œ๋‘๋ฆฌ ๋‘ฅ๊ธ€๊ฒŒ (50%์„ค์ •์‹œ ์›ํ˜•)

โœ๏ธ margin

: ์š”์†Œ์™€ ์š”์†Œ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ, ๋ฐ”๊นฅ ์—ฌ๋ฐฑ

๐Ÿ˜Ž ์†๊ธฐํ˜• ์ž‘์„ฑ๋ฒ•

: ์‹œ๊ณ„๋ฐฉํ–ฅ๋งŒ ์ƒ๊ฐํ•˜๊ธฐ!!

p {
   padding : top light botton left
}

top, botton / light, left ์€ ์„ธํŠธ

p {
   padding : 20px 40px
}
// top,botton 20px / light, left 40px

๐Ÿ“ฆ CSS Box Type (display ์†์„ฑ)

โœ๏ธ block

: ๊ธธ๋ง‰, ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ€๋กœ ์˜์—ญ์„ ๋ชจ๋‘ ์ฐจ์ง€ํ•จ
: div, p, h, li ํƒœ๊ทธ๊ฐ€ block ์†์„ฑ์ž„

๐Ÿ”Ž ํŠน์ง•

  • ๋ณ„๋„ width ์„ ์–ธํ•˜์ง€ ์•Ÿ์œผ๋ฉด width๋Š” ๋ถ€๋ชจ์š”์†Œ์™€ ๊ฐ™์Œ
  • ๋ณ„๋„ width ๊ฐ’์„ ์ฃผ๋ฉด ๋‚จ์€ ๋นˆ ๊ณต๊ฐ„์€ margin์œผ๋กœ ์ฑ„์›€
  • box model์˜ ๋ชจ๋“  ์†์„ฑ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • ๋ณ„๋„ height ์„ ์–ธํ•˜์ง€ ์•Š์œผ๋ฉด height๋Š” ์ž์‹์š”์†Œ์˜ height์˜ ํ•ฉ๊ณผ ๊ฐ™๋‹ค.
  • margin : 0 auto; --> block box center

โœ๏ธ inline

: ํ๋ฆ„, ์˜†์œผ๋กœ ์„ ์œผ๋กœ ํ๋ฅธ๋‹ค.
: span ํƒœ๊ทธ๊ฐ€ inline ์†์„ฑ์ž„

๐Ÿ”Ž ํŠน์ง•

  • left, right ์ ์šฉ ๊ฐ€๋Šฅ
  • width, height ์ ์šฉ ๋ถˆ๊ฐ€
  • top, bottom ์ ์šฉ ๋ถˆ๊ฐ€

โœ๏ธ inline-block

: block ์ธ๋ฐ inline ์ฒ˜๋Ÿผ ํ•œ ์ค„๋กœ ๋ฐฐ์น˜ ๊ฐ€๋Šฅํ•œ ์†์„ฑ
: ๋Œ€ํ‘œ์ ์œผ๋กœ button, select ํƒœ๊ทธ

๐Ÿ’Š ์‹ค๋ฌด tip

box-sizing : border-box; ๋กœ css ์„ค์ •ํ•˜๊ธฐ

  • ๊ทธ๋ž˜์•ผ์ง€๋งŒ ์‚ฌ๋žŒ์ด ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ๋Š” box์‚ฌ์ด์ฆˆ๋กœ ์‰ฝ๊ฒŒ ์ƒ๊ฐํ•˜์—ฌ css๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Œ.
profile
์ฝ˜ํ…์ธ  ๋งˆ์ผ€ํ„ฐ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ...

0๊ฐœ์˜ ๋Œ“๊ธ€