G ํ•˜๋‚˜์˜ ๋„๊ตฌ ํ‚คํŠธ๋กœ
๋ชจ๋“  ์„ค๊ณ„ ์ž‘์—…

CSS Grid ์ƒ์„ฑ๊ธฐ

์‹ค์‹œ๊ฐ„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋กœ CSS Grid ๋ ˆ์ด์•„์›ƒ์„ ์‹œ๊ฐ์ ์œผ๋กœ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

English ไธญๆ–‡ ๆ—ฅๆœฌ่ชž ํ•œ๊ตญ์–ด Espaรฑol Portuguรชs Franรงais Deutsch ุงู„ุนุฑุจูŠุฉ เคนเคฟเคจเฅเคฆเฅ€ เน„เธ—เธข Tiแบฟng Viแป‡t Bahasa ะ ัƒััะบะธะน

G CSS Grid ์ƒ์„ฑ๊ธฐ

CSS ๊ทธ๋ฆฌ๋“œ ์ƒ์„ฑ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

CSS ๊ทธ๋ฆฌ๋“œ ์ƒ์„ฑ๊ธฐ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ ๋„ CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ์„ ์‹œ๊ฐ์ ์œผ๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์Šฌ๋ผ์ด๋”๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์—ด๊ณผ ํ–‰ ์ˆ˜๋ฅผ ์„ค์ •ํ•˜๊ณ , ์…€ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ์กฐ์ •ํ•˜๊ณ , ์ „์ฒด CSS ์ฝ”๋“œ๋ฅผ ์ฆ‰์‹œ ๋ณต์‚ฌํ•˜์—ฌ ํ”„๋กœ์ ํŠธ์— ๋ถ™์—ฌ๋„ฃ์Šต๋‹ˆ๋‹ค.

CSS ๊ทธ๋ฆฌ๋“œ๋Š” CSS์—์„œ ๊ฐ€์žฅ ๊ฐ•๋ ฅํ•œ ๋ ˆ์ด์•„์›ƒ ์‹œ์Šคํ…œ์ž…๋‹ˆ๋‹ค. ํ–‰๊ณผ ์—ด์„ ๋™์‹œ์— ์ฒ˜๋ฆฌํ•˜๋ฏ€๋กœ ๋ณต์žกํ•œ ํŽ˜์ด์ง€ ๊ตฌ์กฐ, ์นด๋“œ ๊ทธ๋ฆฌ๋“œ ๋ฐ ๋ฐ˜์‘ํ˜• ๋””์ž์ธ์— ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

Pro Tips

Frequently Asked Questions

Q: CSS ๊ทธ๋ฆฌ๋“œ์™€ Flexbox์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
CSS ๊ทธ๋ฆฌ๋“œ์™€ Flexbox์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๊ทธ๋ฆฌ๋“œ๋Š” 2์ฐจ์› ๋ ˆ์ด์•„์›ƒ(ํ–‰ ๋ฐ ์—ด)์„ ์œ„ํ•ด ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Flexbox๋Š” 1์ฐจ์› ๋ ˆ์ด์•„์›ƒ(ํ–‰ ๋˜๋Š” ์—ด)์šฉ์œผ๋กœ ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ํŽ˜์ด์ง€ ๊ตฌ์กฐ์—๋Š” ๊ทธ๋ฆฌ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ๊ตฌ์„ฑ ์š”์†Œ ์ •๋ ฌ์—๋Š” Flexbox๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
Q: ๊ทธ๋ฆฌ๋“œ๋ฅผ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋งŒ๋“ค๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ?
๊ทธ๋ฆฌ๋“œ๋ฅผ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๋งŒ๋“ค๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ? ์ƒ์„ฑ๋œ CSS๋ฅผ ์‹œ์ž‘์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  @media ์ฟผ๋ฆฌ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ ๋‹ค์–‘ํ•œ ์ค‘๋‹จ์ ์˜ ์—ด ์ˆ˜๋ฅผ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.
Q: ํ”„๋กœ๋•์…˜์—์„œ CSS ๊ทธ๋ฆฌ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‚˜์š”?
ํ”„๋กœ๋•์…˜์—์„œ CSS ๊ทธ๋ฆฌ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‚˜์š”? ์˜ˆ. CSS Grid๋Š” 2017๋…„๋ถ€ํ„ฐ ๋ชจ๋“  ์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ง€์›๋ฉ๋‹ˆ๋‹ค. 96% ๊ธ€๋กœ๋ฒŒ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
Q: 1fr์€ ๋ฌด์Šจ ๋œป์ธ๊ฐ€์š”?
1fr์€ ๋ฌด์Šจ ๋œป์ธ๊ฐ€์š”? fr์€ ๋ถ„์ˆ˜๋ฅผ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. 1fr์€ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ณต๊ฐ„์˜ ์ผ๋ถ€๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๊ฐ๊ฐ 1fr๋กœ ์„ค์ •๋œ ์„ธ ๊ฐœ์˜ ์—ด์ด ์žˆ๋Š” ๊ฒฝ์šฐ ๊ณต๊ฐ„์„ ๊ท ๋“ฑํ•˜๊ฒŒ ๋‚˜๋ˆ•๋‹ˆ๋‹ค.
Q: ๊ทธ๋ฆฌ๋“œ ์•ˆ์— ๊ทธ๋ฆฌ๋“œ๋ฅผ ์ค‘์ฒฉํ•  ์ˆ˜ ์žˆ๋‚˜์š”?
๊ทธ๋ฆฌ๋“œ ์•ˆ์— ๊ทธ๋ฆฌ๋“œ๋ฅผ ์ค‘์ฒฉํ•  ์ˆ˜ ์žˆ๋‚˜์š”? ์˜ˆ, ๊ทธ๋ฆฌ๋“œ ํ•ญ๋ชฉ์€ ๊ทธ๋ฆฌ๋“œ ์ปจํ…Œ์ด๋„ˆ ์ž์ฒด๊ฐ€ ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ํŽ˜์ด์ง€ ๊ทธ๋ฆฌ๋“œ๋ฅผ ๋งŒ๋“  ๋‹ค์Œ ์‚ฌ์ด๋“œ๋ฐ”๋‚˜ ์ฝ˜ํ…์ธ  ์˜์—ญ๊ณผ ๊ฐ™์€ ๊ฐœ๋ณ„ ์„น์…˜์— ์ค‘์ฒฉ ๊ทธ๋ฆฌ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”.