모바일 환경의 마크업 이슈
Post on 06-Jul-2015
3.776 Views
Preview:
DESCRIPTION
TRANSCRIPT
모바일 환경에서의
마크업 개발 이슈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일 목요일
top related