🗺️ 스프라이트 시트 좌표 계산기

열 수 (가로로 몇 칸)

열

행 수 (세로로 몇 칸)

행

아이콘 한 칸 가로 (px)

아이콘 한 칸 세로 (px)

칸 사이 가로 간격 (px)

칸 사이 세로 간격 (px)

시트 바깥 여백 (px)

칸별 좌표와 background-position

번호	행 / 열	왼쪽에서	위에서	background-position

그대로 붙여 쓰는 CSS

sprite.png 를 실제 파일 경로로 바꿔 쓰세요. background-position 은 시트를 왼쪽·위로 끌어당기는 값이라 좌표에 음수 부호가 붙습니다. 표준 아이콘 크기는 제시하지 않으니 실제로 쓰는 칸 크기를 입력하세요.

스프라이트 시트 좌표 계산기 사용법

아이콘 여러 개를 한 장에 모아 두고 CSS 로 잘라 쓰는 방식이 스프라이트 시트입니다. 손이 가는 부분은 칸마다 background-position 값을 세는 일인데, 간격과 바깥 여백이 끼면 금세 한 칸씩 어긋납니다. 열·행·칸 크기·간격·여백을 넣으면 번호별 좌표와 그대로 붙여 쓰는 CSS 를 만들어 줍니다.

좌표는 왼쪽에서 = 여백 + 열번호 × (칸 가로 + 가로 간격), 위에서도 같은 방식으로 구합니다. 시트 전체 크기는 여백 양쪽에 칸 크기의 합과 간격의 합을 더한 값입니다. background-position 은 배경을 왼쪽·위로 끌어당기는 값이라 좌표 앞에 음수 부호가 붙고, 0 일 때는 부호 없이 0 으로 씁니다. CSS 속성 동작은 2026년 10월 기준 W3C CSS 배경 명세를 따릅니다.

칸 크기는 표준값을 제시하지 않습니다. 아이콘 격자는 디자인마다 다르므로 실제로 쓰는 값을 넣어야 좌표가 맞습니다. 이 도구는 좌표와 CSS 만 만들고 이미지 파일을 합쳐 주지는 않으며, 칸마다 크기가 다른 불규칙 시트는 지원하지 않습니다. 한 번에 200칸까지 계산합니다.

자주 묻는 질문

background-position 값에 왜 마이너스가 붙나요?

요소 크기만큼만 보이게 두고 배경 이미지를 왼쪽·위로 끌어당겨야 원하는 칸이 보이기 때문입니다. 좌표가 0인 첫 칸만 부호 없이 0 으로 씁니다.

칸마다 크기가 다른 시트도 되나요?

지원하지 않습니다. 이 계산기는 모든 칸이 같은 크기이고 간격이 일정한 격자를 전제로 합니다. 불규칙 시트는 칸마다 좌표를 따로 재야 합니다.

아이콘 크기는 보통 몇 px로 잡나요?

표준값을 제시하지 않습니다. 격자 크기는 디자인 시스템마다 달라서, 실제로 쓰는 칸 크기를 넣어야 좌표가 맞습니다.

🗺️스프라이트 시트 좌표 계산기

칸별 좌표와 background-position

그대로 붙여 쓰는 CSS

관련된 도구

CSS 다중 배경 레이어 코드 생성기

CSS clip-path 도형 코드 생성기

스프라이트 시트 좌표 계산기 사용법

자주 묻는 질문

칸별 좌표와 background-position

그대로 붙여 쓰는 CSS

관련된 도구

CSS 다중 배경 레이어 코드 생성기

CSS clip-path 도형 코드 생성기

스프라이트 시트 좌표 계산기 사용법

자주 묻는 질문

같은 카테고리 도구