웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UX Planner & Designer


웹을 통해 새로운 창조를 꿈꾸는 인간
Humans dreaming of new creation through the web
WEBDESK
Web Standard
HOME WEBDESK Web Standard
모바일 웹페이지 제작시 기본적인 코딩 팁
Posted by kimdirector | 2015.05.06 | Hit : 5539
목록보기이전보기
스마트폰 2천만명 시대인 지금은 모바일 웹사이트 코딩은 일반 웹사이트 코딩만큼 하게 되는것 같은데요. 최근 1,2년 사이 웹을 이용할 수 있는 다양한 모바일 기기가 등장하면서 미디어 쿼리를 이용해 다양한 해상도에 반응하는 웹을 구현하는 기술인 반응형 웹까지 만들어지게 되었습니다.
 
모바일 코딩은 html5와 css3까지 다양하게 사용할 수 있어서 재미있는것 같습니다.
 
하지만 모바일 웹사이트 코딩을 처음 접하시는 분들은 일반 웹사이트 코딩과 조금은 다른 부분 때문에 난관에 봉착할 때가 있을 것 입니다. 조금이나마 도움이 될 수 있기를 기대하면서 제가 격었던 부분들을 기본적인것 부터 정리 해보려구요.



 
화면 회전시 폰트사이즈 고정
 
body {-webkit-text-size-adjust:none}
 
페이지가 랜더링될 때 모바일 사파리는 텍스트의 크기를 자동으로 조절하는데, 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할 수 있습니다. css의 body에 적어주면 해결됩니다.
 
-webkit-text-size-adjust의 3가지 속성
auto : 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절
none : 폰트사이즈 고정
n% : 폰트사이즈를 지정된사이즈로 변경
 
 
모바일 웹페이지를 가로크기에 맞추기
 
 
 
스마트폰에서 랜더링 시켰을경우 터치를 통한 화면의 크기가 변경되지 않아야 하는데, 일반 웹사이트들은 그 크기가 pc에 맞게 제작되었기 때문에 상대적으로 작은 모바일디스플레이로는 감당하기 힘들게 됩니다. 이럴 때 위의 메타태그로 디스플레이 크기에 맞춰질 것입니다.
 
width=device-width : 플랫폼 가로 크기에 맞춤
initial-scale : 확대비율
maximum-scale : 최대확대비율
minimum-scale=1.0 : 최소축소비율
user-scalable : 사용자에 의한 화면확대 가능여부 (yes / no)
 
 
웹페이지가 브라우징된 후 주소창을 사라지게 합니다.
 
window.addEventListener('load', function() {
    setTimeout(scrollTo, 0, 0, 1);
}, false);
 
 
스마트폰으로 접속시 해당 모바일 웹페이지로 자동 링크됩니다.
 
        var uAgent = navigator.userAgent.toLowerCase();
        var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',
        'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');
        for(var i=0;i
 
 
 
페이지의 전체 백그라운드이미지를 넣을 경우, background-size를 사용합니다. 이 경우는 이미지가 늘어나거나 해도 시각적으로 무리가 없어야 할 것같습니다. 그라데이션등이 있는 bg는 늘어나면 보기 안좋더라구요~
 
body {background:url(bg.png) repeat 0 0;background-size:100% 100%;}
 
 
이미지를 해상도에 맞게 조절하고 싶을 경우에는 max-width를 사용합니다.
 
h1 {width:auto;}
h1 img {max-width:100%;}
 
width값이 100%인 경우 border 값을 넣으면 가로스크롤이 생겨 버리니 조심해야겠죠.
 
 
select, input등에 원치않는 그라데이션과 라운드가 처리되어 있는데, 이 form 요소의 기본속성을 초기화하는 방법입니다.
 
border-radius:0px 0px; /* 아이폰의 input 라운드 초기화 */
-webkit-appearance:none; /* form 요소의 디바이스 기반 스타일 초기화 */
 
 
html5의 form 요소의 type속성(http://biew.co.kr/18 참고)을 이용한 상황에 맞는 아이폰 자판 레이이웃을 호출할 수 있습니다. (아이폰의 경우입니다.)
 
input type="email"
input type="url"
input type="time"
input type="date"
input type="datetime"
input type="number"
input type="tel"
input type="search"
input type="week"
 
 
html5의 새로운 input 속성인 입력값을 설명해주는 placeholder 속성도 활용할 수 있습니다. 이는 웹접근성 지침(http://biew.co.kr/17 참고)에도 표기되어 있으며 웹접근성을 높일 수 있습니다.
Posted by kimdirector | 2015.05.06 | Hit : 5539
Origin http://biew.co.kr/20
Tags 모바일 웹페이지 코딩
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webaccessibility&no=113

COMMENT
Commented by kimdirector
2015.05.06 14:01:44 X
모바일 웹 페이지를 처음 제작하는 사람들이라면 놓치기 쉬운 부분들입니다. 잘 참고하시기 바라며, 정답은 아니겠지만, 알고 있으면 도움이 될 것 같습니다. 오늘 하루도 멋진 하루 만드시기 바랍니다.
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Tags
로고 아이폰 바른바탕체 디자인 프레임 PNG 기획안 모션 조직 셔터스톡 품질 UX HTML5. 모바일 저작도구 사고 CEO 홈페이지 웹표준 웹디자이너 로고디자인 일러스트 프리랜서 메인화면 솔루션 Button Design 서비스 앱 프로그래머 디바이스 HTML5 OS X 사물인터넷 모델 분석 브라우저 소셜큐레이션 사용자 경험 무료 마인드맵 배려 소모량 쇼핑몰 모바일 플랫 마크업 이벤트 의사결정 반응형 웹 검색 접근성 리더십 에너지 PM 웹폰트 자기개선 디자인 사고 가이드 OS 홈페이지 Renewal 웹에이젠시
Tags
한국 IDG 홈페이지 로고디자인 사업 게임 쇼핑몰 웹디자인 애플리케이션 CIP 아이콘 폰트 IT 로고 네이티브앱 웹페이지 프로젝트 로고 자바스크립트 디자인 jQuery 스마트폰 정책 BIP 리더 메일폼 사용자 생산성 PNG 일러스트 브랜드 홈페이지 프레임 스티브잡스 문화 NHN 트렌드 이벤트 비즈니스 마케팅 모바일 플래시 심리 솔루션
Category Cloud
About us Review Portfolio Design Review 
Leaders Story Mobile UXD IT Information
Web Identity Everyday Story Mobile Life
Webdesign Report Web Standard Homepage Work
Web Plan Report Practical Use Tip Design Inspiration
Dowmload Review Recommend Site
Search
Contact us
Phone : 010-8555-0503
E-mail : kimdirector@gmail.com