1 / 21

모바 일 웹 세미나

모바 일 웹 세미나. #2. 모바일 웹 브라우저. 잠깐 복습. 왜 한국에는 모바일 열풍이 늦게 불었는가 모바일 웹 브라우저와 웹 뷰어 콘텐츠 배치에 관한 짧은 설명. 모바일 웹 브라우저. WebKit 기반 브라우저 Opera Mini, Mobile 그 외 여러 브라우저. 기능에 따른 구분. Low-End 텍스 트 위주 , 간단한 그림과 표 CSS/JS 먹는건가여 Mid-End 이 제 CSS 와 JS 를 볼 수 있음 하지 만 큰 거 불러왔더니 속도가 High-End

hamlin
Download Presentation

모바 일 웹 세미나

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 모바일 웹 세미나 #2. 모바일 웹 브라우저

  2. 잠깐 복습 • 왜 한국에는 모바일 열풍이 늦게 불었는가 • 모바일 웹 브라우저와 웹 뷰어 • 콘텐츠 배치에 관한 짧은 설명

  3. 모바일 웹 브라우저 • WebKit기반 브라우저 • Opera Mini, Mobile • 그 외 여러 브라우저

  4. 기능에 따른 구분 • Low-End • 텍스트 위주, 간단한 그림과 표 • CSS/JS 먹는건가여 • Mid-End • 이제 CSS와 JS를 볼 수 있음 • 하지만 큰 거 불러왔더니 속도가 • High-End • 종결자

  5. 고려 대상 • 누구에게 보여 주냐에 따라 달라짐 • Low-End: WAP 페이지와 큰 차이가 없음 • 대부분 모바일 브라우저가 이 정도는 가능 • Too High: 보기는 좋음 • 연산은 곧 배터리 소모 • PC보다 더 심한 렌더링 엔진간의 차이 • 아오 깨져 안 볼래

  6. 고려 대상 • Low-End • 자바스크립트/CSS는 포기할 것 • 텍스트 브라우저로도 잘 보여야 할 것 • 데스크톱이 아님을 잊지 말 것 • 시뮬레이션은 해 보고 게시할 것

  7. 브라우저 차별 • User-Agent 필터링 • 어이없지만 많은 국내 모바일 사이트 • 리다이렉션과필터링은다름 • 별도의 모바일 페이지 URL이 없음 • 자바스크립트를 통한 모바일 감지+Location • 제로보드 XE • 실제로 당해 보면 엄청 짜증남 • 예시: 대전 모바일BIS

  8. 테스트 • Wi-Fi 없는 휴대폰 앞에서는 묵념 • Wi-Fi가 있으면 무료로 쉽게 테스트 가능 • 로컬에 서버 열기 • 호스팅서비스 • 브라우저 에뮬레이터 • Opera Mini/Mobile • http://www.opera.com/developer/tools/

  9. 내용 맞추기 • CSS 픽셀 vs. 브라우저 픽셀 • 100%에서 1 CSS 픽셀 =1 브라우저 픽셀 • 웹 브라우저의 크기 조정은 CSS:브라우저 • 모바일장치의 width? • 데스크톱 웹 사이트가 깨지지 않도록 넉넉히 • iPhone 980/Opera 850/안드로이드800 • S60/블랙베리: 특이한 경우

  10. meta name="viewport" • 원래는 애플의 확장 중 하나 • 많은 모바일 브라우저가 지원 • Opera Mobile: 과거에는 XHTML Mobile로 DOCTYPE을 지정해야 했으나 현재는 무관 • 너비, 높이, 배율, 해상도를 지정할 수 있음 • CSS 픽셀과 브라우저 픽셀의 매핑 조정

  11. 폭 지정하기 • <meta name="viewport" content="width=device-width" /> • 지정하지 않으면 브라우저가 폭을 결정 • 지정하면 현재 장치의 폭을 width로 사용 • 하드코딩하는나쁜 버릇도 있음 (특히 320px) • 높이는 대개 브라우저에게 맡김

  12. 크기 조정 • <meta name="viewport" content="initial-scale=1.0, minimum-scale=0.25, maximum-scale=2.0,user-scalable=yes" /> • 100%를 기본으로 한 화면 확대/축소 • 사용 가능한 값은 0부터 10까지 • user-scalable을 no로 바꾸면 크기 고정 • 안타깝지만 많은 모바일 사이트 • 접근성 기능으로 끌 수 있음

  13. 해상도 • <meta name="viewport" content="target-densitydpi=device-dpi"> • high-dpi, medium-dpi, low-dpi • 픽셀 단위 디자인이 필요할 때 사용 • 대부분 필요하지 않음 • 디자이너가 DPI 최적화를 맡게 됨

  14. 기껏 이렇게 해 놓고도 • 픽셀 하드코딩해 놓으면 말짱 도루묵 • 모바일코레일 웹 사이트 • 상대 크기 레이아웃을 쓰기 전에 필요함 • 폭이 뒤틀리면 사용자가 크기를 조정함 • 모바일의가장 중요한 요소

  15. 미디어 쿼리 • CSS3 • 장치 속성에 따라서 적용되는 CSS 규칙 • 모바일과 데스크톱을 한 CSS로 가능

  16. HTML 5/CSS 3 • HTML 5 • 비디오와 오디오 • 로컬 저장소 • 새로운 input 태그,API • CSS 3 • 새로운 선택자, 효과 • border-radius, 그라데이션, 투명도

  17. border-radius • 둥근 버튼을 만들기 위한 삽질 • CSS 단계에서의 둥근 사각형 지원 • -webkit, -moz, -o • 접두사 없는 border-radius는 비교적 최근

  18. HTML 5 지원 • 비디오/오디오 • Ogg/Theora가 표준에서 밀려남 • 구글은WebM을 들고옴 • iPhone이 H.264지원, 그것뿐 • 로컬 저장소 • Web-App에 중요하게 사용됨 • 새로운 입력 태그 • 많은 브라우저가 아직 지원하지 않음

  19. HTML 5 위치 정보 • navigator.geolocation • HTML API는 인터페이스만 제공 • 구현 세부 사항은 브라우저의 몫 • 표준에서는 좌표만 가져올 수 있음 • Wi-Fi, GPS, … • Location-Aware JS를 짤 수 있음

  20. 참고 사이트 • http://quirksmode.org/mobile/ • http://webdesignerwall.com/tutorials/css3-media-queries • http://merged.ca/iphone/html5-geolocation

  21. 다음 시간 예고 • 모바일 사이트 디자인 • 실습 예정, 노트북 지참

More Related