[HTML][CSS] 이미지 스프라이트 (Image Sprite)

 이미지 스프라이트(Image Sprite) 

 

: 여러 이미지를 하나의 이미지 파일에 저장 

 이것을 css를 통해 좌표를 이용해 각각의 이미지로 쓰는 기법

 

 

사용할 이미지

>> 하나의 이미지 파일 안에 4개의 아이콘이 있다.

 

1. 화살표 방향대로 up,down,right,left 4개의 class

 

    <div class="up"></div>
    <div class="down"></div>
    <div class="right"></div>
    <div class="left"></div>

 

2. css - background 이미지 불러오기

 

up,.down,.left,.right{background: url(../images/image_sprites.png);}

 

3. 각각 아이콘마다 크기, 좌표 알아내기

 

그림판-크기,좌표

- 그림판에서 이미지 위에 마우스를 움직여 보면 아래에 좌표가 뜬다.

 

좌표

- 이 좌표를 보고 가로,세로 크기와 아이콘들의 좌표를 지정한다.

 

4. css에서 지정하기

 

.up{width: 21px;height: 20px;background-position: 0,0;}
.down{width: 21px;height: 20px;background-position: -21px,0;}
.left{width: 21px;height: 20px;background-position: -42px,0;}
.right{width: 21px;height: 20px;background-position: -65px,0;}

 

background-position으로 아이콘이 시작되는 좌표를 지정

음수값을 쓰는 이유를 정확히 모르겠지만 나는 이미지 스프라이트가 이해는 되었다.

 

이미지스프라이트

>> 이미지 스프라이트 기법으로 각각의 아이콘을 사용할 수 있다.