๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฐจ๋Ÿผ1

๋ฉ‹์Ÿ์ด์‚ฌ์ž์ฒ˜๋Ÿผ ํ”„๋ก ํŠธ์—”๋“œ์Šค์ฟจ 6์ผ์ฐจ ๊ธฐ๋ก ์˜ค๋Š˜ ํ•œ ์ผ CSS ์ˆ˜์—… ์Šคํ„ฐ๋”” ๊ฐœ์„ค(๊ฒŒํ„ฐ๋””) ํšŒ๊ณ  ๊ทธ๋ฃน ๋ฐฐ์ • ์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ flex ์†์„ฑ ์ด์ „์— ๋ฐฐ์›Œ์„œ ์•Œ๊ณ ๋Š” ์žˆ์—ˆ๋Š”๋ฐ ์ด์ƒํ•˜๊ฒŒ ์ž˜ ์•ˆ์“ฐ๊ฒŒ ๋˜์„œ ์กด์žฌ๋ฅผ ์žŠ๊ณ  ์žˆ์—ˆ๋‹ค๊ฐ€ ์ด๋ฒˆ์— ๋‹ค์‹œ ๋ฐฐ์› ๋‹ค. ํ™•์‹คํžˆ ์ •๋ ฌ์ด ํ›จ์”ฌ ํŽธํ•ด์ง„๋‹ค. float๋กœ ๊ตฌํ˜„ํ• ๋•Œ๋งˆ๋‹ค ๋งจ๋‚  ๋‚ด ๋ง˜๋Œ€๋กœ ์•ˆ๋˜๊ณ  ์ง€๋ฉ‹๋Œ€๋กœ ๋– ๋‹ค๋‹ˆ๊ธธ๋ž˜ ๊ณจ๋จธ๋ฆฌ๋ฅผ ์•“์•˜๋Š”๋ฐ ํ”Œ๋ ‰์Šค๊ฐ€ ํ›จ์”ฌ ํŽธํ•˜๋‹ค. ์•„ ์–ผ๋ฅธ ๊ณผ๊ฑฐ์˜ ์œ ์‚ฐ๋“ค ๋‹ค ์‚ฌ๋ผ์ง€๊ณ  ํ”Œ๋ ‰์Šค๋กœ ํ†ต์ผํ•˜์ž๊ตฌ์š” FLEX float ์†์„ฑ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ๋ชฐ๋ผ์„œ ๋งจ๋‚  ์ด๋ฆฌ ๊ตฌ๋ฅด๊ณ  ์ €๋ฆฌ ๊ตด๋ €์ง€๋งŒ ํ•œ๋ฒˆ๋„ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ์ฐพ์•„๋ณผ ์ƒ๊ฐ์„ ์•ˆํ–ˆ์—ˆ๋‹ค. ์ด๋Ÿฐ๊ฑฐ ๋ณด๋ฉด ๋‚˜๋Š” ์ข…์ข… ๋„ˆ๋ฌด ์ˆ˜๋™์ ์ผ ๋•Œ๊ฐ€ ์žˆ๋‹ค. ๊ทธ์น˜๋งŒ ์ด์  ์•„๋ƒ... float ํ•ด์ œํ• ๋•Œ ๋งจ๋‚  clear ์ฃผ๋Š”๊ฒŒ ํ—ท๊ฐˆ๋ ธ๋Š”๋ฐ ๊ฐœ์ธ์ ์œผ๋ก  ๋ถ€๋ชจ ์š”์†Œ์— overflow ๊ฐ’์„ ์ฃผ๋Š”๊ฒŒ ๋” ํŽธํ•จ ํ›„๊ธฐ ์‚ฌ.. 2021. 11. 6.
๋ฐ˜์‘ํ˜•