[ CSS ] Image Sprites

seondayยท2022๋…„ 11์›” 1์ผ
0

HTML/CSS

๋ชฉ๋ก ๋ณด๊ธฐ
8/8
post-thumbnail



๐Ÿ‘‡ ๋ณต์Šตํ•˜๊ณ  ๋„˜์–ด๊ฐ€๊ธฐ

"์ด๋ฏธ์ง€์™€ ๋ฐฐ๊ฒฝ"


๐Ÿ’ก ์›นํŽ˜์ด์ง€์— ์ด๋ฏธ์ง€๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•

HTML ๐Ÿ“– < img > ํƒœ๊ทธ๋กœ ์ด๋ฏธ์ง€ ๋„ฃ๊ธฐ
-ํฌํ„ธ์‚ฌ์ดํŠธ์—์„œ ์ด๋ฏธ์ง€ ๊ฒ€์ƒ‰์— ๋…ธ์ถœ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ
-์›นํŽ˜์ด์ง€์—์„œ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•˜๋Š” ๊ฒฝ์šฐ
โœจ ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋“œ ๋˜์ง€ ์•Š์•˜์„๋•Œ, alt ์†์„ฑ ์•ˆ์˜ ๊ฐ’์œผ๋กœ ๋Œ€์ฒด ํ‘œํ˜„๋จ(background-image๋Š” alt ์†์„ฑ์ด ์—†๋‹ค.โŒ)

<img src="" alt=""/>

-ํ”„๋ฆฐํŠธ๋ฅผ ํ–ˆ์„ ๋•Œ ์ถœ๋ ฅ์ด ๋˜์–ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ


CSS ๐Ÿ“– background-image ์†์„ฑ์œผ๋กœ ์ด๋ฏธ์ง€ ๋„ฃ๊ธฐ
-์ด๋ฏธ์ง€ ์œ„๋กœ ํ…์ŠคํŠธ๊ฐ€ ๋“ค์–ด๊ฐˆ ๊ฒฝ์šฐ
-๋‹จ์ˆœ ๋””์ž์ธ์  ์š”์†Œ์ผ ๊ฒฝ์šฐ
-๋ฐ˜๋ณต๋˜๋Š” ์ด๋ฏธ์ง€์ธ ๊ฒฝ์šฐ(ex. ์•„์ด์ฝ˜)
-โœจ ์›นํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„์™€ ๊ด€๋ จ์žˆ๋Š” ๊ฒฝ์šฐ -> "Image Sprites"


๐Ÿ‘‰ ์›นํŽ˜์ด์ง€์—์„œ ์ด๋ฏธ์ง€๊ฐ€ ์‚ฌ์šฉ๋  ๊ฒฝ์šฐ ํ•ด๋‹น ์ด๋ฏธ์ง€๋ฅผ ๋‹ค์šด๋ฐ›๊ธฐ ์œ„ํ•ด ์›น ๋ธŒ๋ผ์šฐ์ €๋Š” ์„œ๋ฒ„์— ์ด๋ฏธ์ง€๋ฅผ ์š”์ฒญํ•˜๊ฒŒ ๋œ๋‹ค

์‚ฌ์šฉ ์ด๋ฏธ์ง€, ์›น ๋ธŒ๋ผ์šฐ์ € ์š”์ฒญ์ˆ˜ ์ฆ๊ฐ€ = ๊ธด ๋กœ๋”ฉ ์‹œ๊ฐ„ ๐Ÿ˜ก



โœ… Image Sprites

์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ด๋ฏธ์ง€๋ฅผ ํ•˜๋‚˜์˜ ์ด๋ฏธ์ง€๋กœ ํ•ฉ์ณ ๊ด€๋ฆฌํ•˜๋Š” ์ด๋ฏธ์ง€

