모바일 웹페이지 작성 시 생각해볼 것.

1 minute read

그냥 저냥 모바일 웹페이지 만들다가 생각나는 것 나열

  • 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으로 제한 하는 걸 추천)
  • 예제 : http://www.mins01.com/sdgd/m/unitSearch.php
  • 브라우저 너비를 줄여보세요.

  • 높이 : 신경 안 쓴다.
  • 회전 : 신경 안 쓴다. 너비가 달리질 뿐이다.
  • 뭐뭐뭐, 필요하다면 하겠지만…

  • 배치
  • 탑메뉴 : 너비가 400 이하일 경우, 접혀있는 메뉴를 써봤는데, 해당 한 부분에서 많이 사용하는 경우 편하겠지만, 그게 아니라면, 메뉴의 수를 줄여서 항상 보이도록 하는 것도 괜찮을 것 같다.
  • position:fixed로 맨 위에 붙여두었다.(스크롤해도 항상 보이도록)

  • 사이드 메뉴 : 왼쪽에 보통 존재하지만, 모바일 페이지에서는 괜한 자리 낭비다. 가로가 더 길지 않는 이상… 없는게 좋을 듯.
  • 탑 메뉴에 통합시키는 편은?

  • 바닥글 : 신경 안 쓴다.
  • 퀵메뉴(floating layer) : 내용이 길어질 것에 대비해서 top 정도는 하나 만들어 두는게 좋을 듯

  • 제스쳐, 터치
  • 제스쳐로 제어를 하면 좋겠지만, YTN 모바일를 사용해 본 봐… 뭔가 어정쩡하다.
    (경우에 따라 화면이 즉각 적으로 반은 하지 않는 것 같음, 예전 버전이 더 좋은 듯)
    최대한 단순하게 적용해야할 듯.

  • 줄바꿈
  • 기본적으로 모든 내용을 줄 바꿈하게 한다.
  • 스크린의 너비가 여러가지이므로

  • 하지만, 관련 있는 것에 대해서는 줄바꿈을 금지 시키는 것이 보기에 좋다.
  • 추천 스타일 클래스
  • .nowrap{white-space:nowrap;}

  • 사용 예제
  • <label><input type=”radio”>선택 라디오버튼 1</label><label><input type=”radio”>선택 라디오버튼 2</label>
  • 위 처럼 할 경우 줄바 꿈이 되어서
  • </input>선택 라디오버튼 1</input>선택 
    라디오버튼 2

  • 처럼 될 수도 있다.

  • <label class=”nowrap”><input type=”radio”>선택 라디오버튼 1</label><label class=”nowrap”><input type=”radio”>선택 라디오버튼 2</label>
  • 이렇게 해주면 label을 하나의 덩어리로 처리되면서줄바꿈이 된다.
  • </input>선택 라디오버튼 1
    </input>선택 라디오버튼 2

  • label 전부를 white-space:nowrap; 처리해주는 방법도 있겠지만, 명시적으로 해주는 걸 추천.
  • 원하지 않는 동작이 생길 수 있으므로.

  • padding, margin
  • top,bottom 쪽은 있어도 상관 없지만, left,right는 한번 생각해봐야한다.
  • PC버전의 경우 모니터가 최소 1000px이 넘어서 좌우 여백을 마음대로 줄 수 있지만, 모바일은 최소너비가 320px(아이폰기준)이기 때문에 좌우 여백을 10px 줘머리면 실제 사용가능한 너비는 300px(320-10-10)가 된다.
  • 즉, PC버전과 같이 사용하고 싶다면 좌우 여백은 구분이 가능할 정도만 주는 편이 좋다.(1px,2px 정도)

🔗original-link

Updated: