웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Web Standard
HOME WEBDESK Web Standard
모바일 웹페이지 제작시 기본적인 코딩 팁
Posted by kimdirector | 2015.05.06 | Hit : 6691
모바일 웹페이지 코딩
목록보기이전보기
스마트폰 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 : 6691
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
Popular Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
성공 드롭박스 적응형 웹 데이터 아이폰 날씨 아이덴티티 웹사이트 인포그래픽 다운로드 솔루션 교육연수원 Pixel Ruler 서적 하드 드라이브 문제 웨어러블 웹디자인 관리 프로젝트 팀쿡 존경 유저인터페이스 리더 디자인 한나체 디자이너 홈페이지 디자인 소프트웨어뱅크 인포그래픽 아이패드 저작권 무료 One page 무료 웹디자인 소프트웨어 플래시 브라우저