Programming/HTML CSS
스프라이트(sprite) 이미지(image)란 아래의 경우처럼 여러 이미지(image)를 한곳에 모아놓은 형태를 말합니다.

▶ 마리오(mario) 관련 스프라이트(sprite)

웹(web)에서 불러와야 하는 이미지(image)가 여러개인 경우 그 만큼의 요청을 해야 하지만 스프라이트(sprite) 이미지(image)를 사용하면 한번 요청으로 여러 이미지(image)를 한번에 받아오는 이점을 갖게 됩니다.

포토샵(photoshop) 등의 툴(tool)등을 사용하여 직접 스프라이트(sprite)를 만들 수도 있으나 아래와 같은 사이트(site)를 이용하면 간단하게 스프라이트(sprite)를 생성할 수 있습니다.

http://csssprites.com/

예제에서는 세개의 이미지(image)를 사용하여 아래와 같은 스프라이트(sprite)를 생성하였습니다.


스프라이트(sprite)가 생성되면 다음과 같이 생성된 스프라이트(sprite) 이미지(image)를 어떻게 사용할 수 있는지에 대한 css 코드(code)도 함께 보여집니다.


해당 css를 참고하여 html을 구성하면 다음과 같이 할 수 있을 것입니다.

#main_div {
   width: 206px;
   height: 50px;
   background: url('result.png');
}
▶CSS
<div id="main_div">
</div>
▶HTML

각각의 버튼모양을 따로 표시하려면 background-position 속성을 사용합니다.
#main_div_1 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: 0px, 0px;
}

#main_div_2 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: -74px, 0px;
}

#main_div_3 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: -132px, 0px;
}
▶CSS
<div id="main_div_1">
</div>
<br />
<div id="main_div_2">
</div>
<br />
<div id="main_div_3">
</div>
▶HTML
0 0