-여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 것을 말한다.
-웹페이지에서 이미지를 사용하면 이미지를 페이지에 띄울때 마다 서버에 요청을 해야한다. 사용된 이미지가 많으면 서버에 요청하는 일이 잦아져 로딩시간이 오래걸린다.
-이미지를 다운받기 위한 서버 요청을 몇 번으로 줄이고 웹페이지 로딩 시간을 단축하는 장점이 있다
-몇 개의 이미지 파일만 관리하면 되기때문에 간편하다.
사용법
background-image로 설정
원하는 이미지의 width , height, background-position 설정
이미지 각각 마다 클래스를 다르게 부여하고 background-position으로 원하는 이미지 위치를 변화시킨다.
ex) 클래스가 'sprite'인 이미지 안에 원하는 이미지의 크기가 가로 100px, 세로 100px이고 맨 윗줄 왼쪽에 위치한다고 가정.
.sprite{background-image : url(" "); width : 100px; height : 100px; background-position : left top; }
다른이미지를 사용하고 싶으면(이미지의 크기는 같고 첫번째 이미지 바로 옆에 위치한다고 가정)
.another{ background-position : 100px 0px;}
*background-position속성값
top, left, right, bottom, center
x %, y % (x는 left로부터 떨어진 정도, y는 top으로부터 떨어진 정도)
(px, cm, em... 도 사용가능)
