BLOCK

๐Ÿ“š ์ง€์‹ ์ฑ„์šฐ๊ธฐ/์›น (ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ)

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex

[HTML&CSS] Block , Inline , Margin, Border, Padding, Flex ( UPDATE 2023 - 05 - 25 ) ๋ธ”๋ก๊ณผ ์ธ๋ผ์ธ ๋ธ”๋ก์€ ํ•œ ์ค„์„ ์˜จ์ „ํžˆ ์ฐจ์ง€ํ•œ๋‹ค. (์˜†์— ๋ชป์˜ด) ์ธ๋ผ์ธ์€ ํ•œ ์ค„ ์•ˆ์— ๊ฐ™์ด ์žˆ๋‹ค. ๋ธ”๋ก์— display: inline ์„ ํ•˜๋ฉด ๋ฐ•์Šค ์†์„ฑ์„ ์œ ์ง€ํ•˜๋ฉด์„œ ์˜†์— ๋‹ค๋ฅธ ๋ธ”๋ก์ด ์˜ฌ ์ˆ˜ ์žˆ๋‹ค. ์ธ๋ผ์ธ์— display: block์„ ํ•˜๋ฉด ๋ธ”๋ก์ฒ˜๋Ÿผ ํ•œ ์ค„์„ ์˜จ์ „ํžˆ ์ฐจ์ง€ํ•œ๋‹ค. ์ธ๋ผ์ธ์€ ๋†’์ด(height)์™€ ๋„ˆ๋น„(width)๊ฐ€ ์—†๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” ์š”์†Œ๋“ค์—๊ฒŒ ์ž์ฒด์ ์œผ๋กœ style์„ ์ฃผ๊ธฐ๋„ํ•œ๋‹ค. (์˜ˆ๋ฅผ ๋“ค๋ฉด, ์›์น˜์•Š๋Š” ๊ณต๊ฐ„=margin) ๋ธ”๋ก์€ ๋ฐ•์Šค์ด๋‹ค. margin , border , padding ๋ฐ•์Šค๋Š” ์„ธ ๊ฐ€์ง€ ํŠน์ง•์ด ์žˆ๋‹ค. : margin,border,pad..

๐Ÿ“š ์ง€์‹ ์ฑ„์šฐ๊ธฐ/์›น (ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ)

[์›น] ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ ์ „์ฒด ๋ชฉ๋ก

๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ ์ „์ฒด ๋ชฉ๋ก ๋‹ค์Œ์€ HTML ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์˜ ์ „์ฒด ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค. ์‚ฌ์‹ค HTML5์˜ ์ƒˆ๋กœ์šด ์š”์†Œ๋ฅผ ์„ค๋ช…ํ•  ๋•Œ, "๋ธ”๋ก ๋ ˆ๋ฒจ"์ด๋ผ๋Š” ์šฉ์–ด๋Š” ์ •์˜๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ฝ˜ํ…์ธ  ์นดํ…Œ๊ณ ๋ฆฌ ์„ค๋ช…์„ ์ฐธ๊ณ ํ•˜์„ธ์š”. ์ฝ˜ํ…์ธ  ์นดํ…Œ๊ณ ๋ฆฌ ์„ค๋ช… (ํด๋ฆญ) ์—ฐ๋ฝ์ฒ˜ ์ •๋ณด. ๋‹จ๋ฝ ์ฝ˜ํ…์ธ . ๋ถ€๊ฐ€ ์ฝ˜ํ…์ธ . ๊ธด("๋ธ”๋ก") ์ธ์šฉ๊ตฌ. ์ƒ์„ธ ์ •๋ณด ์œ„์ ฏ. ๋Œ€ํ™”์ƒ์ž. ์„ค๋ช… ๋ชฉ๋ก์˜ ์ •์˜ ์„ค๋ช…. ๋ฌธ์„œ์˜ ๋ถ„ํ• . ์„ค๋ช… ๋ชฉ๋ก. ์„ค๋ช… ๋ชฉ๋ก์˜ ์ •์˜. ํ•„๋“œ ์ง‘ํ•ฉ์˜ ๋ผ๋ฒจ. ๊ทธ๋ฆผ ์„ค๋ช…. ๋ฏธ๋””์–ด ์ฝ˜ํ…์ธ  ๊ทธ๋ฃน๊ณผ ์„ค๋ช…. (์„ ์ฐธ๊ณ ํ•˜์„ธ์š”) ํŽ˜์ด์ง€๋‚˜ ๊ตฌ์—ญ์˜ ํ‘ธํ„ฐ. ์ž…๋ ฅ ํผ. , , , , , 1~6๋‹จ๊ณ„ ์ œ๋ชฉ. ํŽ˜์ด์ง€๋‚˜ ๊ตฌ์—ญ์˜ ํ—ค๋”. ํ—ค๋” ์ •๋ณด ๊ทธ๋ฃน. ์ˆ˜ํ‰์„ (๊ตฌ๋ถ„์„ ). ๋ชฉ๋ก์˜ ํ•ญ๋ชฉ. ๋ฌธ์„œ์—์„œ ํ•˜๋‚˜ ๋ฟ์ธ ์ค‘์‹ฌ ์ฝ˜ํ…์ธ . ํƒ์ƒ‰ ๋งํฌ๋ฅผ ํฌํ•จ. ์ •๋ ฌ๋œ ๋ชฉ๋ก. ๋ฌธ๋‹จ. ๋ฏธ๋ฆฌ ์„œ์‹ ์ ..

๐Ÿ“š ์ง€์‹ ์ฑ„์šฐ๊ธฐ/์›น (ํ”„๋ก ํŠธ์—”๋“œ, ๋ฐฑ์—”๋“œ)

[์›น] HTML์˜ ๋ธ”๋ก(block) ๊ณผ ์ธ๋ผ์ธ(inline) ์š”์†Œ

HTML์˜ ๋ธ”๋ก(block) ๊ณผ ์ธ๋ผ์ธ(inline) ๐Ÿ“Œ HTML ์š”์†Œ์˜ ํƒ€์ž…๐Ÿ“Œ HTML์˜ ๋ชจ๋“  ์š”์†Œ๋Š” ํ•ด๋‹น ์š”์†Œ๊ฐ€ ์›น ๋ธŒ๋ผ์šฐ์ €์— ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”๊ฐ€๋ฅผ ๊ฒฐ์ •์ง“๋Š” display ์†์„ฑ์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ HTML ์š”์†Œ๋Š” ์ด๋Ÿฌํ•œ display ์†์„ฑ๊ฐ’์œผ๋กœ ๋‹ค์Œ ๋‘ ๊ฐ€์ง€ ๊ฐ’ ์ค‘ ํ•˜๋‚˜๋ฅผ ๊ฐ€์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. 1. ๋ธ”๋Ÿญ(block)์š”์†Œ ํ•˜๋‚˜์˜ ํƒœ๊ทธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ขŒ์šฐ๊ณต๊ฐ„์„ ๋‹ค ์ฐจ์ง€ํ•˜๋ฉด์„œ ๋…๋ฆฝ์ ์ธ ๋ฉ์–ด๋ฆฌ ๊ณต๊ฐ„์„ ๊ฐ€์ง€๋Š” ์š”์†Œ 2. ์ธ๋ผ์ธ(inline) ์š”์†Œ ํ•˜๋‚˜์˜ ํƒœ๊ทธ๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์‹ค์ œ๋กœ ์ฝ”๋”ฉ๋œ ๊ทธ ์˜์—ญ๋งŒ ์ฐจ์ง€ํ•˜์—ฌ ์ขŒ์šฐ๊ฐ€ ๋‹ค๋ฅธ ํƒœ๊ทธ๊ฐ€ ๋‚˜๋ž€ํžˆ ์œ„์น˜ํ•  ์ˆ˜ ์žˆ๋Š” ์š”์†Œ = ํ…์ŠคํŠธ๋ ˆ๋ฒจ ์š”์†Œ, ํ–‰ ์•ˆ์˜ ์ผ๋ถ€๋ถ„ 3. ํŠน์ง• ๋ฐ ์ฃผ์˜์  ๋ธ”๋Ÿญ์š”์†Œ๋Š” ๋‚ด๋ถ€์— ๋ธ”๋Ÿญ์š”์†Œ์™€ ์ธ๋ผ์ธ์š”์†Œ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ธ๋ผ์ธ์š”์†Œ๋Š” ๋‚ด๋ถ€์— ๋ธ”๋Ÿญ์š”์†Œ๋ฅผ ํฌํ•จํ•  ์ˆ˜ ์—†..

์–‘์ฝฉ(Yangkong)
'BLOCK' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก