WIL 2์ฃผ์ฐจ

hazellee0914ยท2022๋…„ 12์›” 26์ผ
0

WIL

๋ชฉ๋ก ๋ณด๊ธฐ
6/21
post-thumbnail

๐Ÿ—“ ์˜ค๋Š˜ ๋ฐฐ์šด ๋‚ด์šฉ

๋ถ€๋ชจ ์š”์†Œ์— ์ ์šฉํ•ด์•ผํ•˜๋Š” Flexbox ์†์„ฑ๋“ค

1. flex-direction : ์ •๋ ฌ ์ถ• ์ •ํ•˜๊ธฐ

flex-direction ์†์„ฑ์€ ๋ถ€๋ชจ ์š”์†Œ์— ์„ค์ •ํ•ด์ฃผ๋Š” ์†์„ฑ์œผ๋กœ, ์ž์‹ ์š”์†Œ๋“ค์„ ์ •๋ ฌํ•  ์ •๋ ฌ ์ถ•์„ ์ •ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ฌด ์„ค์ •๋„ ํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ€๋กœ ์ •๋ ฌ์„ ํ•ฉ๋‹ˆ๋‹ค.

2. flex-wrap : ์ค„ ๋ฐ”๊ฟˆ ์„ค์ •ํ•˜๊ธฐ

flex-wrap ์†์„ฑ์€ ํ•˜์œ„ ์š”์†Œ๋“ค์˜ ํฌ๊ธฐ๊ฐ€ ์ƒ์œ„ ์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ๋„˜์œผ๋ฉด ์ž๋™ ์ค„ ๋ฐ”๊ฟˆ์„ ํ•  ๊ฒƒ์ธ์ง€ ์ •ํ•ฉ๋‹ˆ๋‹ค. ์„ค์ •ํ•ด ์ฃผ์ง€ ์•Š์œผ๋ฉด ์ค„ ๋ฐ”๊ฟˆ์„ ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

3. justify-content : ์ถ• ์ˆ˜ํ‰ ๋ฐฉํ–ฅ ์ •๋ ฌ

justify-content ์†์„ฑ์€ ์ž์‹ ์š”์†Œ๋“ค์„ ์ถ•์˜ ์ˆ˜ํ‰ ๋ฐฉํ–ฅ์œผ๋กœ ์–ด๋–ป๊ฒŒ ์ •๋ ฌํ•  ๊ฒƒ์ธ์ง€ ์ •ํ•ฉ๋‹ˆ๋‹ค. ์š”์†Œ๋“ค์ด ๊ฐ€๋กœ๋กœ ์ •๋ ฌ๋˜์–ด ์žˆ๋‹ค๋ฉด ๊ฐ€๋กœ ๋ฐฉํ–ฅ์œผ๋ก  ์–ด๋–ป๊ฒŒ ์ •๋ ฌํ•  ๊ฒƒ์ธ์ง€, ์„ธ๋กœ๋กœ ์ •๋ ฌ๋˜์–ด ์žˆ๋‹ค๋ฉด ์„ธ๋กœ ๋ฐฉํ–ฅ์œผ๋ก  ์–ด๋–ป๊ฒŒ ์ •๋ ฌํ•  ๊ฒƒ์ธ์ง€ ์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค.

4. align-items : ์ถ• ์ˆ˜์ง ๋ฐฉํ–ฅ ์ •๋ ฌ

align-items ์†์„ฑ์€ ์ž์‹ ์š”์†Œ๋“ค์„ ์ถ•์˜ ์ˆ˜์ง ๋ฐฉํ–ฅ์œผ๋กœ ์–ด๋–ป๊ฒŒ ์ •๋ ฌํ•  ๊ฒƒ์ธ์ง€ ์ •ํ•ฉ๋‹ˆ๋‹ค. ์š”์†Œ๋“ค์ด ๊ฐ€๋กœ๋กœ ์ •๋ ฌ๋˜์–ด ์žˆ๋‹ค๋ฉด ์„ธ๋กœ ๋ฐฉํ–ฅ์œผ๋ก  ์–ด๋–ป๊ฒŒ ์ •๋ ฌํ•  ๊ฒƒ์ธ์ง€, ์„ธ๋กœ๋กœ ์ •๋ ฌ๋˜์–ด ์žˆ๋‹ค๋ฉด ๊ฐ€๋กœ ๋ฐฉํ–ฅ์œผ๋ก  ์–ด๋–ป๊ฒŒ ์ •๋ ฌํ•  ๊ฒƒ์ธ์ง€ ์ •ํ•˜๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค.

์ž์‹ ์š”์†Œ์— ์ ์šฉํ•ด์•ผ ํ•˜๋Š” Flexbox ์†์„ฑ

