CSS 스프라이트 생성기

업로드한 여러 이미지(PNG, JPEG, SVG)를 단일 PNG 스프라이트 시트로 결합하여 canvas 위에 렌더링하고, 일치하는 CSS background-position 규칙을 생성합니다. 세 가지 레이아웃(horizontal, vertical, packed)을 제공합니다. 선택적으로 픽셀 단위의 Padding을 스프라이트들 사이에 삽입할 수 있습니다.

1. 업로드 영역을 클릭하거나 이미지 파일을 그 위로 드래그합니다. PNG, JPEG, SVG가 허용되며, 이미지가 아닌 파일은 걸러집니다. 2. Layout(Horizontal, Vertical, Packed)과 선택적으로 Padding(픽셀 단위, 0-100)을 선택합니다. 3. Generate를 클릭합니다. 체커보드 배경 위에 스프라이트 미리보기가 나타납니다. 4. Download를 클릭하여 sprite.png를 저장하고, Copy CSS로 생성된 CSS 규칙을 복사합니다.

Horizontal은 이미지를 왼쪽에서 오른쪽으로 한 행에 배치하며, 높이는 가장 키가 큰 이미지와 같습니다. Vertical은 위에서 아래로 한 열로 쌓으며, 너비는 가장 넓은 이미지와 같습니다. Packed은 ceil(sqrt(count))에 가장 넓은 이미지 너비를 곱해 도출한 너비를 기준으로 행을 줄바꿈합니다. 생성된 CSS는 이미지마다 하나의 '.icon-<name>' 클래스를 출력하며, width, height, 'background: url(sprite.png) no-repeat' 선언, 그리고 음수 background-position을 포함합니다. 파일명은 확장자가 제거되고 [a-zA-Z0-9_-]로 정제됩니다.