웹개발에 필요한 정보: HTML, CSS, JavaScript, etc.
textarea의 크기보다 더 많은 내용의 글을 작성할 경우 textarea의 크기는 유지된 채로 내부에 스크롤바가 생기게 됩니다. 그런데 이와 같이 하지 않고 사용자가 입력한 글의 내용만큼 textarea 의 높이가 늘어나서 스크롤바가 생기지 않게 하고 싶은 경우가 있습니다. 그럴 때는 textarea에 글자가 입력될 때마다 textarea의 clientHeight와 scrollHeight를 비교해서 scrollHeight가 더 큰경우(textarea의 크기보다 글 내용이 더 커지는 경우입니다.) clientHeight의 크기를 늘려주는 방법을 사용하게 됩니다. 이와같은 원리를 사용하여 jQueryMobile 같은 경우에는 아래와 같은 코드로 이 기능을 처리하고 있습니다. // 아래는 jQueryM... »
HTML5에는 여러 가지 input type 들이 추가되었습니다. 각 input type에 알맞게 스마트폰의 내장 브라우저들은 적절한 UI 처리를 자동으로 해주는 경우가 있습니다. 안드로이드 진저브레드 OS를 사용하는 제 폰의 경우 기본 브라우저에서 input type="email" 에 포커스를 주면 자동으로 영문과 @ 표시가 있는 키패드가 올라옵니다. 그러나 다양한 새로운 input type 들 (url, search, number, range, color 등) 에 대한 모바일 브라우저들의 지원은 스마트폰 OS 마다 제각각이며 아직 빈약한 편이라고 할 수 있습니다. [현재 모바일 브라우저들의 input type별 키패드 지원 모습] http://slides.html5rocks.com/#fo... »
모바일 브라우저들은 데스크탑 브라우저와 달리 몇몇 CSS 속성을 막아놓고 있습니다. 모바일 기기의 특성상, 해당 속성이 사용되서는 곤란하기 때문인데요 예를 들어, fixed positioning을 허용하지 않고 있습니다. 만약 매우 큰 엘리먼트가 position:fixed; 로 설정되어 있다면 작은 화면을 가진 기기에서는 웹페이지에서 그 엘리먼트 이외의 내용은 볼 수 없을 것이기 때문입니다. 그리고 또 한가지 막혀있는 기능이 overflow:scroll; 속성입니다. 데스크탑 브라우저에서는 이 속성을 사용해서 아래의 데모와 같이 필요한 경우 내부 스크롤을 만들어서 사용할 수 있습니다. [데모보기] 데스크탑 브라우저에서는 마우스로 스크롤 해서 컨테이너 안에 있는 내용을 모두 볼 수 있지... »
jQuery로 carousel (컨베이어 벨트, 회전목마 같은 효과) 을 만들어 보겠습니다. carousel을 만드는데 사용할 jQuery plugin은 제가 직접 만든 것은 아니고 Brian K orsborne이라는 분이 만든 http://www.bkosborne.com/jquery-feature-carousel 을 사용할 것입니다. 이 plugin은 전면에 3개의 이미지만 보여줄 수 있게 고정되어 있지만, 꽤 좋은 것 같습니다. 먼저 이 plugin을 사용해서 만든 간단한 데모를 한번 보시죠 [데모보기] 이 carousel을 스마트폰에서 터치해서 넘겨보고 싶었습니다. 기본적으로 위 plugin 들에는 touch에 대한 이벤트는 포함되어 있지 않기 때문에 몇몇 작업을 추가... »
모바일웹을 개발 할 때 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 ... »
Recent Comments