[CSS] Image-Sprite

Image-Sprite(이미지 스프라이트)란 하나의 이미지 파일에 여러 개의 이미지를 넣어 관리하는 것이다. 

백문이 불여일견, 바로 이미지 파일로 보자. 

출처: Google

보통 게임같은 애니메이션이 들어간 곳에서 쓰이며, 하나의 이미지에서 픽셀(px) 위치만 다르게하여 잘라 쓴다. 

왜냐하면 사용된 이미지가 많을 경우, 웹 브라우저가 이미지 수 만큼 서버에 요청해야 해서 로딩 시간이 오래 걸리기 때문이다. 

 

인스타그램의 좋아요, 댓글, 책갈피 기능도 HTML로 값을 다르게 주면 위치가 바뀌는걸 볼 수 있다. 

인스타그램 페이지. 관리자도구에서 숫자를 바꾸면 이미지가 움직이는 것을 볼 수 있다

 

이미지 스프라이트는 CSS의 background 속성으로 바꿀 수 있다. 

 

background 속성

background는 font 속성과 비슷하게 세부적인 속성들을 한 번에 쓸 수 있다. 

 

속성	의미	값
background-color	배경 색	영문색상명, Hex값, rgb값
background-image	배경 이미지	url("이미지 경로")
background-repeat	배경 이미지 반복 여부	no-repeat; repeat-x; repeat-y; repeat;
background-position	배경 이미지 위치	px값 or left/top/center/bottom/right

 

이미지 스프라이트의 경우, background-positon의 px값으로 많이 사용한다.

 

See the Pen NWqVoeQ by howdy-mj (@howdy-mj) on CodePen.

위에서 .img는 눈을 뜬 앵그리버드이고, .img-2는 눈을 감은 앵그리버드이다. 제일 위 이미지의 제일 좌측 1, 2번 그림이다. 

우선 height, width는 해당 이미지에서 하나의 캐릭터가 얼마나 차지하고 있는지 재야한다. 빨간색 앵그리버드의 경우 가로, 세로 모두 110px이다. 

눈을 뜬 앵그리버드는 position을 따로 설정해주지 않아도 height, width 값으로 제일 처음 것이 나온다. 

눈을 감은 앵그리버드는 background-position에 값을 주어 바꿔줘야 한다. backgrond-position에서 px을 사용할 경우 left top 순으로 쓰면 된다. 

눈을 감은 앵그리버드는 left 픽셀 값은 같기 때문에 0을 주었고, top의 경우 눈을 뜬 앵그리버드보다 아래 있기 때문에 -110px을 주었다. 

 

직접 이미지를 보면서 따라해보면 더 쉽게 알 수 있을 것이다.