한 이미지의 여러 영역을 배경 위치로 잘라 쓰는 원리를 이해합니다.
스프라이트는 여러 작은 이미지를 한 파일에 합쳐 요청 수를 줄이던 기법입니다. 고정 크기 상자에서 background-position으로 원하는 부분을 보여줍니다. 현대에는 SVG 아이콘도 자주 사용합니다.
이번 예제의 출발점은 background-position: -32px 0;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 두 번째 요소의 background-position을 -128px로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
고해상도와 유지보수가 필요한 복잡한 아이콘까지 큰 스프라이트 하나에 묶으면 수정이 어렵습니다.
직접 바꿔보세요두 번째 요소의 background-position을 -128px로 바꿔보세요.