flex ์†์„ฑ์˜ ๊ฐ’

flex ์†์„ฑ์—๋Š” ์„ธ ๊ฐ€์ง€ ๊ฐ’์„ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ ๊ฐ’์ด ์˜๋ฏธํ•˜๋Š” ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

grow(ํŒฝ์ฐฝ ์ง€์ˆ˜) ๋Š” ์š”์†Œ์˜ ํฌ๊ธฐ๊ฐ€ ๋Š˜์–ด๋‚˜์•ผ ํ•  ๋•Œ ์–ผ๋งˆ๋‚˜ ๋Š˜์–ด๋‚  ๊ฒƒ์ธ์ง€, shrink(์ˆ˜์ถ• ์ง€์ˆ˜) ๋Š” ์š”์†Œ์˜ ํฌ๊ธฐ๊ฐ€ ์ค„์–ด๋“ค์–ด์•ผ ํ•  ๋•Œ ์–ผ๋งˆ๋‚˜ ์ค„์–ด๋“ค ๊ฒƒ์ธ์ง€, basis(๊ธฐ๋ณธ ํฌ๊ธฐ) ๋Š” ๋Š˜์–ด๋‚˜๊ณ  ์ค„์–ด๋“œ๋Š” ๊ฒƒ๊ณผ ์ƒ๊ด€์—†์ด ์š”์†Œ์˜ ๊ธฐ๋ณธ ํฌ๊ธฐ๋Š” ์–ผ๋งˆ์ธ์ง€๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์ž์‹ ์š”์†Œ์— flex ์†์„ฑ์„ ๋”ฐ๋กœ ์„ค์ •ํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ธฐ๋ณธ๊ฐ’์ด ์ ์šฉ๋˜๋ฉฐ, ์™ผ์ชฝ์—์„œ๋ถ€ํ„ฐ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ฝ˜ํ…์ธ ์˜ ํฌ๊ธฐ๋งŒํผ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค.

flex ์†์„ฑ ์•ˆ์— ์„ธ ๊ฐ€์ง€ ๊ฐ’์„ ํ•œ ๋ฒˆ์— ์„ค์ •ํ•ด์ค„ ํ•„์š” ์—†์ด, ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๊ฐ ๊ฐ’์„ ๋”ฐ๋กœ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

โœ๏ธ ํŒจ์–ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ

๊ณ„์‚ฐ๊ธฐ ๋ชฉ์—…
1. ์™€์ด์–ดํ”„๋ ˆ์ž„
2. html ๊ตฌ์กฐ ์žก๊ธฐ
3. ์Šคํƒ€์ผ์‹œํŠธ

๐Ÿ“— ํšŒ๊ณ 

ํฌ๋ฆฌ์Šค๋งˆ์Šค ์ด๋ธŒ ์ „๋‚  ๊ฐ์ž ๊ฐœ์ธ์ผ๋กœ ํŽ˜์–ดํ™œ๋™์„ ํ•˜์ง€๋ชปํ•˜๊ณ  ๋‹ค์Œ์ฃผ ์›”์š”์ผ ๋ฏธ๋ค˜๊ธฐ์— ํ˜ผ์ž์„œ ํ”Œ๋žœ์„ ์งœ๋ณด์•˜๋‹ค. ์—ญ์‹œ๋‚˜ css ํ•ญ์ƒ ์–ด๋ ค์šด๊ฑธ ๋Š๋ผ๊ฒŒ ๋˜๊ณ  html ์—์„œ๋Š” ๋จธ๋ฆฟ์†์—์„œ tabla ํƒœ๊ทธ๋กœ ํ• ๊นŒ button, span, data-์†์„ฑ ์•„๋‹ˆ๋ฉด css์—์„œ grid๋กœ ํ‹€์„ ์žก์„๊นŒ ์—ฌ๋Ÿฌ ๋ฐฉํ–ฅ์„ ํ†ตํ•ด์„œ ์‹œ๋„๋ฅผ ํ•ด๋ด์•ผ๊ฒ ๋‹ค๋Š” ์˜์š•์ด ๋ถˆํƒ€์˜ฌ๋ž๋‹ค.
๋‹ค์Œ์ฃผ ํŽ˜์–ด๋ถ„๊ณผ ์ž˜ ์˜๋…ผํ•ด์„œ ์ข‹์€ ๊ฒฐ๊ณผ๋ฌผ์„ ๋‚ด๋ณด๋„๋ก...

profile
์‹ค์ˆ˜๋ฅผ ๋‘๋ ค์›Œ ๋ง๊ณ  ๊ณ„์† ๋„์ „ ํ•˜๋Š” ๊ฐœ๋ฐœ์ž์˜ ์—ฌ์ •!

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