Transparent White Star

๐Ÿ“Œ ์ „์ฒด ๊ฒŒ์‹œ๊ธ€ ๋ชฉ๋ก

.container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}์„ค๋ช…repeat(3, 1fr):repeat ํ•จ์ˆ˜๋Š” ๋ฐ˜๋ณต์ ์ธ ๊ทธ๋ฆฌ๋“œ ํŠธ๋ž™์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.์ฒซ ๋ฒˆ์งธ ์ธ์ˆ˜์ธ 3์€ ๋ฐ˜๋ณต ํšŸ์ˆ˜๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ๋Š” 3๋ฒˆ ๋ฐ˜๋ณต๋ฉ๋‹ˆ๋‹ค.๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜์ธ 1fr์€ ๊ฐ ํŠธ๋ž™์˜ ํฌ๊ธฐ๋ฅผ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ 1fr์€ ๊ทธ๋ฆฌ๋“œ ์ปจํ…Œ์ด๋„ˆ ๋‚ด์˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ณต๊ฐ„์˜ ๋น„์œจ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.fr ๋‹จ์œ„fr(Fraction Unit):fr ๋‹จ์œ„๋Š” CSS Grid์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๊ณต๊ฐ„์„ ๋ถ„ํ• ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.์˜ˆ๋ฅผ ๋“ค์–ด, 1fr์€ ๊ฐ€์šฉ ๊ณต๊ฐ„์˜ 1๋ถ€๋ถ„์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๋Ÿฌ fr ๊ฐ’์ด ์žˆ์„ ๋•Œ, ๊ฐ๊ฐ์˜ ๊ฐ’์€ ์ „์ฒด ๊ฐ€์šฉ ๊ณต๊ฐ„์˜ ๋น„์œจ์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.