브라우저를 넘어 디바이스로 at 제 4회 웹표준의 날

1. 브라우저를 넘어 디바이스로 i@hooney.net 5th Korea Web Standards Day

2. http://hooney.net 취미: 싸이클링, 여행, 불리 최근 관심 사항: 2~30대 투표율

3. 수 많은 브라우저들을 맞추는 건... 전쟁처럼 치열했습니다.

4. 그 동안 고생 많았습니다. 여러분은 진정한 챔피언입니다. 짝짝짝!

5. 모바일 웹의 남의 나라 얘기인 줄 알았죠. 아이폰 출시전까진...

6. 모바일 운영체제(OS) 통계 - 전세계

7. 모바일 웹 브라우저 통계 - 전세계

8. 국내도 아.. 아이폰이 출시되면서 스마트폰이 쏟아져 나옵니다.

9. 모바일 운영체제(OS) 통계 - 한국

10. 모바일 웹 브라우저 통계 - 한국

11. 5인치부터 10인치까지... 타블렛 사이즈는 제한도 없나?!

12. 어쩌면... 이렇게... 남의 사정 봐주지도 않구... 막 나오남;;;

14. 평가 도구

15. 브라우저

16. 미디어플레이어

18. 개발 SDK

19. 프레임 웍

20. 평가 도구

21. 디바이스

22. 운영체제

23. 브라우저

24. 네트워크

26. 모바일 웹과 멀티 디바이스의 험난 여정을 떠나볼까요?

27. 모바일 웹 제작 보편적 좋은 콘텐츠와 디자인, 사용성 웹 표준(+접근성) 준수, 구조/표현/동작 분리 모바일 웹 유연한 디자인 점진적 기능 향상, 최신 기술 적극 활용 웹 페이지 최적화

28. 돌발 퀴즈: 다음의 기호는 CSS에서 무엇을 의미할까요? (-o-);; 상품: 웹 사이트 최적화 기법, UI개발자를 위한 필수 지침서by 스티브사우더스

29. CSS3와 밴더 확장 속성 CSS 2.1의 벤더 전용 확장 속성 -ms-, mso-, -moz-, -webkit-, -o- CSS 3와 벤더 전용 확장 속성 border-radious, border-image box-sizing, box-shadow, text-shadow columns, column-count, column-gap, column-rule,

30. 미디어 쿼리 1. linked Style <link type="text/css" media="screen" href="screen.css"> <link type="text/css" media="handheld" href="mobile.css"> 2. import Style(1) @import url(mobile.css) handheld; 3. import Style(2) @media handheld { body { width: 100%; } }

31. 미디어 쿼리 모바일기기별 스타일 제공 <link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet"> <link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet"> 가로, 세로 모드 스타일 변경 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

32. viewport Viewport width: default(980px) scale: none Viewport width: 320px scale: 1.5 Viewport width: 320px scale: 1.0

33. viewport viewport의 가로 크기를 디바이스 가로 크기로 설정 <meta name = "viewport" content = "width = device-width"> viewport의 기본 확대비율을 100%로 설정 <meta name = "viewport" content = "initial-scale = 1.0"> viewport의 기본 확대비율을 230% 및사용자 확대 기능 불가로 설정 <meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">

34. viewport - 아이폰과옴니아2 아이폰을 기준으로 옴니아viewport 설정 <meta name="viewport" content="width=device-width; initial-scale=0.75; maximum-scale=0.75; “/> 해상도: 480x800px 해상도: 320x480px

35. 선택자 CSS 문법 선택자{ 속성: 값(단위); } //주석 CSS2.1 + CSS3 선택자 a > b, a + b a:hover, a:active, a:focus a[foo=“bar”] :before, :after a::nth-child(n), a:empty, a::checked, a:not(s)

36. 다운로드 웹 폰트 기본 사용법 @font-face { font-family: "yunache"; src: url(http://..../yunache.ttf) format("truetype"); } h1 { font-family: "yunache", sans-serif; } //font 가져오기(google등) @import url(http://.../fonts.css) all; h1 { font-family: yunache, serif; }

37. 멀티 컬럼 use Tablet. not (i)phone; .col3 { column-count: 3; column-gap: 1em; column-rule: 1px solid black; -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; }

38. 둥근 모서리 3x3 이미지는 잊자. #preful { border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } #pref li { border-top: 1px solid #ccc; } #prefli:first-child { border: 0 }

39. min/max width/height min/max-width/height

40. box-sizing border/content-box .box { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box; } 내가 원하는 박스 모델 min/max-width/height와 함께 사용 불가

41. opacity 다양한 투명도를 블랜딩하기 #trans { opacity: 0.4; -moz-opacity: 0.4; -webkit-opacity: 0.4; filter:alpha(opacity=40); }

42. display 격자 그리드 레이아웃은 테이블 레이아웃으로~ #grid3 { display: table; } #grid3 ul { display: table-row; } #grid3 li { display: table-cell; } #grid3 li#col1 { widht: 100px;} #grid3 li#col2 { widht: 600px;} #grid3 li#col3 { widht: 200px;}

43. 웹 페이지 최적화 HTTP 요청 줄이기 콘텐츠 전송 네트워크 사용 헤더에 만료기한 추가 Gzip 컴포넌트 스타일시트는 위에 두기 스크립트는 아래에 두기 CSS Expression 피하기 JS와 CSS 압축 25kb 이하로 줄이기 JS와 CSS는 외부 파일로 DNS 조회 줄이기 자바스크립트 최소화 리다이렉트 피하기 중복 스크립트 제거 ETag 설정 Ajax 캐시 지정 DOM 접근 줄이기 이미지 압축 Yahoo! 최적화 규칙 http://developer.yahoo.com/performance/rules.html

44. 영감, 참조 모방은 창조의 어머니 by 아리스토텔레스

45. http://www.mobileawesomeness.com/

46. http://mobify.me/gallery/

47. http://www.cssiphone.com/

48. 가이드, 지침, 테스트

49. 모바일 웹 관련 기관/활동/가이드 W3C Mobile Web Initiative Mobile Web Best Practices mobileOK Basic Content Transformation Guidelines Mobile Web Application Best Practices Mobile Web 2.0 Forum 한국형 모바일 웹 모범사례 확장 1.5 가이드 한국형 모바일OK 1.0 표준가이드 한국형 모바일OK 기본 테스트 1.0

50. http://validator.w3.org/mobile/

51. http://v.mobileok.kr/

52. http://ready.mobi/launch.jsp

53. http://itunes.apple.com/app/liveview/id301069270

54. http://www.phonegap.com/

55. Adobe DeviceCentral

56. 더 늦지 않게... 모바일 웹과 멀티 디바이스 세계로 떠나봅시다!

57. 감사합니다. ^_^ 문의: 조훈 (i@hooney.net)