background-size 에 대해 (feat. 모바일에서 이미지스프라이트)

***

모바일 작업할때는

모든 크기를 1/2 로 떨구고 마크업을 해야함.

***

여튼 다른건 그냥 단순히 1/2 하면 되는데

문제는 이미지스프라이트임.

이게 background 속성을 이용해야하니까.....

***

본론 / 결론만 빠르게 말하면

1.

이미지스프라이트 기법을 위해 만든 이미지 원본 크기는 2배 그대로 만들고

2.

css 상에서 background-size 를 1/2 만큼 줄이면 됨.

background-size 라는게 말 그대로...

<img width=""~~ 이거처럼

사이즈 자체를 조정하는거임.

(원본크기의 width 가 100px 이면 background-size:50px;)

(height 값이야 auto 주면 되고)

3.

그러고 세부적으론 background-position 으로 조정하고.

***

주의점은 그거임.

이미지 원본 크기는 물론 그 안에 여러 소 이미지들의 크기 전부

짝수로 맞춰야함.

21px 이런식이면 1/2 하면 10.5px 인데

소숫점 단위는 안먹히므로

그만큼 오차가 발생.