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 버튼을 눌러서 다운 받으시면 됩니다.
그리고 또 한가지 팁으로 웹 로딩 속도를 테스트 하는 페이지가 있는데요.
사용 방법은 왼쪽 위에 웹 주소를 넣고 (로컬 컴퓨터에 아파치 같은 웹 서버가 깔려 있으면 localhost 도 작동 하더라구요.) 버튼을 누릅니다.
그러면 5번 로딩을 시도해서 그 평균값을 표시해 줍니다.
로딩 시도 횟수는 마음대로 정하실 수도 있습니다.
'WEB_APP > HTML5' 카테고리의 다른 글
CSS Image Sprites 실습 해 보기 (0) | 2012.08.16 |
---|---|
HTML5 CSS Text wrapping (Google) (0) | 2012.02.04 |
HTML5 CSS3 Flexible Box Model (0) | 2012.02.02 |
HTML5 CSS3 Animation and Adobe Dreamweaver (0) | 2012.01.30 |
HTML5 CSS Columns Google (0) | 2012.01.27 |
HTML5 CSS Transform (Google) (0) | 2012.01.26 |
HTML5 Transitions (-webkit-transition) (0) | 2012.01.20 |
HTML5 Geolocation (구글 지도에 현위치 표시하기) (3) | 2012.01.19 |
HTML5 Better semantic tags (0) | 2012.01.18 |
HTML5 Speech Input (음성인식) API (0) | 2012.01.16 |