logo
GeekFormat

스프라이트 생성기

사진 업로드

지원 형식 : PNG, JPG, WebP

050

스프라이트 미리보려면 이미지를 업로드하세요

관련 추천

QR 코드 스캐너

이미지 크기 조절

이미지 회전 & 반전

이미지를 ASCII로

Base64 이미지로 변환

Slug 생성기

주요 기능

  • 원클릭 아이콘 병합: 여러 이미지를 한 번에 업로드, 고품질 CSS 스프라이트를 빠르게 생성, HTTP 요청 대폭 감소
  • 자동 CSS 코드 생성: 정확한 background-position을 포함한 CSS 코드를 자동 계산, 복사 & 붙여넣기 바로 가능
  • 유연한 레이아웃: 가로, 세로, 그리드 3가지 모드, 드래그로 아이콘 순서 조정
  • 맞춤 간격 설정: 아이콘 간격을 정확하게 설정, CSS에서 가장자리 겹침 방지
  • 실시간 미리보기: 브라우저 고속 처리, 병합 효과와 코드를 실시간으로 확인, 무손실 에셋 내보내기

자주 묻는 질문

CSS 스프라이트란? 왜 사용하나요?

CSS 스프라이트는 여러 작은 아이콘을 하나의 이미지로 합치는 프론트엔드 최적화 기술입니다. 서버로의 HTTP 요청 수를 줄여 페이지 로딩 속도를 높입니다. 웹 성능 최적화에 필수적인 기술입니다.

스프라이트 시트를 생성하고 CSS 코드를 얻으려면?

아이콘 파일을 드래그 앤 드롭하면 자동으로 병합됩니다. 드래그로 순서 조정, 가로/세로/그리드 레이아웃 선택, 결과 실시간 미리보기가 가능합니다. 완료 후 정확한 background-position을 포함한 CSS 코드가 자동 생성되며, 프로젝트에 복사 & 붙여넣기만 하면 됩니다.

아이콘 간 간격을 조절할 수 있나요?

네. 아이콘 간 가로 및 세로 간격을 자유롭게 설정할 수 있어 CSS 포지셔닝 시 가장자리 겹침이나 표시 오류를 방지합니다.

어떤 레이아웃을 지원하나요?

가로, 세로, 그리드(행렬) 레이아웃을 지원합니다. 프로젝트에 맞는 배치를 선택해 이미지 공간을 효율적으로 활용하세요. 웹사이트 아이콘 통합, UI 컴포넌트 라이브러리 작업에 적합합니다.

HD 아이콘을 처리할 수 있나요? 화질이 떨어지나요?

네. HD PNG 또는 JPG 아이콘의 일괄 업로드를 지원합니다. 브라우저에서 무손실로 처리되며 원본 이미지의 선명도와 디테일을 완벽하게 유지합니다.