์ธํŒŒ

You Can Become A

Programm

๋Šฆ๊ฒŒ ์‹œ์ž‘ํ•ด๋„ ๋ˆ„๊ตฌ๋“ ์ง€ ๋…ธ๋ ฅํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ ์ˆ˜ ์žˆ์–ด์š” !

๊ทธ๋ฆฌ๋„

๊ณต๋ถ€ํ•œ ๋‚ด์šฉ์„ ์ •๋ฆฌํ•ฉ๋‹ˆ๋‹ค
CSS

[CSS] ๐Ÿ“š ๊ทธ๋ฆฌ๋“œ(Grid) ๐Ÿ’ฏ ์ด์ •๋ฆฌ

Grid Grid๊ฐ€ ๋‚˜์˜ค๊ธฐ ์ด์ „์—๋Š”, float์ด๋‚˜ table, flex๋ฅผ ์ด์šฉํ•ด ๋ ˆ์ด์•„์›ƒ์„ ์งฐ๋‹ค. CSS Grid๋Š” ์˜ˆ์ „๋ถ€ํ„ฐ ํ•ต(Hack)์œผ๋กœ ๋ถˆ๋ฆฐ ๋‹ค์–‘ํ•œ ๋ ˆ์ด์•„์›ƒ ๋Œ€์ฒด ๋ฐฉ์‹๋“ค์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ํŠน๋ณ„ํ•œ CSS ๋ชจ๋“ˆ์ด๋‹ค. ๊ทธ๋ฆฌ๋“œ ์šฉ์–ด โ€‹ ๊ทธ๋ฆฌ๋“œ ์ปจํ…Œ์ด๋„ˆ display: grid๋กœ ํ‘œ๊ธฐํ•˜๋ฉฐ ๋ชจ๋“  ๊ทธ๋ฆฌ๋“œ ์•„์ดํ…œ์˜ ๋ถ€๋ชจ ์š”์†Œ์ด๋‹ค. ์ผ๋‹จ ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ๋  ์š”์†Œ์—๊ฒŒ grid๋ฅผ ์ฃผ๋ฉด ๊ทธ๋•Œ๋ถ€ํ„ฐ ์ž์‹ ์š”์†Œ๋“ค์€ Grid Items์ด ๋œ๋‹ค. HEADER MAIN ASIDE FOOTER [๊ทธ๋ฆฌ๋“œ ์•„์ดํ…œ ์ •๋ ฌ] align-self ๋‹จ์ผ ๊ทธ๋ฆฌ๋“œ ์•„์ดํ…œ(Item)์„ ์ˆ˜์ง(์—ด ์ถ•) ์ •๋ ฌ ๊ฐ’ ์˜๋ฏธ ๊ธฐ๋ณธ๊ฐ’ normal stretch์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค. normal start ์‹œ์ž‘์ (์œ„์ชฝ) ์ •๋ ฌ center ์ˆ˜์ง ๊ฐ€์šด๋ฐ ์ •๋ ฌ end ๋์ (..

category_image
์ธํŒŒ_
2021.10.07
(0)