codefactory's Posts

iScroll을 사용해서 모바일웹에서 내부 스크롤 영역 만들기

모바일 브라우저들은 데스크탑 브라우저와 달리 몇몇 CSS 속성을 막아놓고 있습니다. 모바일 기기의 특성상, 해당 속성이 사용되서는 곤란하기 때문인데요 예를 들어, fixed positioning을 허용하지 않고 있습니다. 만약 매우 큰 엘리먼트가 position:fixed; 로 설정되어 있다면 작은 화면을 가진 기기에서는 웹페이지에서 그 엘리먼트 이외의 내용은 볼 수 없을 것이기 때문입니다. 그리고 또 한가지 막혀있는 기능이 overflow:scroll; 속성입니다. 데스크탑 브라우저에서는 이 속성을 사용해서 아래의 데모와 같이 필요한 경우 내부 스크롤을 만들어서 사용할 수 있습니다. [데모보기] 데스크탑 브라우저에서는 마우스로 스크롤 해서 컨테이너 안에 있는 내용을 모두 볼 수 있지... »

jQuery carousel 만들기 – 모바일웹에서는 좌우 swipe로 이동

jQuery로 carousel (컨베이어 벨트, 회전목마 같은 효과) 을 만들어 보겠습니다. carousel을 만드는데 사용할 jQuery plugin은 제가 직접 만든 것은 아니고 Brian K orsborne이라는 분이 만든 http://www.bkosborne.com/jquery-feature-carousel 을 사용할 것입니다. 이 plugin은 전면에 3개의 이미지만 보여줄 수 있게 고정되어 있지만, 꽤 좋은 것 같습니다. 먼저 이 plugin을 사용해서 만든 간단한 데모를 한번 보시죠 [데모보기]   이 carousel을 스마트폰에서 터치해서 넘겨보고 싶었습니다. 기본적으로 위 plugin 들에는 touch에 대한 이벤트는 포함되어 있지 않기 때문에 몇몇 작업을 추가... »

jQuery UI CoverFlow: jQuery를 사용해서 만든 커버플로우

커버플로우가 무엇인지 아시나요? 커버플로우는 Apple의 iTunes에서 처음 사용되었던 graphical user interface 입니다. 잘 모르시는 분도 그림을 보시면 아, 이런걸 커버플로우라고 하는구나 하실 것입니다. [커버플로우 이미지보기]   검색을 해보면 jQuery를 사용해서 만든 커버플로우 UI를 여러개 찾으실 수 있습니다. 그중에서 Addi Osmani라는 분이 만드신 jQuery UI CoverFlow 2.0 Using $.widget 를 소개해 드립니다. [데모보기]   이 프로그램을 만든 방법에 대해서 간단히 말씀드리면, jQuery UI의 widget factory를 사용해서 만들어진 jQuery plugin이며 CSS3의 transform 속성들이 사용되었습니다... »

모바일웹에서 jQueryUI를 사용할 수 있게 해주는 jquery.ui.touch.js

모바일웹을 개발 할 때 jQueryUI를 사용하면 잘 작동하지 않는 기능들이 있습니다. 바로 draggable, sortable과 같이 터치를 해서 드래그앤 드롭을 해야하는 기능들인데요, 이런 기능들은 데스크탑에서는 마우스를 사용해서 클릭해서 드래그하면 되지만 이 기능을 사용한 웹사이트를 스마트폰과 같은 모바일기기에서 열어보면 작동을 안하는 것을 보실 수 있습니다. 스마트폰과 같은 모바일기기에서 jQueryUI의 기능을 사용할 수 있게 해주는 jquery.ui.touch.js (http://code.google.com/p/jquery-ui-for-ipad-and-iphone/) 를 소개해드립니다. 사용방법은 매우 간단합니다. 그냥 jquery.ui.touch.js 파일을 jquery, jqueryui ... »

Flick Navigation

네이버 하코사 카페(http://cafe.naver.com/hacosa)에 dohoons 님이 모바일 웹사이트를 만들 때 유용하게 사용할 수 있는 flick navigation을 만들어서 올리셨습니다. 네이버나 다음의 모바일 웹사이트를 방문해 보시면 메인페이지의 상단에 뉴스나오는 부분이 좌우로 플리킹(flicking, 좌우로 터치해서 드래그)되는 것을 보실 수 있습니다. 어떤식으로 만들 수 있는지 상당히 궁금해지는데요 http://dohoons.com/test/flick/ 위 URL을 스마트폰으로 접속해 보세요. 네이버나 다음에 구현되어 있는 플리킹 네비게이션과 같은 기능을 보실 수 있습니다. 여러 가지 옵션으로 다양하게 설정하실 수도 있습니다. dohoons 님이 카페에 올리신 글을 보면 충분히 개선되면 ... »

Page 54 of 54«525354