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

그냥 저냥 모바일 웹페이지 만들다가 생각나는 것 나열
  • 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>
        • 위 처럼 할 경우 줄바 꿈이 되어서
          • 선택 라디오버튼 1선택 
            라디오버튼 2
        • 처럼 될 수도 있다.
      • <label class="nowrap"><input type="radio">선택 라디오버튼 1</label><label class="nowrap"><input type="radio">선택 라디오버튼 2</label>
        • 이렇게 해주면 label을 하나의 덩어리로 처리되면서줄바꿈이 된다.
          • 선택 라디오버튼 1
            선택 라디오버튼 2
        • label 전부를 white-space:nowrap; 처리해주는 방법도 있겠지만, 명시적으로 해주는 걸 추천.
          • 원하지 않는 동작이 생길 수 있으므로.
  • padding, margin
    • top,bottom 쪽은 있어도 상관 없지만, left,right는 한번 생각해봐야한다.
    • PC버전의 경우 모니터가 최소 1000px이 넘어서 좌우 여백을 마음대로 줄 수 있지만, 모바일은 최소너비가 320px(아이폰기준)이기 때문에 좌우 여백을 10px 줘머리면 실제 사용가능한 너비는 300px(320-10-10)가 된다.
    • 즉, PC버전과 같이 사용하고 싶다면 좌우 여백은 구분이 가능할 정도만 주는 편이 좋다.(1px,2px 정도)
댓글
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
목록형 📷 갤러리형
제목
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
유용한 리눅스(LINUX) 명령어
[공지] 기술 게시판
2.25
2.27
2.28
3.1
3.2
3.3
3.4
3.5
3.7
3.9
3.11
3.12
3.13
3.14
3.15
3.16
3.17
3.18
3.19
3.20
3.21
3.22
3.23
3.24
3.25
3.27
3.28
3.29
3.30
3.31
4.1
4.2
4.3
4.4
4.5
4.6