Skip to content

Latest commit

ย 

History

History
81 lines (35 loc) ยท 2.26 KB

File metadata and controls

81 lines (35 loc) ยท 2.26 KB

Box Model

image-20200103131322781

image-20200103132208672

image-20200103132225966


position

image-20200103143557466

border-radius : 20px; /*๋‘ฅ๊ทผ ๊ฐ€์žฅ์ž๋ฆฌ*/

overflow

image-20200103154601935

์ด๋ ‡๊ฒŒ ๊ธ€์ž๊ฐ€ ๋„ˆ๋ฌด ๋งŽ์•„์„œ ๋„˜์ณ ํ๋ฅผ ๊ฒฝ์šฐ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•ด๊ฒฐํ•œ๋‹ค.

image-20200103154851722

image-20200103154929393

image-20200103155346296


Position

  • relative : ์›๋ž˜ ์žˆ์–ด์•ผํ•˜๋Š” ์œ„์น˜์—์„œ๋ถ€ํ„ฐ ์ƒ๋Œ€์  ์œ„์น˜๋กœ ์ด๋™ (ํ‰ํ–‰์ด๋™)
  • static : ์›๋ž˜ ๊ธฐ๋ณธ ํ๋ฆ„๋Œ€๋กœ ๋ณด์—ฌ์ง„๋‹ค. ์›๋ž˜ ์žˆ์–ด์•ผ ํ•˜๋Š” ์œ„์น˜์— ์žˆ๋‹ค.
    • ์œ„์—์„œ ์•„๋ž˜๋กœ, ์™ผ์ชฝ์—์„œ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ๋ถ€๋ชจ์˜ ์œ„์น˜์— ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค.
  • absolute : ๋ถ€๋ชจ์˜ ์œ„์น˜๋กœ๋ถ€ํ„ฐ ์ ˆ๋Œ€์  ์œ„์น˜๋กœ์ด๋™
    • absolute ๋Š” ๋‹คํ๋จผํŠธ ๊ธฐ์ค€์ด๋ผ. ๋”ฐ๋ผ์„œ ํ•ด์ƒ๋„์™€ ์ƒ๊ด€์—†์ด ๋ฌด์กฐ๊ฑด ๋ณด์ธ๋‹ค. ํ˜„์žฌ ํ™”๋ฉด์—์„œ ์•ˆ๋ณด์ด๋ฉด, ์Šคํฌ๋กค ์›€์ง์—ฌ์„œ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
  • fixed : ๋ถ€๋ชจ์˜ ํฌ์ง€์…˜๊ณผ ์ƒ๊ด€์—†์ด ์ง€์ •ํ•œ ์œ„์น˜๋กœ ์ด๋™. ์œˆ๋„์šฐ ๊ธฐ์ค€์œผ๋กœ ์ด๋™
    • fixed์€ ๋‚ด๊ฐ€ ํ™”๋ฉด์„ ๋‚ด๋ ค๋„ ๊ณ„์† ๋ณด์ธ๋‹ค. ์œˆ๋„์šฐ ๊ธฐ์ค€์œผ๋กœ ๋ฌด์กฐ๊ฑด ์ง€์ •๋œ ์œ„์น˜์—์„œ ๋ณด์—ฌ์ง„๋‹ค. ๋‚ด๊ฐ€ํ™”๋ฉด์„ ๊ณ„์† ๋‚ด๋ ค๋„ ์œ„์— ๋‘ฅ๋‘ฅ ๋– ์„œ ๋ณด์ธ๋‹ค.
    • ํ•˜์ง€๋งŒ ๋งŒ์•ฝ ์œˆ๋„์šฐ ํ•ด์ƒ๋„๋ฅผ ๋ฒ—์–ด๋‚˜๋Š” fixed ๊ฐœ์ฒด๋ผ๋ฉด, ์œˆ๋„์šฐ ๊ธฐ์ค€์ด๋ฏ€๋กœ ์Šคํฌ๋กค์„ ์•„๋ฌด๋ฆฌ ์›€์ง์—ฌ๋„ ๋ณผ ์ˆ˜ ์—†๋‹ค.
    • ์œˆ๋„์šฐ ํ•ด์ƒ๋„๋ฅผ ๋ฒ—์–ด๋‚˜์ง€ ์•Š์œผ๋ฉด ์Šคํฌ๋กค ํ•ด๋„ ํ™”๋ฉด์—์„œ ์ง€์ •ํ•œ ์œ„์น˜์— ๊ณ„์† ๊ณ ์ •๋œ๋‹ค.


width ํ• ๋•Œ ํ”ฝ์…€๋กœ ์žก์œผ๋ฉด ํ•ด์ƒ๋„ ๋ณ€๊ฒฝ ์‹œ ๋ฌธ์ œ๊ฐ€ ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ํผ์„ผํŠธ๋กœ ์ ์–ด์ฃผ์—ˆ๋‹ค.

float์˜ ์˜ํ–ฅ์„ ์ œ๊ฑฐํ•˜๊ณ , ๋‹ค์Œ ์˜์—ญ์œผ๋กœ ํ•˜๊ณ  ์‹ถ์„๋• clear : ์†์„ฑ์„ ์‚ฌ์šฉํ•œ๋‹ค.

image-20200106115333517

footer ๊ณ ์ •ํ•˜๊ณ  ์‹ถ์„๋•Œ ๋ฐฉ๋ฒ• ์ฐพ์•„๋ณด๊ธฐ (๋งŒ์•ฝ ์œ„ div์˜ ํ…์ŠคํŠธ๊ฐ€ ์ค„์–ด๋“ค ๊ฒฝ์šฐ, footer๊ฐ€ ์˜ฌ๋ผ๊ฐˆ ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—)