반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

CSS Sprite Image 관련 팁

2012. 8. 16. 17:41 | Posted by 솔웅


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번 로딩을 시도해서 그 평균값을 표시해 줍니다.

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


반응형

Comment

  1. 미트라 2012.12.27 02:47

    개발자시군요 ^^ 자주 와서 배워야겠어요

    • 솔웅 2012.12.27 10:32 신고

      예 자주 자주 들러 주세요.
      저도 '빛을 다루는 사람들' 자주 들를께요. ^^
      감사합니다.