본문 바로가기

모바일웹

모바일 웹사이트 제작 전 알아두면 좋은 10가지 1. 해상도를 고려한 레이아웃 모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 큰 차이점은 해상도 차이에 따른 레이아웃입니다. 모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에 이점을 고려한 웹사이트 기획 및 디자인, 퍼블리싱이 필요합니다. 게다가 모바일 기기마다 해상도가 제각각이라는 점도 참 난감한 요소지요. 국내에서 보통 모바일 웹사이트 제작은 전 해상도를 고려하기 보다는 최근 출시된 스마트폰을 기준으로 해서 기획, 개발 및 검수 되는 사례가 많습니다.(아이폰, 갤럭시S) 그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다. ※ 국내 출시된 주요 모바일 기기 해상도 iPhone 320 * 480 iPhone4 960 * 640 모.. 더보기
모바일페이지로 이동하는 스크립트 또는.. 더보기
모바일 웹의 레이아웃을 위한 Meta 태그 모바일 웹의 레이아웃을 위한 Meta 태그 width : 화면 가로 사이트 (device-width로 폰의 크기로 지정) initial-scale : 초기의 확대 비율 maximum-scale : 최대 확대 비율 user-scalable : 사용자가 Zoom기능 사용 제어(no일 경우 Zoom기능이 disable) target-densityDpi : DPI를 지정(device-dpi를 지정하면 폰의 DPI가 설정됨) 더보기
자바스크립트를 활용한 모바일 웹 구현 먼저 기존에 알고 있던 웹 기술인 HMTL, CSS, 자바스크립트를 이용해 모바일 웹페이지를 작성하는 방법을 설명하고자 한다. 각종 머리 아픈 프로그래밍에 익숙한 개발자들은 이 글에서 다룰 CSS3 등의 디자인 관련 이슈들이 조금은 생소할 수도 있으나, 어쩌면 쉽고 재미있는 ‘쉬어가는 페이지(?)’ 역할을 할 수도 있을 것으로 생각된다. 모바일 웹페이지 제작 시작하기 참고로 이 글의 예제 코드들은 지면 관계상 일부 핵심적인 부분만 실었고 전체 소스 코드는 http://yooor.com/open/ms_may에서 확인할 수 있음을 밝힌다(스마트폰으로 접속 후 직접 테스트해 볼 수 있다). 뷰포트(viewport)모바일 전용 웹페이지는 일반 웹페이지와 달리 폰트 크기 등이 스마트폰 화면에 최적화된 화면으로 보.. 더보기