[css] 스프라이트 이미지 사용하기

 

이미지 스프라이트 image sprite

웹사이트의 로딩시간을 줄이기 위해 하나의 이미지 파일에 여러개의 이미지가 포함되어 있는 것을 말한다.

주로 웹페이지들 곳곳에 들어가는 작은 아이콘들을 모아 하나의 이미지 스프라이트로 만들고 css의 background-position으로 가로 세로 위치를 지정해 사용한다.

 

 

 

 

https://spritegen.website-performance.org/

CSS Sprite Generator, Editor, and Code

 

 

사용법은 매우 간단한데

위 주소로 들어가서 clear 버튼을 한번 눌러준 후

open버튼을 클릭해서 스프라이트 이미지 만들 이미지들을 추가해주면 된다.

 

 

 

 

추가한 이미지들이 나오고 우측에 설정창이 나온다.

각자 취향에 맞게 레이아웃 설정해서 save버튼을 누르면 설정창이 사라진다.

 

 

 

 

아무것도 없다고 당황하지말고 연두색의 다운로드 버튼을 누르면 새 레이어로 요렇게 나온다.

하단 첫번째 버튼 spritesheet을 누르면 png 이미지만 저장되고

탭에 png / css / html 로 나누어져 사용하기 쉽게 이미지와 코드를 전부 제공해준다.