좌충우돌 웹퍼블리셔 일기

모바일 페이지 마크업시 이미지 작업을 하다보면 아이폰 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}

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

음..

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

1. 포토/슬라이드쇼 각종 예제 사이트

http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm

http://www.professorcloud.com/mainsite/carousel.htm

http://www.wordpress-expert.info/2011/04/02/40-exceptional-jquery-photo-gallery-and-slider/

http://easyone.tistory.com/203  (jQuery 동영상 교육 자료)

 
http://tobia.github.com/CrossSlide/   (Ken Burns Effect, Cross Fade 등)  *목사님모바일홈 적용 예정

http://jonraasch.com/blog/a-simple-jquery-slideshow  (fader)

http://slidesjs.com/   (우에서 좌로 슬라이딩)

http://www.agilecarousel.com/examples/full_example  (페이드 인/아웃)

출처 : GNN 연구소
http://cafe.naver.com/gnnlab.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=168&

dl, dt, dd 요소

브라우저 확인 : 크롬O / 사파리O / 파이어폭스X / 오페라X
모바일 확인 : 크롬O / 아이폰에서 확인은 못해봤지만 웹브라우저 사파리가 되니 되겠지...?
flip의 경우 크롬과 사파리 효과가 약간 다르다.

 </div>

index.html

참고 : http://rintiantta.blog.me/40124403692

웹에서 아이폰스러운 Carousel 구현하기

페 이지 컨트롤(UIPageControl; Carousel; 일명 회전목마 컨트롤)은 아이폰이나 안드로이드폰을 쓰면 가장 먼저 접하게되는 UI 컨트롤이다. 일명 홈 스크린이라고 불리는 화면에서 가로 또는 세로로 플리킹(flicking)하면 이전/다음 페이지로 이동하는 그 컨트롤이다. 아이폰의 경우에는 화면 하단에 하얗고 까만 작은 동그라미가 있고, 안드로이드는 화면 상단 좌우에(폰에 따라 조금씩다르다) 작은 동그라미가 있어서, 총 몇 페이지 중에서 몇 번째 페이지를 보고 있는 지를 알려준다.

이 글에서 설명하는 방법을 안드로이드용 푸딩얼굴인식 앱을 만들면서 활용했는데, 데모 동영상에서 35초와 1분 10초 근처에 나오는 화면이 이 컨트롤을 활용한 것이다.

백문이불여일견! 코드를 살펴보자!

$(document).ready(function() { var iscroll = new iScroll('wrapper', { snap: 'li', momentum: false, hScrollbar: false, vScrollbar: false, onScrollEnd: function() { $('#indicator li').each(function(i, node) { if(i === iscroll.currPageX) { $(node).addClass('active'); } else { $(node).removeClass('active'); } }); } }); iscroll.scrollToPage(0); });

#wrapper { width:200px;/*=page_width*/ height:200px;/*=page_height*/ margin:0; padding:0; overflow:none; background-color:#fff; } #scroller { position:relative; top:0; left:0; width:600px;/*=number_of_page*page_width*/ height:200px; float:left; } #scroller ul { list-style:none; position:relative; display:block; margin:0; padding:0; top:0; left:0; width:100%; height:100%; } #scroller li { display:block; float:left; width:200px; height:200px; } /* 나는 깜찍한 CSS로 아이폰스러운 페이지 인디케이터를 구현하였으나 공간이 부족하여 생략한다 -_-; */

<div id="wrapper">    <div id="scroller">      <ul>        <li><div>1st page!</div></li>        <li><div>2nd page!</div></li>        <li><div>3rd page!</div></li>      </ul>    </div>  </div>  <div id="indicator">    <ul>      <li><span>1</span></li>      <li><span>2</span></li>      <li><span>3</span></li>    </ul>  </div>

백문이불여일RUN! 결과를 확인하자!(위에서 생략했던 깜찍한 CSS도 포함되어 있음)

http://jsbin.com/epeci5

이 글에서는 iScroll 라이브러리를 활용하여 페이지 컨트롤을 구현하고, 덤으로 아이폰과 유사한 인디케이터 까지 구현해 보았다.

모 바일 단말은 화면이 작기 때문에 이런 유형의 컨트롤(탭/Carousel/...)들이 꽤 다양하고, 또 유용하지만, 직접 만들자면 쉽지 않다. 그렇다고 이 컨트롤 하나 때문에 Sencha나 jQueryMobile 같은 덩치 큰 프레임웍을 사용하는 것이 부담스럽다면, iScroll 라이브러리는 한 번 쯤 살펴볼 가치가 있다.

참고자료:
http://cubiq.org/iscroll-4
https://github.com/blackdynamo/jQuery-Mobile-Carousel
http://dev.sencha.com/deploy/touch/docs/?class=Ext.Carousel
http://www.winktoolkit.org/documentation/module/592/
http://developer.apple.com/library/ios/#documentation/uikit/reference/UIPageControl_Class/Reference/Reference.html