[CSS] Image sprite

이미지 스프라이트는 여러개의 이미지를 따로 저장하고 불러올필요 없이,

한 파일에 여러개의 이미지를 저장하고 그 이미지의 좌표를 불러오는 방법이다.

 

이미지 스프라이트 제작 사이트

https://www.toptal.com/developers/css/sprite-generator/

CSS Sprites Generator

 

.logo1, .logo2, .logo3 {
	background-image: url(./images/sprite.png); /* 이미지 스프라이트를 배경이미지로 지정 */
	background-repeat: no-repeat; /* 이미지 반복 안함 */
}
.logo1 {
background-position: -410px -220px; /* 원하는 이미지의 좌표 설정 */
width: 270px; /* 이미지의 크기 설정 */
height: 50px;
}

이미지 좌표를 구해야 할 때는 사진 뷰어, 그림판, 포토샵 같은 툴로 확인 할 수 있다.