모바일 웹페이지 웹퍼블리싱 팁

스마트폰 2천만명 시대인 지금은 모바일 웹사이트 코딩은 일반 웹사이트 코딩만큼 하게 되는것 같은데요. 최근 1,2년 사이 웹을 이용할 수 있는 다양한 모바일 기기가 등장하면서 미디어 쿼리를 이용해 다양한 해상도에 반응하는 웹을 구현하는 기술인 반응형 웹까지 만들어지게 되었습니다.

모바일 코딩은 html5와 css3까지 다양하게 사용할 수 있어서 재미있는것 같습니다.

하지만 모바일 웹사이트 코딩을 처음 접하시는 분들은 일반 웹사이트 코딩과 조금은 다른 부분 때문에 난관에 봉착할 때가 있을 것 입니다. 맑은커뮤니케이션에서 조금이나마 도움이 될 수 있기를 기대하면서 기본적인것 부터 정리 해보려구요.

1. 화면 회전시 폰트사이즈 고정

   1	body {-webkit-text-size-adjust:none}

   페이지가 랜더링될 때 모바일 사파리는 텍스트의 크기를 자동으로 조절하는데, 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할 수 있습니다. css의 body에 적어주면 해결됩니다.
   • auto : 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절
   • none : 폰트사이즈 고정
   • n% : 폰트사이즈를 지정된사이즈로 변경
2. -webkit-text-size-adjust의 3가지 속성
3. 모바일 웹페이지를 가로크기에 맞추기

   1	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

   스마트폰에서 랜더링 시켰을경우 터치를 통한 화면의 크기가 변경되지 않아야 하는데, 일반 웹사이트들은 그 크기가 pc에 맞게 제작되었기 때문에 상대적으로 작은 모바일디스플레이로는 감당하기 힘들게 됩니다. 이럴 때 위의 메타태그로 디스플레이 크기에 맞춰질 것입니다.
   • width=device-width : 플랫폼 가로 크기에 맞춤
   • initial-scale : 확대비율
   • maximum-scale : 최대확대비율
   • minimum-scale=1.0 : 최소축소비율
   • user-scalable : 사용자에 의한 화면확대 가능여부 (yes / no)
4. 웹페이지가 브라우징된 후 주소창을 사라지게 합니다.

   1 2 3

   window.addEventListener('load', function() {     setTimeout(scrollTo, 0, 0, 1); }, false);

5. 스마트폰으로 접속시 해당 모바일 웹페이지로 자동 링크됩니다.

   1 2 3 4 5

   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<mobilephones.length;i++) pre !="-1)" document.location="링크될 주소" ; < if(uagent.indexof(mobilephones[i])> </mobilephones.length;i++)>

6. 페이지의 전체 백그라운드이미지를 넣을 경우, background-size를 사용합니다. 이 경우는 이미지가 늘어나거나 해도 시각적으로 무리가 없어야 할 것같습니다. 그라데이션등이 있는 bg는 늘어나면 보기 안좋더라구요~

   1 2	body {background:url(bg.png) repeat 0 0; background-size:100% 100%;}

7. 이미지를 해상도에 맞게 조절하고 싶을 경우에는 max-width를 사용합니다.

   1 2	h1 {width:auto;} h1 img {max-width:100%;}

8. width값이 100%인 경우 border 값을 넣으면 가로스크롤이 생겨 버리니 조심해야겠죠.
9. select, input등에 원치않는 그라데이션과 라운드가 처리되어 있는데, 이 form 요소의 기본속성을 초기화하는 방법입니다.

   1 2 3 4

   <code class="hljs">                    <span class="hljs-attribute">border-radius</span>:<span class="hljs-number">0px</span> <span class="hljs-number">0px</span>; <span class="hljs-comment">/* 아이폰의 input 라운드 초기화 */</span> -webkit-appearance:none; <span class="hljs-comment">/* form 요소의 디바이스 기반 스타일 초기화 */</span> </code>

10. html5의 form 요소의 type속성(http://biew.co.kr/18 참고)을 이용한 상황에 맞는 아이폰 자판 레이이웃을 호출할 수 있습니다. (아이폰의 경우입니다.)

    1	<input id="email" placeholder="mailid@example.com">

    html5의 새로운 input 속성인 입력값을 설명해주는 placeholder 속성도 활용할 수 있습니다. 이는 웹접근성 지침(http://biew.co.kr/17 참고)에도 표기되어있으며 웹접근성을 높일 수 있습니다.