이미지 스프라이트 기법 (CSS Sprites Generator)
2021. 8. 6. 23:29ㆍCSS
여기에서 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 좌표값도 나오고, 오른쪽처럼 결과 화면도 나오는걸 볼수 있다.
'CSS' 카테고리의 다른 글
| 모바일 기기에서 수평 스크롤 없애기 (0) | 2021.08.22 |
|---|---|
| CSS 트랜지션(transition) 효과 사용 방법과 속성 - 이글 하나면 끝! (0) | 2021.08.21 |
| 웹폰트 최적화 하기 (0) | 2021.07.27 |
| 크로스 브라우징 (0) | 2021.07.07 |
| CSS / 체크박스 꾸미는 방법 (0) | 2021.06.25 |