일괄 CSS 스프라이트 생성기
여러 아이콘 또는 이미지를 단일 파일로 결합하여 HTTP 요청을 줄이고 웹사이트 속도를 향상시킵니다. 완벽한 CSS 코드를 자동으로 생성합니다.
스프라이트를 생성하려면 아이콘을 여기에 드롭하세요
PNG, JPG, WebP, AVIF를 지원합니다. 여러 이미지를 하나의 CSS 스프라이트 시트로 결합하세요.
예제로 시도하기
불러온 갤러리
스프라이트 스튜디오
스프라이트 시트 미리보기
개별 아이콘
| 아이콘 | 클래스 이름 | 위치 | 크기 | 액션 |
|---|
스프라이트 옵션
일괄 적용
변경 시 자동 재생성
전문적인 CSS 스프라이트 생성
여러 개의 작은 이미지를 하나의 스프라이트 시트로 결합하여 웹 자산을 최적화하세요. 지연 시간을 줄이고 대역폭을 절약하며 CSS 워크플로우를 단순화하세요.
사이트 속도 향상
HTTP 요청이 적을수록 페이지 로딩 속도가 빨라집니다. 50개의 아이콘을 1개의 스프라이트 시트로 병합하면 서버와의 왕복 횟수가 49회 줄어듭니다.
자동 생성 CSS
더 이상 수동으로 픽셀을 세지 마세요. 우리 도구가 시트에 있는 모든 아이콘의 배경 위치와 크기를 자동으로 계산해 드립니다.
스마트 레이아웃
세로, 가로 또는 최적화된 그리드 레이아웃 중 선택하세요. 패딩을 조정하여 크기 조정 시 아이콘 간의 "번짐"을 방지하세요.
CSS 스프라이트 시트 만드는 방법
아이콘 업로드
병합하려는 모든 작은 이미지나 아이콘을 드래그 앤 드롭하세요. PNG, JPG, WebP, AVIF를 지원합니다.
스프라이트 설정 구성
레이아웃 스타일을 선택하고, 패딩을 조정하며, CSS 클래스 접두사를 설정하세요. 미리보기가 즉시 업데이트됩니다.
스프라이트 및 CSS 내보내기
최종 스프라이트 시트와 해당 CSS 코드를 ZIP 파일로 다운로드. 프로젝트에 바로 복사하여 붙여넣기만 하면 됩니다.
자주 묻는 질문
왜 CSS 스프라이트를 사용해야 하나요?
CSS 스프라이트는 고전적인 성능 최적화 기법입니다. HTTP 요청 수를 줄여주며, 특히 느린 연결 속도나 아이콘, UI 요소 같은 작은 자산이 많은 사이트에서 유용합니다.
어떤 레이아웃을 선택해야 하나요?
세로 및 가로 레이아웃은 디버그하기 가장 쉽습니다. 그리드 레이아웃은 최종 이미지 영역과 파일 크기를 최소화하는 데 가장 효율적입니다.
고해상도 (레티나) 화면은 어떻게 되나요?
더블 사이즈 아이콘으로 스프라이트 시트를 생성하고 CSS에서 'background-size'를 사용하여 고해상도 디스플레이에서 선명하게 렌더링되도록 축소할 수 있습니다.