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

FLEX1

CSS_flex(2) ๋“ค์–ด๊ฐ€๊ธฐ์— ์•ž์„œ flexbox๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•ด์„œ ์ถ•์˜ ๊ฐœ๋…์„ ์•Œ์•„๋ณด๋ฉด, ์ฃผ์ถ•, ๊ต์ฐจ์ถ•์ด ์žˆ๋‹ค. ์ฃผ์ถ• = ๊ฐ€๋กœ์ •๋ ฌ->๊ฐ€๋กœ์ถ•, ์„ธ๋กœ์ •๋ ฌ->์„ธ๋กœ์ถ• ๊ต์ฐจ์ถ• = ์ฃผ์ถ•์˜ ์ˆ˜์ง ์œ„์˜ ์ถ•์€ flex-direction์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ๊ฐ€๋กœ : row, row-reverse ์„ธ๋กœ : column, column-reverse ์œ„์™€ ๊ฐ™์€ ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค. ์ด ์ถ•์˜ ๊ฐœ๋…์€ ์š”์†Œ๋ฅผ ์ •๋ ฌํ•  ๋•Œ ํ•„์ˆ˜์ ์ธ ๊ฐœ๋…์ด๋‹ค! flexbox์—๋Š” ๋ถ€๋ชจ์š”์†Œ์ธ flex container ์ž์‹์š”์†Œ์ธ flex items ๋กœ ๊ตฌ์„ฑ์ด ๋˜์–ด์žˆ๋‹ค. ๋˜ํ•œ ์ด์—๋”ฐ๋ผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์†์„ฑ๋„ ๋‹ค๋ฅด๋‹ค! ์ฐธ๊ณ ์ž๋ฃŒ ↓ (https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concep.. 2022. 1. 30.
๋ฐ˜์‘ํ˜•

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”