CSS Sprite Image 관련 팁

CSS Sprite Image 작업을 할 때 고민 되는 거는 어떻게 여러 이미지를 한개의 이미지로 만들고 이것을 어떻게 CSS로 코드화 하느냐 입니다.

코로나 SDK 에서도 Sprite Image 작업을 할 때 똑같은 문제가 있습니다.

코로나의 경우엔 3rd party 프로그램으로 손쉽게 할 수 있었는데요.

CSS Sprite Image 도 이 작업을 도와주는 툴이 있습니다.

CSS Sprite Generator 웹 사이트로 가면 되는데요.

웹 주소는 아래와 같습니다.

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

가 보시면 한국말/조선말 로도 서비스가 됩니다.

사용 방법은 Sprite 로 만들 여러 이미지들을 zip 파일로 압축합니다.

그리고 위의 Choose File 버튼을 누르고 업로드 합니다.

그리고 나서 맨 아래에 있는 CSS Sprite Image & CSS 버튼을 누르면 됩니다.

그러면 위와 같은 결과가 나오는데요.

저 CSS 코드는 긁어다가 활용하시면 되구요.

Sprite Image는 아래 Download Sprite Image 버튼을 눌러서 다운 받으시면 됩니다.

그리고 또 한가지 팁으로 웹 로딩 속도를 테스트 하는 페이지가 있는데요.

http://webwait.com/

사용 방법은 왼쪽 위에 웹 주소를 넣고 (로컬 컴퓨터에 아파치 같은 웹 서버가 깔려 있으면 localhost 도 작동 하더라구요.) 버튼을 누릅니다.

그러면 5번 로딩을 시도해서 그 평균값을 표시해 줍니다.

로딩 시도 횟수는 마음대로 정하실 수도 있습니다.