모바일 사이트를 개발중입니다.

html5(일부) 와 css3를 이용해서 작업중이고, 아이폰OS 와 안드로이드 OS 의 기본브라우저에 최적화 하는 조건으로 작업중입니다.
접근성 등에 어긋날 수 있지만 그렇게 작업 하고 있습니다.
많이 아시는 분들도 계시겠지만 혹여 모르는 분들을 위해서 제가 작업간에 새로 알게된 것 들을 조금이나마 공유하고자 몇줄 적습니다.
!! 수정해야 할 사항 있으시면 알려주세요...수정해야 해요;;ㅋㅋㅋ;;

width 값이 100% 인 경우 border를 넣으면 가로스크롤이 생긴다.

모바일 사이트 작업을 하느라 widht값을 100% 로, min-width 값을 320px로 작업 중입니다.
가끔 border를 넣어야 할 사항이 있는데 100%로 먹어있는 녀석에게 border를 left,right 쪽으로 먹일경우 보더의 굵기만큼 어긋나게 됩니다.

form 요소의 width 값에도 % 를 먹이는 방법을 사용하면 가로,세로 모드에서 유용하다.

조금 복잡한 방법 이었습니다.
input type text 의 경우 %를 먹여 사용하면 가로로 돌리면 늘어 납니다.
P 태그등에 width값을 지정하지 않고 padding 값만 넣은 상태로 P 안에 input 을 넣고 100%를 주면 p태그의 padding값을 뺀만큼의 길이만큼 100%로 늘어 납니다. input태그 우측 등에 버튼을 넣기 위해 P태그의 우측 패딩을 버튼 크기만큼 넣고 버튼을 absolute 로 위치 시킵니다.
ul,li를 활용하면 라인 잡기 유용하더군요.

-webkit- 기반 브라우저의 form요소 기본속성 초기화

아이폰에서 셀렉트 박스, input박스등에 원치않는 그라데이션과 라운드 처리 등이 되어 있습니다.
안드로이드도 마찬가지군요. 이를 초기화 하는 방법이 있습니다.(webkit기준)
border-radius:0px 0px; (아이폰의 인풋의 라운드를 없앱니다.css3 의 보더레디우스 이군요-0-;)
-webkit-appearance: none; (폼요소의 디바이스 기반 스타일을 없애 버립니다.-_-!! 셀렉트 박스 등의 화살표 등이 없어 집니다. 저는 셀렉트 박스에만 사용했으며, checkbox, radio 등에는 사용하지 않았습니다. 체크된 후의 모습을 어떻게 만들어야 하는지 몰라서....ㅡㅡa)

웹할때 잘 안하던 정규표현식을 공부하게 된다.-_-;;

일반 웹에서 입력 양식을 적을때는 꽤 정리를 잘해 줄수 있어서 (예로 email 양식등..) 자바스크립트로 유효성 체크를 할때 그렇게 까지 힘들지 않았는데... 모바일웹의 화면크기 제한으로 모든걸 웹과 동일하게 해 줄 수 없더군요.
정규표현식을 사용해 유효성 체크를 하게 되었습니다-_-;;;

지원되는 form요소의 html5속성을 적극 활용하자.

email 타입을 사용하면 사용자는 기본적으로 키패드에 @문자가 있는 패드로 뜨고, number 를 쓰면 숫자가 뜹니다.
search 는 검색이 뜨구요.
위 사항은 아이폰 기준이며, 안드로이드는 다르군요-_-;(한글 키가....ㅡㅡ;;)
placeholder속성도 적극 활용하면 좋습니다.
아직 지원안하는 녀석들이 대부분이지만 어느정도 일부 사용자의 편의성을 높일 수 있는 방법입니다.

css3는 생각보다 잘 먹는다. 하지만 안드로이드에서 느려질 수 있다.

css3중 보더,그라데이션,그림자 등을 주로 사용했습니다.
그라데이션의 경우 최초 디자인데로 전체 BG에 동그란 원형 그라를 깔았습니다.
안드로이드에서 조금 많이 버벅되는(터치후 위아래 스크롤시..)현상이 발생하더군요.
그렇지만 대부분 잘 사용했습니다.
또 transition 스타일의 경우 잘만 사용하면 편리한 UI를 만들 수 있습니다.
예로, 이녀석은 1회 실행되는데 absolute 속성에 top이 0으로 되어 있는 녀석을 자바스크립트를 이용해 top값을 바꿔주면 바뀐값까지 모션이 들어갑니다.(해보시면...)