์‚ฌ์šฉ ์ด๋ฏธ์ง€, ์›น ๋ธŒ๋ผ์šฐ์ € ์š”์ฒญ์ˆ˜ ๊ฐ์†Œ = ์งง์€ ๋กœ๋”ฉ ์‹œ๊ฐ„ ๐Ÿ˜Œ


์ด ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฉด < img >๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ ๋ณด๋‹ค ์„œ๋ฒ„ ์š”์ฒญ ์ˆ˜๋ฅผ ์ค„์—ฌ ์›นํŽ˜์ด์ง€์˜ ๋กœ๋”ฉ ์‹œ๊ฐ„์„ ๋‹จ์ถ•ํ•ด์ฃผ๋Š” ํšจ๊ณผ๊ฐ€ ์žˆ๋‹ค ๋˜ํ•œ, ๋ช‡๊ฐœ์˜ ์Šคํ”„๋ผ์ดํŠธ ์ด๋ฏธ์ง€๋งŒ ๊ด€๋ฆฌํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์œ ์ง€๋ณด์ˆ˜ ๊ด€๋ฆฌ ์ธก๋ฉด์—์„œ๋„ ๋งค์šฐ ๊ฐ„ํŽธํ•˜๋‹ค



๐Ÿ“Œ Image Sprites ์—ฐ์Šตํ•ด๋ณด๊ธฐ

HTML>
<div class="fullImg"></div>

CSS>
div {
      width: 360px;
      height: 320px;
      background: url(./mario.png) no-repeat;
    }


๐Ÿ’ก ๋งˆ๋ฆฌ์˜ค๋งŒ ๋ณด์—ฌ์ฃผ๊ธฐ

HTML>
<div class="mario"></div>

CSS>
div {
      width: 180px;
      height: 320px;
      background: url(./mario.png) no-repeat;
    }
    
.mario {
      background-position: 0px 0px; /* default๊ฐ’, ์ƒ๋žต ๊ฐ€๋Šฅ*/
    }


๋งˆ๋ฆฌ์˜ค์˜ ๊ฒฝ์šฐ์—๋Š” ๋ณด์—ฌ์ง€๋Š” ์ปจํ…Œ์ด๋„ˆ์ธ div์˜ ์‚ฌ์ด์ฆˆ๋งŒ ์กฐ์ ˆํ•ด๋„ ๋ฃจ์ด์ง€๊ฐ€ ๊ฐ€๋ ค์ ธ์„œ background-position ์†์„ฑ์„ ์‚ฌ์šฉํ•  ํ•„์š”๋Š” ์—†์–ด ๊ธฐ๋ณธ๊ฐ’์ธ 0px, 0px๋กœ ์„ธํŒ…ํ•ด๋‘์—ˆ๋‹ค


๐Ÿ’ก ๋ฃจ์ด์ง€๋งŒ ๋ณด์—ฌ์ฃผ๊ธฐ

HTML>
<div class="luigi"></div>

CSS>
div {
      width: 180px;
      height: 320px;
      background: url(./mario.png) no-repeat;
    }
    
.luigi {
      background-position: -180px 0px;
    }

background-position ์ฐธ๊ณ 
background-position-CSS | MDN

background-position์†์„ฑ์„ ์‚ฌ์šฉํ•ด ์ปจํ…Œ์ด๋„ˆ์ธ div ์‚ฌ์ด์ฆˆ ์•ˆ์—์„œ ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง€๋งŒ ์ด๋™์‹œ์ผœ ์›ํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ๋ณด์ด๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋‹ค

๊ฐœ์ธ์ ์œผ๋กœ ํฌํ† ์ƒต์—์„œ ๋ ˆ์ด์–ด ๋งˆ์Šคํฌ ๊ธฐ๋Šฅ๊ณผ ๋น„์Šทํ•œ ๋Š๋‚Œ?

