๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

float1

[CSS] ๋ ˆ์ด์•„์›ƒ ๋ฐฐ์น˜ ์œ ํ˜• 3๊ฐ€์ง€ ์•Œ์•„๋ณด๊ธฐ ๋ ˆ์ด์•„์›ƒ(Layout) ์›น์„ ๊ตฌ์„ฑํ•˜๋Š” ์š”์†Œ๋“ค์„ ๋ณด๋‹ค ์•Œ์•„๋ณด๊ธฐ ์‰ฝ๊ฒŒ ํšจ๊ณผ์ ์œผ๋กœ ๋ฐฐ์น˜์‹œ์ผœ์ฃผ๋Š” ์ž‘์—…์ž…๋‹ˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ์˜ 3๊ฐ€์ง€ ์œ ํ˜• ๋ ˆ์ด์•„์›ƒ์—๋Š” Float, Flex, Grid๋ผ๋Š” ์ด 3๊ฐ€์ง€ ์œ ํ˜•(๋ฐฉ๋ฒ•)์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™์œผ๋ฉฐ 1๋ฒˆ์˜ ๊ฒฝ์šฐ ์ •๋ ฌํ•˜๊ณ ์ž ํ•˜๋Š” ์š”์†Œ์—, 2·3๋ฒˆ์˜ ๊ฒฝ์šฐ๋Š” ๋ถ€๋ชจ ํƒœ๊ทธ์— ์ ์Šต๋‹ˆ๋‹ค. 1. float: left; 2. display: flex; 3. display: grid; 01. Float Float๋ž€ '๋„์šฐ๋‹ค'๋ผ๋Š” ์˜๋ฏธ๋ฅผ ์ง€๋‹ˆ๋ฉฐ ๋ ˆ์ด์•„์›ƒ์˜ ํ‹€์„ ์žก์„ ๋•Œ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋ ˆ์ด์•„์›ƒ์˜ ํ‹€์„ ์žก์„ ๋•Œ์—๋Š” ํƒœ๊ทธ๊ฐ€ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ•ด๋‹น ํƒœ๊ทธ๋Š” block ํ˜•์‹์ด๊ธฐ ๋•Œ๋ฌธ์— ์š”์†Œ๋“ค์ด ๊ฐ€๋กœ๋กœ ๋‚˜๋ž€ํžˆ ์ •๋ ฌ๋  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. float: left; ์ด๋•Œ, ๋‚˜๋ž€ํžˆ ์ •๋ ฌํ•ด์ฃผ๊ณ ์ž ํ•˜๋Š” ์š”์†Œ์˜ CSS.. 2022. 7. 25.
๋ฐ˜์‘ํ˜•

Reference Book

JavaScript
HTML
CSS
๊ด‘๊ณ  ์ค€๋น„์ค‘์ž…๋‹ˆ๋‹ค.