일반 웹페이지 코딩할때보다 절대 리소스를 적게 잡으면 안된다.

이건 css3를 사용할때 얘기 입니다.
절대 일반 웹페이지를 코딩할때보다 적게 일정잡으면 안된다는걸 느꼈습니다-_-;
아쿠아버튼등 하나 만드는데도 조금...노가다성이 짙습니다.

absolute로 띄워 놓은 레이어가 문제가 될 수 있다.

절대값으로 레이어를 띄웠습니다.
해당 레이어에는 버튼도 있습니다. 안드로이드에서는 해당 레이어 밑에 있는 버튼이나 폼 요소가 선택되거나 동작되는 현상이 있습니다. 주의 하세요.

iframe, textarea 등에 스크롤이..

위 두개의 속성등(페이지 내에 스크롤이 있는 박스)에는 스크롤이 생기지 않습니다. 쳇...
다른 방법이 있는지는 잘 모르겠네요;

이미지 폰트 보다 시스템 폰트가 이쁘다.

이건 제 주관적인 생각입니다만...
이번 모바일 사이트 작업에서 이미지폰트 사용을 최소화 했습니다.(로고 정도??)
디자이너 분도 그렇게 하자고 하시더라구요;;
모바일에서는 해상도 등의 문제로 이미지 폰트보다 일반 폰트가 더 이쁘게 보이더군요.
추가로 안드로이드는 사용자가 브라우저 폰트를 바꿔 버릴수 있으니...-_-a 적당한 타협도 필요할듯 합니다.

window.orientation 으로 디바이스의 각도 를 이용하여 휴대폰이 가로인지 세로인지 등을 확인하는 방법이 안먹거나 다른 기기가 있다. (오늘 또다른 문제가 생겨서 추가 합니다.)

기기를 돌리면 가로,세로에따라 0,90,180,270 도를 넘겨받을 수 있지만 요녀석이 하드웨어, 혹은 운영체제 버전을 조금 타는군요.
resiz이벤트를 대신 사용할 수 있다고 하는데, 한번 화면을 회전하면 이벤트가 여러번 발생한다고 해서 테스트 해보지는 않았습니다. 주로 안드로이드 운영체제의 기기중 버전이 2.1 인경우에 해당되며, 2.2로 업그레이드 하면서 정상 작동 되는 경우도 있다고 합니다. 중요 컨텐츠 등을 확인하는데 있어 orientation 이벤트의 사용은 지양하는 편이 좋겠습니다.
그치만 저는 쓰고 있지요-_-;; text-overflow 를 쓰면서 쓰게 됬는데...가로모드에서 영역이 안늘어 나더라도 글 보는데 제한이 없어서요.;;;

box-shadow 의 경우 width가 100% 인 엘리먼트에 사용하면 일부 디바이스에서 가로스크롤이 생긴다.

웹표준마스터하기 님의 글을 보고 급하게 다른 디바이스로 테스트 결과 어떤녀석에서는 가로스크롤이 안생기고(아이폰,갤럭시S/프로요/2.2) 어떤녀석에서는 생기는것(모토글램/2.1) 을 확인 하였습니다.
결국 box-shadow 를 제거하고 그림자 png를 까는 것으로 대체 했습니다.
가로스크롤은 box-shadow 의 blur값 많금 늘어났습니다.
위 사항 외에도 여러가지 것들을 슥듭할 좋은 기회가 되었습니다.
이제 코딩 마무리 단계 입니다. 정리할 것도 많고, 추가할 기능도 많이 있는데 또다시 고민을 해 봐야 겠네요.

---

다시 한번 말씀 드리지만 위 내용은 제가 작업간에 알게 된 몇가지 이며 틀린 부분이나, 잘못된 부분이 있을 수 있습니다.
참고용(?) 정도로만 ...

출처: http://cafe.naver.com/hacosa/22225