CSS 스프라이트란?
CSS 스프라이트(Sprite)는 여러 아이콘을 한 장의 이미지로 병합하고 background-position과 함께 페이지에서 필요한 부분만 표시하는 기법입니다.
브라우저가 발행하는 이미지 요청 수를 크게 줄일 수 있어 프런트엔드 성능 최적화에 자주 사용됩니다.
사용 방법
세 단계로 스프라이트를 생성할 수 있습니다:
- 여러 이미지를 업로드합니다(최대 40장).
- 가로, 세로 또는 그리드 레이아웃을 선택하고 간격을 조정합니다.
- 「생성」을 클릭해 스프라이트를 다운로드하고 CSS 코드를 복사합니다.
팁
- 아이콘 크기를 먼저 통일하면 스프라이트가 더 깔끔합니다.
- PNG 형식은 투명 배경을 유지할 수 있어 아이콘에 적합합니다.
- 생성된 CSS는 상대 경로 sprite.png를 사용하므로 실제 저장 위치에 맞게 조정하세요.