유용한 참고링크) #5 스프레드(Sprite) 이미지 생성

스프레드 이미지를 선호하지 않기 때문에 

메모만 해두고 사용은 해보지 않았지만

테스트만 해봤는데도 유용할 것이라는 걸 알 수 있닫

 

css.spritegen.com/

CSS Sprite Generator

Create!

 

주르르르륵 이미지와 함께

 

 

CSS

/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */
 
.img-1, .img-2, .img-3, .img-4, .img-5, 
.img-6
{ max-width: 100%; background-size: 100%; background-image: url('jpeg.jpg'); }
 
.img-1 { background-position: 0 0%; background-size: 100%; }
.img-2 { background-position: 0 20%; background-size: 100%; }
.img-3 { background-position: 0 40%; background-size: 100%; }
.img-4 { background-position: 0 60%; background-size: 100%; }
.img-5 { background-position: 0 80%; background-size: 100%; }
.img-6 { background-position: 0 100%; background-size: 100%; }

 

HTML

<img class="img-1" alt="" src="data:image/png">
<img class="img-2" alt="" src="data:image/png">
<img class="img-3" alt="" src="data:image/png">
<img class="img-4" alt="" src="data:image/png">
<img class="img-5" alt="" src="data:image/png">
<img class="img-6" alt="" src="data:image/png">

 

 

 

 

 

더 좋은 UI를 제공하는 사이트들도 많으니 검색해보자