์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ(Image Sprite) | ir ํšจ๊ณผ | ๋ฐฑ๊ทธ๋ผ์šด๋“œ ํ‘œํ˜„

์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ(Image Sprite) | ir ํšจ๊ณผ | ๋ฐฑ๊ทธ๋ผ์šด๋“œ ํ‘œํ˜„ ์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ(Image Sprite), ir ํšจ๊ณผ, ๋ฐฑ๊ทธ๋ผ์šด๋“œ ํ‘œํ˜„์— ๋Œ€ํ•ด ์•Œ์•„๋ด…์‹œ๋‹ค. CSS ์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ(Image Sprite) ์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ(image sprite)๋ž€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ด๋ฏธ์ง€๋ฅผ ํ•˜๋‚˜์˜ ์ด๋ฏธ์ง€๋กœ ํ•ฉ์ณ์„œ ๊ด€๋ฆฌํ•˜๋Š” ์ด๋ฏธ์ง€๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€ ์Šคํ”„๋ผ์ดํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด๋ฏธ์ง€๋ฅผ ๋‹ค์šด๋ฐ›๊ธฐ ์œ„ํ•œ ์„œ๋ฒ„ ์š”์ฒญ์„ ๋‹จ ๋ช‡ ๋ฒˆ์œผ๋กœ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, ๋งŽ์€ ์ด๋ฏธ์ง€ ํŒŒ์ผ์„ ๊ด€๋ฆฌํ•˜๋Š” ๋Œ€์‹  ๋ช‡ ๊ฐœ์˜ ์Šคํ”„๋ผ์ดํŠธ ์ด๋ฏธ์ง€(sprite image) ํŒŒ์ผ๋งŒ์„ ๊ด€๋ฆฌํ•˜๋ฉด ๋˜๋ฏ€๋กœ ๋งค์šฐ ๊ฐ„ํŽธํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ์ œ figma ๋‹ค์Œ ์˜ˆ์ œ๋Š” ํ•˜๋‚˜์˜ ์ด๋ฏธ์ง€๋ฅผ ๊ฐ€์ง€๊ณ  6๊ฐœ์˜ ์•„์ด์ฝ˜์„ ๋งŒ๋“œ๋Š” ์˜ˆ์ œ์ž…๋‹ˆ๋‹ค. 6๊ฐœ์˜ ์•„์ด์ฝ˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด 6๊ฐœ์˜ ์ด๋ฏธ์ง€๋ฅผ ์‚ฌ์šฉํ•˜๋Š”..

CSS 2022. 8. 20. 17:12
๊ณต์ง€์‚ฌํ•ญ