๐Ÿ”ณ๊ทธ๋ฆฌ๋“œ ์ปฌ๋Ÿผ ๋„ˆ๋น„ ๋ฐ ๊ฑฐํ„ฐ ๊ณ„์‚ฐ๊ธฐ

์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„ยท์ปฌ๋Ÿผ ์ˆ˜ ๊ธฐ๋ฐ˜ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ ์„ค๊ณ„

px
px
px
ํ•ญ๋ชฉ๊ฐ’
์ฝ˜ํ…์ธ  ์˜์—ญ ๋„ˆ๋น„โ€” px
๊ฑฐํ„ฐ ์ดํ•ฉโ€” px
์ปฌ๋Ÿผ ๋„ˆ๋น„ ร— ์ปฌ๋Ÿผ ์ˆ˜โ€” px

๊ทธ๋ฆฌ๋“œ ์ปฌ๋Ÿผ๊ณผ ๊ฑฐํ„ฐ ๊ณ„์‚ฐ๋ฒ•

์›นยท์•ฑ ๋””์ž์ธ์—์„œ ๊ทธ๋ฆฌ๋“œ ์‹œ์Šคํ…œ์€ ํ™”๋ฉด์„ ์ผ์ •ํ•œ ์ปฌ๋Ÿผ์œผ๋กœ ๋‚˜๋ˆ„์–ด ์š”์†Œ๋ฅผ ์ •๋ ฌํ•˜๋Š” ๊ธฐ์ค€์ž…๋‹ˆ๋‹ค. ์ปฌ๋Ÿผ ๋„ˆ๋น„๋Š” (์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„ โˆ’ ์ขŒ์šฐ ๋งˆ์ง„ โˆ’ ๊ฑฐํ„ฐ ์ดํ•ฉ) รท ์ปฌ๋Ÿผ ์ˆ˜๋กœ ๊ณ„์‚ฐํ•ฉ๋‹ˆ๋‹ค. ๊ฑฐํ„ฐ๋Š” ์ปฌ๋Ÿผ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์œผ๋กœ ์ปฌ๋Ÿผ ์ˆ˜๋ณด๋‹ค 1๊ฐœ ์ ๊ฒŒ ๋“ค์–ด๊ฐ€๋ฉฐ, ๋งˆ์ง„์€ ์ปจํ…Œ์ด๋„ˆ ์ขŒ์šฐ ๋ฐ”๊นฅ์ชฝ์— ๊ฐ๊ฐ ํ•˜๋‚˜์”ฉ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด 1200px ์ปจํ…Œ์ด๋„ˆ์— 12์ปฌ๋Ÿผ, ๊ฑฐํ„ฐ 24px, ๋งˆ์ง„ 24px์„ ์ ์šฉํ•˜๋ฉด ์ฝ˜ํ…์ธ  ์˜์—ญ์€ 1200 โˆ’ 48 = 1152px์ด ๋˜๊ณ , ๊ฑฐํ„ฐ ์ดํ•ฉ์€ 24 ร— 11 = 264px์ด๋ฏ€๋กœ ์ปฌ๋Ÿผ ๋„ˆ๋น„๋Š” (1152 โˆ’ 264) รท 12 = 74px์ด ๋ฉ๋‹ˆ๋‹ค. ๋ฐ์Šคํฌํ†ฑ์€ 12์ปฌ๋Ÿผ, ํƒœ๋ธ”๋ฆฟ์€ 8์ปฌ๋Ÿผ, ๋ชจ๋ฐ”์ผ์€ 4~6์ปฌ๋Ÿผ ๊ทธ๋ฆฌ๋“œ๊ฐ€ ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค.

๊ณ„์‚ฐ๋œ ์ปฌ๋Ÿผ ๋„ˆ๋น„๋Š” CSS Grid์˜ grid-template-columns, Flexbox์˜ % ๊ฐ’, ๋˜๋Š” fr ๋‹จ์œ„๋กœ ๋ฐ”๋กœ ์ ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Figma๋‚˜ Sketch ๊ฐ™์€ ๋””์ž์ธ ํˆด์—์„œ๋„ ๋™์ผํ•œ ๊ฐ’์œผ๋กœ ๋ ˆ์ด์•„์›ƒ ๊ทธ๋ฆฌ๋“œ๋ฅผ ์„ค์ •ํ•˜๋ฉด ๋””์ž์ธ-๊ฐœ๋ฐœ ๊ฐ„ ์ •ํ•ฉ์„ฑ์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž์ฃผ ๋ฌป๋Š” ์งˆ๋ฌธ

๊ฑฐํ„ฐ์™€ ๋งˆ์ง„์˜ ์ฐจ์ด๋Š” ๋ฌด์—‡์ธ๊ฐ€์š”?

๊ฑฐํ„ฐ๋Š” ์ปฌ๋Ÿผ ์‚ฌ์ด ๊ฐ„๊ฒฉ, ๋งˆ์ง„์€ ์ปจํ…Œ์ด๋„ˆ ์ขŒ์šฐ ๋ฐ”๊นฅ์ชฝ ์—ฌ๋ฐฑ์ž…๋‹ˆ๋‹ค.

์ปฌ๋Ÿผ ์ˆ˜๋Š” ๋ช‡ ๊ฐœ๊ฐ€ ์ ๋‹นํ•œ๊ฐ€์š”?

๋ฐ์Šคํฌํ†ฑ์€ 12์ปฌ๋Ÿผ, ํƒœ๋ธ”๋ฆฟ์€ 8์ปฌ๋Ÿผ, ๋ชจ๋ฐ”์ผ์€ 4~6์ปฌ๋Ÿผ์ด ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค.

์ปฌ๋Ÿผ ๋„ˆ๋น„๊ฐ€ ์†Œ์ˆ˜์ ์œผ๋กœ ๋‚˜์˜ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•˜๋‚˜์š”?

CSS Grid์˜ fr ๋‹จ์œ„๋‚˜ % ๊ฐ’์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋ฉด ๋ฐ˜์‘ํ˜•์—์„œ๋„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ฒ˜๋ฆฌ๋ฉ๋‹ˆ๋‹ค.