한 이미지의 여러 영역을 배경 위치로 잘라 쓰는 원리를 이해합니다.
스프라이트는 여러 작은 이미지를 한 파일에 합쳐 요청 수를 줄이던 기법입니다. 고정 크기 상자에서 background-position으로 원하는 부분을 보여줍니다. 현대에는 SVG 아이콘도 자주 사용합니다.
그라데이션은 background-size 덕분에 192×64 크기의 이미지 한 장이 되고 초록, 노랑, 짙은 초록 세 칸으로 나뉩니다. 64px 정사각형인 .sprite는 그중 64px 폭만 창처럼 보여 주므로 첫 상자에는 왼쪽 초록 칸이 보이고, .two는 background-position: -64px 0으로 이미지를 왼쪽으로 64px 밀어 가운데 노란 칸을 창에 맞춥니다.
고해상도 화면용 스프라이트는 이미지를 두 배 크기로 만들고 background-size에 원래 크기를 적어 절반으로 줄여 그립니다. 이때 background-position은 원래 크기 기준의 좌표를 그대로 쓰므로 -64px 같은 위치 값은 바꾸지 않아도 됩니다.
고해상도와 유지보수가 필요한 복잡한 아이콘까지 큰 스프라이트 하나에 묶으면 수정이 어렵습니다.
직접 바꿔보세요두 번째 요소의 background-position을 -128px로 바꿔보세요.