[아이폰4 대응] css sprite, -webkit-background-size

모바일 2012. 1. 30. 10:20






모바일 페이지 마크업시 이미지 작업을 하다보면 아이폰 4에서 이미지가 자글자글하게 깨지게 된다.

광고에서 흔히 들었던 바로 그 레티나 디스플레이(Retina Display) 때문인데,

대응방법(특히 이미지 스프라이트)을 웹에 아무리 찾아봐도 바로 딱!!!!! 적용할만한 예제가 없어서 직접 포스팅해본다.


한번 해보면 차암 쉬운데..

막상 예제만 보고 하려면 살짝 막막하.. ㄴ건 나뿐이겠지? ㅠㅠ 힝..





1. 일반 이미지의 경우

고해상도 이미지를 width="" height="' 값으로 제어



2. 이미지 스프라이트

======================================================================================


정확히 2배인 이미지 각각 준비.
(가급적 각각의 디자인을 전달받는게 좋음. 큰 이미지 사이즈를 축소시키면 라인구분이 뚜렷하지 못함)

구분을 편하게 하기 위해 2배 이미지에는 x2를 붙임. 파일명은 맘음대로~



spr_img.png (256*31)




spr_imgx2.png (512*62)



======================================================================================


기본 마크업은 아래와 같이..


*html*

<a href="#" class="btn_postNo">우편번호</a>

<a href="#" class="btn_cncl">취소</a>


*css*

.btn_postNo{display:block;width:65px;height:30px;background:url(spr_img.png) no-repeat}

.btn_cncl{display:block;width:51px;height:31px;background:url(spr_img.png) no-repeat -205px 0}


======================================================================================


-webkit-background-size 적용은 아래와 같이..

@medai screen and... 라인 추가. 2배 이미지 경로를 적어준다.

-webkit-background-size:값은 작은 이미지의 전체 사이즈를 적어준다.

background-position:값은 작은 해상도 기준으로 적어준다. 이미지가 정확히 2배라면 다른 설정은 필요없다.


*css*

@media screen and (-webkit-min-device-pixel-ratio:2){.btn_postNo,.btn_cncl{background-image:url(spr_imgx2.png)}}

.btn_postNo{display:block;width:65px;height:30px;background:url(spr_img.png) no-repeat;-webkit-background-size:256px 31px}

.btn_cncl{display:block;width:51px;height:31px;background:url(spr_img.png) no-repeat -205px 0;-webkit-background-size:256px 31px}


======================================================================================


위와 같이 마크업하면 아이폰3에서는 작은 해상도의 이미지가 출력되고, 4에서는 큰 해상도의 이미지가 출력된다.

아래와 같이 좀 더 정리할 수도 있다.


*html*

<a href="#" class="btn btn_postNo">우편번호</a>

<a href="#" class="btn btn_cncl">취소</a>


*css*

@media screen and (-webkit-min-device-pixel-ratio:2){.btn{background-image:url(spr_imgx2.png)}}

.btn{display:block;background:url(spr_img.png) no-repeat;-webkit-background-size:256px 31px}

.btn_postNo{width:65px;height:30px}

.btn_cncl{width:51px;height:31px;background-position:-205px 0}


======================================================================================






음..

내 수준에 맞게 쉽게 쓴다고 썼는데, 어느날 갑자기 딱 봤는데 또 이해 못하고 그러는 건 아니겠지? -_ -;;;;;;

'모바일' 카테고리의 다른 글

화면 터치시 터치영역 제거  (0) 2015.06.11
미디어쿼리 분기점  (0) 2012.11.10
Carousel  (0) 2011.07.05
모바일 프레임워크  (0) 2011.07.05
아이폰 시뮬레이터  (0) 2011.06.21
: