■ 이미지 스프라이트(Image Sprite)란?
- 배경이미지를 적용할 경우 각각의 요소에 들어가는 배경이미지를 낱개로 만들지 않고 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에 background-position을 이용하여 배경이미지를 배치하는 방법
- 이미지가 많은 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 시간이 오래 걸릴 수 있습니다. 이미지 스프라이트를 사용하면 서버 요청 수가 감소하고 대역폭이 절약됩니다.
네이버의 경우에 메인화면에서 다음과 같은 Image Sprite를 사용하고 있고,
다음의 경우에는 다음과 같은 Image Sprite를 사용하고 있답니다. (여러개로 쪼개져 있는데 그 중 하나에요^^)
전 메뉴바를 이미지 스프라이트를 이용해서 만들어 보겠습니다.
기본 상태와 마우스 오버되었을 때 효과를 적용할꺼에요.
이렇게 생긴 이미지 두개를 준비했어요^^
 |  |
■ 예시
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Image Sprite</title> <style type="text/css"> *{margin:0; padding:0;} body{padding: 50px;} h2{margin-bottom: 20px;} .gnb{ background-image:url(images/mm.jpg); background-repeat:no-repeat; width: 120px; height 25px; text-indent: -9999px; } .g2{background-position: 0 -25px;} .g3{background-position: 0 -50px;} .gnb:hover{ background-image:url(images/mm_hover.jpg); background-repeat:no-repeat; width: 120px; height 25px; text-indent: -9999px; } </style> </head> <body> <h2>Image Sprite</h2> <p class="gnb">menu1</p> <p class="gnb g2">menu2</p> <p class="gnb g3">menu3</p> </body> </html> |
■ 결과화면
※ 간단하게 만든 거 치고 나름 괜찮은 것 같아요ㅎㅎ 로고나 화살표 같은 것들을 넣어놓으면 얼마든지 가져다 쓰기가 편하겠죠?
※ 배경 이미지의 포지션에 대해서 궁금하다면, CSS 박스모델 - 배경(background) 이 글을 참고해주세요^^
간단히 설명하면,
이미지의 시작은 x좌표 : 0, y좌표 : 0 입니다.
Image Sprite 중에 오른쪽에 있는 이미지를 보여주고 싶다면 이미지를 왼쪽 바깥쪽으로 당기기위해 x좌표에 마이너스(-) 값을 넣으면 됩니다.
Image Sprite 중에 아래쪽에 있는 이미지를 보여주고 싶다면 이미지를 위쪽 바깥쪽으로 당기기 위해 y좌표에 마이너스(-) 값을 넣으면 되구요.
안쪽, 바깥쪽, 플러스(+) 값, 마이너스(-) 값에 대해서 이해한다면 좀 쉬울 것 같아요.
잘 이해가 안된다면, 예제를 통해서 직접 확인해보세요^^ 아무래도 직접 만져보고 눈으로 확인하는게 가장 좋죠.
클릭하시면 w3school CSS Image Sprite 실행 화면으로 이동합니다. 값을 이렇게 저렇게 바꿔가면서 이미지가 어디로 이동하고, 어떻게 보이는지 확인하시면 좋을 것 같아요.