모바일 환경의 마크업 이슈

모바일 환경에서의 

마크업 개발 이슈2010.07.07. NHN 문지애

2010년 8월 19일 목요일

모바일 사이트가

필요했을까?

왜

2010년 8월 19일 목요일

좁은 화면

2010년 8월 19일 목요일

좁은 화면

2010년 8월 19일 목요일

좁은 화면

2010년 8월 19일 목요일

좁은 화면

2010년 8월 19일 목요일

느린 속도

2010년 8월 19일 목요일

느린 속도

2010년 8월 19일 목요일

모바일 폰에서 검색하는 주요 키워드 종류

http://mobizen.pe.kr/923

2010년 8월 19일 목요일

2010년 8월 19일 목요일

모바일 단말기와 브라우저

2010년 8월 19일 목요일

점유율 상위 9개 브라우저

텍스트텍스트

http://gs.statcounter.com/#mobile_browser-KR-monthly-200906-201007-bar

2010년 8월 19일 목요일

모바일 단말기와 브라우저

2010년 8월 19일 목요일

모바일 마크업 실무

2010년 8월 19일 목요일

PC와 모바일 단말기 

구분 방법

2010년 8월 19일 목요일

User Agent

2010년 8월 19일 목요일

User Agent

$_SERVER['HTTP_USER_AGENT']

2010년 8월 19일 목요일

User Agent

$_SERVER['HTTP_USER_AGENT']

2010년 8월 19일 목요일

User Agent

$_SERVER['HTTP_USER_AGENT']

http://whatsmyuseragent.com/

2010년 8월 19일 목요일

2010년 8월 19일 목요일

User Agent Switcher

2010년 8월 19일 목요일

User Agent Switcher

2010년 8월 19일 목요일

User Agent Switcher

2010년 8월 19일 목요일

User Agent

2010년 8월 19일 목요일

User Agent

2010년 8월 19일 목요일

User Agent

2010년 8월 19일 목요일

단말기별 

해상도 차이에 따른 대응

2010년 8월 19일 목요일

2010년 8월 19일 목요일

2010년 8월 19일 목요일

2010년 8월 19일 목요일

320*480

480*800

480*800

320*320

320*240

480*800

480*800

2010년 8월 19일 목요일

2010년 8월 19일 목요일

1. 해상도별 대응

2. Viewport를 이용한 대응

2010년 8월 19일 목요일

1. 해상도별 대응320px UI 480px UI

2010년 8월 19일 목요일

예)

1. 해상도별 대응

320px UI 480px UI

body{font-size:14px}

.h5 h2{font-size:1.05em}

.li1 .ct{padding-top:0.7em}

body{font-size:23px}

.h5 h2{font-size:1.05em}

.li1 .ct{padding-top:0.7em}

2010년 8월 19일 목요일

2. VIEWPORT를 이용한 대응

2010년 8월 19일 목요일

2. VIEWPORT를 이용한 대응

예)

<meta name="viewport" content="width=320, initial-scale=2.3, 

user-scalable=no" />

2010년 8월 19일 목요일

2. VIEWPORT를 이용한 대응

240 : X = 320 : 1.0

   X = 0.75

<meta name="viewport" 

content="initial-scale=0.75, 

maximum-scale=0.75, minimum-

scale=0.75, user-scalable=no" />

2010년 8월 19일 목요일

가변 화면

2010년 8월 19일 목요일

가변 화면

2010년 8월 19일 목요일

가변 화면

2010년 8월 19일 목요일

가변 화면

2010년 8월 19일 목요일

가변 화면

2010년 8월 19일 목요일

호환성 보장하기

2010년 8월 19일 목요일

기능호환성 보장하기 > 

•위치설정

•파일첨부

•플래시

•해당 OS별 애플리케이션 설치

하기 페이지 

•기타 성능 또는 이벤트 제공 

여부에 따른 기능 

2010년 8월 19일 목요일

기능호환성 보장하기 > 

•위치설정

•파일첨부

•플래시

•해당 OS별 애플리케이션 설치

하기 페이지 

•기타 성능 또는 이벤트 제공 

여부에 따른 기능 

2010년 8월 19일 목요일

기능호환성 보장하기 > 

•위치설정

•파일첨부

•플래시

•해당 OS별 애플리케이션 설치

하기 페이지 

•기타 성능 또는 이벤트 제공 

여부에 따른 기능 

2010년 8월 19일 목요일

기능호환성 보장하기 > 

•위치설정

•파일첨부

•플래시

•해당 OS별 애플리케이션 설치

하기 페이지 

•기타 성능 또는 이벤트 제공 

여부에 따른 기능 

2010년 8월 19일 목요일

기능호환성 보장하기 > 

•위치설정

•파일첨부

•플래시

•해당 OS별 애플리케이션 설치

하기 페이지 

•기타 성능 또는 이벤트 제공 

여부에 따른 기능 

2010년 8월 19일 목요일

CSS3호환성 보장하기 > 

2010년 8월 19일 목요일

호환성 보장하기 > 

CSS3

2010년 8월 19일 목요일

접근성호환성 보장하기 > 

레이아웃 CSS가 작동되지 않는 환경

2010년 8월 19일 목요일

호환성 보장하기 > 

접근성이미지를 작동시키지 않거나 느리게 가져는 환경

2010년 8월 19일 목요일

호환성 보장하기 > 

접근성마우스가 없는 환경, 키보드가 없는 환경

2010년 8월 19일 목요일

브라우저별 특징 (2010.06.)

브라우저별 서체 특성

2010년 8월 19일 목요일

•자동 전화번호 인식 

•키패드  

•가로/세로 글자 두께 

•플래시 지원 안함 

•파일첨부 지원 안함 

•내부 스크롤 없음

브라우저별 특징 (2010.06.)

iPhone OS3 Safari

2010년 8월 19일 목요일

• gif 애니메이션이 동작하지 않음 (디자이어) 

• 투명 그라데이션 영역이  정지해 있을때는 부자연스럽

다가, 화면을 움직일때는 자연스러움 (디자이어) 

• <select>에 대한 default 디자인이 없음 (SHW-M100S 

갤럭시A) 

• 레이어 하단의 링크로도 포커싱 됨 (DROID by 

Motorola)

Android 2.0 Browser

브라우저별 특징 (2010.06.)

2010년 8월 19일 목요일

• 텍스트와 이미지가 함께 있는 경우 아르고와 햅틱온의 

세로 정렬이 다름 

• 상위 오브젝트의 padding l, r이 position의 l, r값에 더

해짐

브라우저별 특징 (2010.06.)

Polaris 6

2010년 8월 19일 목요일

감사합니다.

[email protected]

2010년 8월 19일 목요일