웹을 통해 새로운 창조를 꿈꾸는 인간 - 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 : 5515
목록보기이전보기
스마트폰 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 : 5515
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
서울시 폰트 아이패드 사용자 경험 기획 칼라 로고디자인 모바일 고정관념 미래 협업 디자인 IT 사용자 플랫 CSS UI 자바스크립트 폰트 디자인 로고 벡터 iOS 홈페이지 전략 트레이닝 데이터 인포그래픽 노트북 사파리 프로젝트 생각 UI 소통 무료 다운로드 CIP 마우스 윈도우7 네비게이션 UX windows8 개발자 2014 웹사이트 프로그램 브로슈어 세상 Interesting 모바일 리더 iPhone 바른돋움체 개발툴 리더십 접근성
Tags
가이드라인 BIP PNG 포트폴리오 리더십 스팸 Web 사무실 color 웹사이트 한국 언론 진흥재단 모바일 기획자 삼성 프린터 경쟁력 애드웨어 소셜 미디어 CIP 플래시 구글 kimdirector 파워포인트 디자인 효용성 adobe cs4 서비스 firefox3 화장품 개발 디자이너 아이덴티티 iOS 디자인 11번가 PSD 레이어 페이스북 메일폼 운영기획자 기획 웹페이지 로고디자인
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