모바일 이미지 Sprite, background 처리 Tip

1. 동일한 디자인의 이미지 크기가 다를 경우

이렇게 디자인상 같은 이미지이지만 너비가 다른 경우가 있는데, 이럴 때 양쪽에 여백을 더 두고 동일한 사이즈로 통일해서 처리할 수 있다.
위의 경우는 원래 가로가 140px 이지만, 가로 너비가 넓은 이미지를 기준으로 150px을 기준으로 잡아서 총 가로 300px 크기의 sprite이미지를 만들어 처리했다.
이 이미지로 Swiper 썸네일 슬라이더를 구현했는데, 이 때 각 썸네일간의 간격은 이미지에 있는 여백만큼 빼고 나머지를 계산하여 값을 주면 된다.

그래서 Swiper 슬라이더의 옵션을 보면

var oyBrandSlide = new Swiper('.oyBrandSlide', {
	width: 75,
    spaceBetween: 6,
});

가로값을 150 / 2 인 75로 잡고 나머지 여백인 6px의 간격을 준 것을 볼 수 있다.