์•„์ง ์ต์ˆ™์น˜ ์•Š์•„์„œ ๊ทธ๋Ÿฐ์ง€, ์ฒ˜์Œ์—” ์ขŒํ‘œ์ฐพ๋Š๋ผ ์ง„๋•€ ์ข€ ๋บ๋‹ค. ๋” ๋ณต์žกํ•œ ๊ฒƒ ๊ฐ™์€ ๋Š๋‚Œ๋„ ๋“ค์—ˆ๋Š”๋ฐ, ๋‹ค๋ค„์•ผํ•˜๋Š” ์†Œ์Šค๋“ค์ด ๋งŽ์•„์ง€๊ฒŒ ๋˜๋ฉด ์ง์ ‘ ๋งํฌ๋ฅผ ์ง€์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•๋ณด๋‹ค ์Šคํ”„๋ผ์ดํŠธ ๊ธฐ๋ฒ•์ด ์œ ์ง€๋ณด์ˆ˜ ์ธก๋ฉด์—์„œ ๋” ํšจ์œจ์ ์ธ ๋ฐฉ๋ฒ•์ธ ๋“ฏ ํ•˜๋‹ค !



๐Ÿ“Œ Image Sprites ์‚ฌ์šฉ์‹œ ์ฃผ์˜ํ•  ์ 

โ—๏ธ< img > ๊ฐ€ ์•„๋‹Œ background-image๋กœ ์ฒ˜๋ฆฌ๋˜๋ฏ€๋กœ alt์†์„ฑ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค !
โ—๏ธ์ด๋ฏธ์ง€ ๊ฐœ์ˆ˜๊ฐ€ ๋Š˜์–ด๋‚˜๋ฉด ์Šคํ”„๋ผ์ดํŠธ ์ž์ฒด์˜ ์šฉ๋Ÿ‰๋„ ์ปค์ง„๋‹ค๋Š” ์  !
โ—๏ธ์ผ๋ถ€ ์ด๋ฏธ์ง€ ๋˜๋Š” ๋กœ๊ณ  ๋“ฑ์˜ ์ˆ˜์ •์ด ํ•„์š”ํ•  ์‹œ ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ๊นŒ๋‹ค๋กญ๋‹ค๋Š” ์  !

โœจ ๋”ฐ๋ผ์„œ, ์›ฌ๋งŒํ•ด์„  ์ˆ˜์ •์ด ์—†๋Š” ์ด๋ชจํ‹ฐ์ฝ˜์ด๋‚˜ ๋กœ๊ณ  ๋“ฑ์— ์ž์ฃผ ์‚ฌ์šฉ๋œ๋‹ค !



๐Ÿ“Œ CSS Sprites Generator

CSS Sprites Generator Tool
๊ทธ๋Ÿผ ๊ทธ ์Šคํ”„๋ผ์ดํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๋„ ์ผ์ด๊ฒ ๊ตฌ๋‚˜, ํ–ˆ๋Š”๋ฐ ๊ตฌ๊ธ€๋ง์„ ํ•ด๋ณด๋‹ˆ ์ด๋ฏธ ์žˆ๋”๋ผ,, ๐Ÿ˜Š
์›ํ•˜๋Š” ์ด๋ฏธ์ง€๋“ค์„ ๋„ฃ์œผ๋ฉด ์ด๋ฏธ์ง€์˜ ๊ฐ„๊ฒฉ(padding)๊ณผ ๋ฐฐ์น˜ ๋ฐฉํ–ฅ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ๋‹ค

background-image์˜ ์œ„์น˜๋„ ๋‚˜์˜จ๋‹ค ! (๐Ÿ‘๐Ÿป)


โœจ CSS Sprites Generator๋กœ ์ƒ์„ฑํ•ด๋ณธ ์Šคํ”„๋ผ์ดํŠธ ์ด๋ฏธ์ง€





profile
๋งค์ผ ๊ธฐ๋กํ•˜๋Š” ์Šต๊ด€,

0๊ฐœ์˜ ๋Œ“๊ธ€