CSS 스프라이트 생성기

기능 소개

CSS 스프라이트 생성기는 아이콘이나 작은 이미지 묶음을 하나의 스프라이트 시트로 합치고, 각 이미지를 표시하는 CSS를 작성해 줍니다. PNG, SVG, GIF, JPG 파일을 추가하고 배치 방식을 고른 뒤, 스프라이트 PNG와 이미지마다 클래스가 하나씩 들어 있는 스타일시트를 함께 다운로드하세요.

클래스 이름은 파일 이름에서 만들어집니다. Home Icon.png는 .icon-home-icon이 되고, 이름이 겹치면 번호가 붙습니다. 빽빽하게 레이아웃은 빈 패킹(bin packing)으로 크기가 다른 이미지를 가장 작은 시트에 배치하고, 세로, 가로, 격자는 예측 가능한 위치를 제공합니다.

사용 방법

1. **이미지 추가…**를 누르고 아이콘을 선택합니다(예시 세트로 시작해도 됩니다).
2. 레이아웃과 간격을 고릅니다. 간격을 조금 두면 브라우저가 크기를 조정할 때 이웃한 아이콘이 서로 번져 보이는 것을 막을 수 있습니다.
3. 클래스 접두사와 background-image에 쓰일 스프라이트 파일 이름을 설정합니다.
4. 레티나 화면용으로 이미지를 두 배 크기로 그렸다면 @2x를 선택합니다.
5. PNG 다운로드와 CSS 다운로드를 눌러(디자인 도구나 채팅에 스프라이트를 붙여 넣으려면 이미지 복사) 두 파일을 모두 업로드한 뒤 클래스를 사용합니다: <span class="icon icon-home"></span>.

예시

.icon {
  display: inline-block;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

팁

• 함께 바뀌는 아이콘끼리 한 스프라이트에 묶으세요. 시트를 다시 생성하면 모든 위치가 바뀝니다.
• CSS로 색을 바꿔야 하는 단색 아이콘이라면 SVG 아이콘 폰트나 인라인 SVG가 더 적합할 수 있습니다.