그냥 저냥 모바일 웹페이지 만들다가 생각나는 것 나열
- viewport 를 사용할 경우를 기준으로 생각해야한다.
- 너비 : 320,400,640,800 을 기준으로 생각해야한다.
- 320,400일 때는 속의 내용이 가득차게하고,
640,800일 때는 속의 내용을 2개로 나눌 수도 있다. - 반응형 웹으로 제어할 경우
400이하인 경우와 640이상인 경우만 생각하면 될것이다.
속은 min-width:320px;max-width:400px 로 하고
400이하일 경우는 width:100%
640이상인 경우는 width:50%
이렇게하면 너비에 따라서 1개씩 또는 2개씩 나오게 된다.
(최외각 너비를 min-width:320px;max-width:800px으로 제한 하는 걸 추천)
- 높이 : 신경 안 쓴다.
- 회전 : 신경 안 쓴다. 너비가 달리질 뿐이다.
- 배치
- 탑메뉴 : 너비가 400 이하일 경우, 접혀있는 메뉴를 써봤는데, 해당 한 부분에서 많이 사용하는 경우 편하겠지만, 그게 아니라면, 메뉴의 수를 줄여서 항상 보이도록 하는 것도 괜찮을 것 같다.
- position:fixed로 맨 위에 붙여두었다.(스크롤해도 항상 보이도록)
- 사이드 메뉴 : 왼쪽에 보통 존재하지만, 모바일 페이지에서는 괜한 자리 낭비다. 가로가 더 길지 않는 이상... 없는게 좋을 듯.
- 바닥글 : 신경 안 쓴다.
- 퀵메뉴(floating layer) : 내용이 길어질 것에 대비해서 top 정도는 하나 만들어 두는게 좋을 듯
- 제스쳐, 터치
- 제스쳐로 제어를 하면 좋겠지만, YTN 모바일를 사용해 본 봐... 뭔가 어정쩡하다.
(경우에 따라 화면이 즉각 적으로 반은 하지 않는 것 같음, 예전 버전이 더 좋은 듯)
최대한 단순하게 적용해야할 듯.
- 줄바꿈
- 기본적으로 모든 내용을 줄 바꿈하게 한다.
- 하지만, 관련 있는 것에 대해서는 줄바꿈을 금지 시키는 것이 보기에 좋다.
- 추천 스타일 클래스
- .nowrap{white-space:nowrap;}
- 사용 예제
- <label><input type="radio">선택 라디오버튼 1</label><label><input type="radio">선택 라디오버튼 2</label>
- 위 처럼 할 경우 줄바 꿈이 되어서
- 처럼 될 수도 있다.
- <label class="nowrap"><input type="radio">선택 라디오버튼 1</label><label class="nowrap"><input type="radio">선택 라디오버튼 2</label>
- 이렇게 해주면 label을 하나의 덩어리로 처리되면서줄바꿈이 된다.
- label 전부를 white-space:nowrap; 처리해주는 방법도 있겠지만, 명시적으로 해주는 걸 추천.
- padding, margin
- top,bottom 쪽은 있어도 상관 없지만, left,right는 한번 생각해봐야한다.
- PC버전의 경우 모니터가 최소 1000px이 넘어서 좌우 여백을 마음대로 줄 수 있지만, 모바일은 최소너비가 320px(아이폰기준)이기 때문에 좌우 여백을 10px 줘머리면 실제 사용가능한 너비는 300px(320-10-10)가 된다.
- 즉, PC버전과 같이 사용하고 싶다면 좌우 여백은 구분이 가능할 정도만 주는 편이 좋다.(1px,2px 정도)
