Sunday_May_17
.
.
.

๐Ÿ“ฆ Box Model (๋ฐ•์Šค ๋ชจ๋ธ)

๋“  HTML ์š”์†Œ๋Š” ๋ฐ•์Šค(box) ๋ชจ์–‘์œผ๋กœ ๊ตฌ์„ฑ๋˜๋ฉฐ, ์ด๊ฒƒ์„ ๋ฐ•์Šค ๋ชจ๋ธ(box model)์ด๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค.

๋ฐ•์Šค ๋ชจ๋ธ์€ HTML ์š”์†Œ๋ฅผ ํŒจ๋”ฉ(padding), ํ…Œ๋‘๋ฆฌ(border), ๋งˆ์ง„(margin), ๊ทธ๋ฆฌ๊ณ  ๋‚ด์šฉ(content)์œผ๋กœ ๊ตฌ๋ถ„ํ•ฉ๋‹ˆ๋‹ค.

1๏ธโƒฃ ๋‚ด์šฉ(content)

ํ…์ŠคํŠธ๋‚˜ ์ด๋ฏธ์ง€๊ฐ€ ๋“ค์–ด์žˆ๋Š” ๋ฐ•์Šค์˜ ์‹ค์งˆ์ ์ธ ๋‚ด์šฉ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค.

2๏ธโƒฃ ํŒจ๋”ฉ(padding)

๋‚ด์šฉ๊ณผ ํ…Œ๋‘๋ฆฌ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์ž…๋‹ˆ๋‹ค. ํŒจ๋”ฉ์€ ๋ˆˆ์— ๋ณด์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

3๏ธโƒฃ ํ…Œ๋‘๋ฆฌ(border)

๋‚ด์šฉ์™€ ํŒจ๋”ฉ ์ฃผ๋ณ€์„ ๊ฐ์‹ธ๋Š” ํ…Œ๋‘๋ฆฌ์ž…๋‹ˆ๋‹ค.

4๏ธโƒฃ ๋งˆ์ง„(margin)

ํ…Œ๋‘๋ฆฌ์™€ ์ด์›ƒํ•˜๋Š” ์š”์†Œ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์ž…๋‹ˆ๋‹ค. ๋งˆ์ง„์€ ๋ˆˆ์— ๋ณด์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿ“Š width์™€ height ์†์„ฑ์˜ ์ดํ•ด

๋ชจ๋“  ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ •ํ™•ํ•˜๊ฒŒ HTML ์š”์†Œ๋“ค์„ ํ‘œํ˜„ํ•˜๋ ค๋ฉด ์ด๋Ÿฌํ•œ ๋ฐ•์Šค ๋ชจ๋ธ์ด ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ์ •ํ™•ํžˆ ์•Œ์•„์•ผ๋งŒ ํ•ฉ๋‹ˆ๋‹ค.

CSS์—์„œ height์™€ width ์†์„ฑ์„ ์„ค์ •ํ•  ๋•Œ ๊ทธ ํฌ๊ธฐ๊ฐ€ ๊ฐ€๋ฅดํ‚ค๋Š” ๋ถ€๋ถ„์€ ๋‚ด์šฉ(content) ๋ถ€๋ถ„๋งŒ์„ ๋Œ€์ƒ์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

HTML ์š”์†Œ์˜ height์™€ width ์†์„ฑ์œผ๋กœ ์„ค์ •๋œ ๋†’์ด์™€ ๋„ˆ๋น„์— ํŒจ๋”ฉ(padding), ํ…Œ๋‘๋ฆฌ(border), ๋งˆ์ง„(margin)์˜ ํฌ๊ธฐ๋Š” ํฌํ•จ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๐Ÿงฎ HTML ์š”์†Œ์˜ ๋†’์ด์™€ ๋„ˆ๋น„ ๊ตฌํ•˜๊ธฐ

๐Ÿ‘‰ HTML ์š”์†Œ์˜ ์ „์ฒด ๋„ˆ๋น„(width)๋ฅผ ๊ณ„์‚ฐํ•˜๋Š” ๊ณต์‹

width + left padding + right padding + left border + right border + left margin + right margin

๐Ÿ‘‰ HTML ์š”์†Œ์˜ ์ „์ฒด ๋†’์ด(height)๋ฅผ ๊ณ„์‚ฐํ•˜๋Š” ๊ณต์‹

height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

์ด๋•Œ ๋งˆ์ง„(margin) ์˜์—ญ์˜ ํฌ๊ธฐ๋Š” ๋ˆˆ์œผ๋กœ ๋ฐ”๋กœ ํ™•์ธํ•  ์ˆ˜๋Š” ์—†์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์™œ๋ƒํ•˜๋ฉด ๋งˆ์ง„์ด๋ž€ ํ…Œ๋‘๋ฆฌ(border)์™€ ์ด์›ƒํ•˜๋Š” ์š”์†Œ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์ด๋ฉด์„œ, ๋ฐฐ๊ฒฝ์ƒ‰์˜ ์˜ํ–ฅ์„ ๋ฐ›์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ HTML ์š”์†Œ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ํฌ๊ธฐ์—๋Š” ํฌํ•จ๋ฉ๋‹ˆ๋‹ค.

profile
๐Ÿ‡ Rabbit can take a rest, but ๐Ÿข turtle can't

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