주 메뉴 바로가기 본문 내용 바로가기

MOBILE 가이드

1. 기본가이드

■ 작업 해상도

화면모드는 1080px 고해상도 psd를 기준으로 한다.(배경 일부는 용량 최적화를 위해 640으로 작업)

■ 크로스브라우징

  • 안드로이드 폰(갤럭시3이상(갤럭시3,4,5), 노트2이상(노트2,노트3,노트4))과 아이폰4(아이폰4,4s,5)이상 기종에서 잘 보일수 있는 코딩을 기본으로 한다.
  • 작업후 validator 필수체크

■ DTD / language TYPE / Encoding 선언

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">

■ 웹접근성(WHA)

  • 한국형 웹 콘텐츠 접근성 지침 2.0을 기준으로 하되, 준수가이드 범위는 WHA 가이드라인 참고
  • 작업후 웹접근성 준수확인 OpenWAX 사용하여 정성적 평가(파이어폭스/구글설치 추천)
  • 키보드 동작관련 및 스크린리더 테스트는 IOS에서 지원하는 VOICE OVER로 테스트
    • VOICE OVER 테스트시 IR로 적용하는 text-indent:-9999;, left:-9999;/top:-9999; 등이 사용되는 경우 정상적 인식이 어려움.
    • VOICE OVER의 원활한 IR 인식을 위해 :before 를 적용할 것을 권장. 
      a.on:before {
    content:"선택됨";
}

2. 모바일 계산식간편계산유틸

■ px에서 em값 계산법

  • 기준 디바이스 선택
    http://troy.labs.daum.net 각 디바이스 해당하는 디바이스 해상도를 알 수 있다.
  • 기본 베이스 폰트 설정 : ex) 16px를 1em으로 할 경우
    body {font-size:16px;}
div {font-size:1em;} /* body에서 상속된 기준값으로 div의 1em은 16px */
div.section {font-size:.75em} /* body에서 상속된 기준값으로 div의 .75em은 12px */
div.section p {font-size:1em} /* 상위 엘리먼트인 div.section의 기준값을 상속받아 div.section 내의 p의 1em은 12px */
  • 비율값 구하기
    • 1080/360 = 3 : PSD와 기준 디바이스의 행상도 비율은 3배
    • 640/360 = 2 : PSD와 기준 디바이스의 행상도 비율은 2배
  • 실제 px값을 em으로 변환 : ex) 398px → em 으로 변환
    • 398/3 = 132.666… 실제 해상도를 디바이스 비율(예시.1080 기준)로 나눈다.
    • 나눈 것을 다시 기본 베이스 폰트 사이즈 16으로 나누면 해상도에 따른 em단위가 나온다.
    • em단위 3자리이하는 버림으로 통일한다.