CSS
이미지 스프라이트 기법 (CSS Sprites Generator)
Liber Spiritus
2021. 8. 6. 23:29
여기에서 5:03 참조
방법은 정리 해봄.
구글에 "css image sprites generator" 검색후
CSS Sprites Generator 접속하여 sprite 이미지 생성,
생성시 background position도 전부 나와 있음.
아래가 CSS Sprites Generator 사이트
https://www.toptal.com/developers/css/sprite-generator/
CSS Sprites Generator
CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.)
www.toptal.com
위 사이트에서 해본 결과 물.
Padding between elements (px) : (기본) 10
Align elements : Left-right로 변경해야 해본 결과론 무난함.
보시다 시피 background-position 좌표값도 나오고, 오른쪽처럼 결과 화면도 나오는걸 볼수 있다.
