웹페이지 로딩시에 좋은 퍼포먼스를 내기 위해서 HTTP리퀘스트를 줄이려는 일환으로 CSS Sprite를 많이 사용합니다. 이때 css의 background-position으로 이미지에서 보여질 위치를 잡아주게 되는데 이 작업이 좀 번거롭지요.
이미지에 요소가 많을경우 하나씩 잡다보면 순서를 빼먹거나 background-position 계산을 잘못하여 삽질을 했었는데 간단하게 background-position 코드를 만들고, 기존에 만들어진 소스를 수정할수 있는 툴을 만들어 봤습니다.
CSS Position - http://www.uix.kr/css-position/
배경 이미지주소(background-image)를 적고 첫 position과 증가하게될 값을 넣으면 자동으로 css코드를 만들어줍니다. 만들어진 소스로 미리보기도 가능하구요
만들어놓고 블로깅하려고 이것저것 검색하다보니 역시나 비슷한 서비스가 있네요 ^^;
http://spritegen.website-performance.org/
그 외
이미지에 요소가 많을경우 하나씩 잡다보면 순서를 빼먹거나 background-position 계산을 잘못하여 삽질을 했었는데 간단하게 background-position 코드를 만들고, 기존에 만들어진 소스를 수정할수 있는 툴을 만들어 봤습니다.
CSS Position - http://www.uix.kr/css-position/
배경 이미지주소(background-image)를 적고 첫 position과 증가하게될 값을 넣으면 자동으로 css코드를 만들어줍니다. 만들어진 소스로 미리보기도 가능하구요
만들어놓고 블로깅하려고 이것저것 검색하다보니 역시나 비슷한 서비스가 있네요 ^^;
http://spritegen.website-performance.org/
그 외
- 서비스 로고는 Logo Creatr 에서 만듬
- form 디자인은 여기꺼
- tab메뉴 또한 free 소스
- image width,height를 백단에서 체크하면 좋은데 호스팅서버인지라 부득이하게 클라이언트에서 체크후 넘김
- 이미지를 업로드하면 sprite용 이미지로 만들어주는 서비스
'One Page Project' 카테고리의 다른 글
| 직관적인 UI - 타임라인 (0) | 2009/08/26 |
|---|---|
| 미디어다음 뉴스를 Twitter로 공유하기, midamTweet (0) | 2009/07/19 |
| 다음뷰 '누굴 추천했을까?' (8) | 2009/06/26 |
| CSS Position 쉽게 만들기 (0) | 2009/05/22 |
| 뉴스 + Daum지도 = nView (2) | 2009/04/15 |
| 블로거뉴스 베스트리더 (2) | 2009/04/06 |
댓글을 달아 주세요