브라우저를 넘어 디바이스로

3,520 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,520
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
60
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 이미지 크기: 320x356px
  • 브라우저를 넘어 디바이스로

    1. 1. 브라우저를 넘어 디바이스로<br />i@hooney.net<br />5th Korea Web Standards Day<br />
    2. 2. http://hooney.net<br />취미: 싸이클링, 여행, 불리<br />최근 관심 사항: 2~30대 투표율<br />
    3. 3. 수 많은 브라우저들을 맞추는 건... 전쟁처럼 치열했습니다.<br />
    4. 4. 그 동안 고생 많았습니다.<br />여러분은 진정한 챔피언입니다.<br />짝짝짝!<br />
    5. 5. 모바일 웹의 남의 나라 얘기인 줄 알았죠. 아이폰 출시전까진...<br />
    6. 6. 모바일 운영체제(OS) 통계 - 전세계<br />
    7. 7. 모바일 웹 브라우저 통계 - 전세계<br />
    8. 8. 국내도 아.. 아이폰이 출시되면서 스마트폰이 쏟아져 나옵니다.<br />
    9. 9. 모바일 운영체제(OS) 통계 - 한국<br />
    10. 10. 모바일 웹 브라우저 통계 - 한국<br />
    11. 11. 5인치부터 10인치까지... 타블렛 사이즈는 제한도 없나?!<br />
    12. 12. 어쩌면... 이렇게... 남의 사정 봐주지도 않구... 막 나오남;;;<br />
    13. 13. 웹 접근성 구성요소<br /><ul><li>제작 도구
    14. 14. 평가 도구
    15. 15. 브라우저
    16. 16. 미디어플레이어
    17. 17. 보조 기기</li></li></ul><li>모바일 웹 구성요소<br /><ul><li>웹표준+최신기술
    18. 18. 개발 SDK
    19. 19. 프레임 웍
    20. 20. 평가 도구
    21. 21. 디바이스
    22. 22. 운영체제
    23. 23. 브라우저
    24. 24. 네트워크
    25. 25. 사용자입력/반응</li></li></ul><li>One Web<br />W3C’sOne Web<br />어떠한 기기에 상관없이 사용자는 동일한 정보와 서비스를 이용할 수 있어야 함.<br />그러나, 동일한 정보가 모든 기기에서 동일하게 보이지 않을 수도 있음.<br />모바일 웹의 차이점<br />다른 출력: screen size, device capavilities<br />다른 반응: user behavior, browser behavior, input methods<br />다른 접근: low notwork, wifi, transcoders<br />
    26. 26. 모바일 웹과 멀티 디바이스의 험난 여정을 떠나볼까요?<br />
    27. 27. 모바일 웹 제작<br />보편적 <br />좋은 콘텐츠와 디자인, 사용성<br />웹 표준(+접근성) 준수, 구조/표현/동작 분리<br />모바일 웹<br />유연한 디자인<br />점진적 기능 향상, 최신 기술 적극 활용<br />웹 페이지 최적화<br />
    28. 28. 돌발 퀴즈: 다음의 기호는 CSS에서 무엇을 의미할까요?<br />(-o-);;<br />상품: 웹 사이트 최적화 기법, UI개발자를 위한 필수 지침서by 스티브사우더스<br />
    29. 29. CSS3와 밴더 확장 속성<br />CSS 2.1의 벤더 전용 확장 속성<br />-ms-, mso-, -moz-, -webkit-, -o-<br />CSS 3와 벤더 전용 확장 속성<br />border-radious, border-image<br />box-sizing, box-shadow, <br />text-shadow<br />columns, column-count, column-gap, column-rule,<br />
    30. 30. 미디어 쿼리<br />1. linked Style<br /><link type="text/css" media="screen" href="screen.css"><br /><link type="text/css" media="handheld" href="mobile.css"><br />2. import Style(1)<br />@import url(mobile.css) handheld;<br />3. import Style(2)<br />@media handheld {<br />body { width: 100%; }<br />}<br />
    31. 31. 미디어 쿼리<br />모바일기기별 스타일 제공<br /> <link media="only screen and (max-device-width: 480px)" <br />href="small-device.css" type= "text/css" rel="stylesheet"><br /> <link media="screen and (min-device-width: 481px)" <br />href="not-small-device.css" type="text/css" rel="stylesheet"><br />가로, 세로 모드 스타일 변경<br /> <link rel="stylesheet" media="all and (orientation:portrait)" <br />href="portrait.css"><br /> <link rel="stylesheet" media="all and (orientation:landscape)" <br />href="landscape.css"><br />
    32. 32. viewport<br />Viewport<br />width: default(980px)<br />scale: none<br />Viewport<br />width: 320px<br />scale: 1.5<br />Viewport<br />width: 320px<br />scale: 1.0<br />
    33. 33. viewport<br />viewport의 가로 크기를 디바이스 가로 크기로 설정<br /> <meta name = "viewport" content = "width = device-width"><br />viewport의 기본 확대비율을 100%로 설정 <br /> <meta name = "viewport" content = "initial-scale = 1.0"><br />viewport의 기본 확대비율을 230% 및사용자 확대 기능 불가로 설정<br /> <meta name = "viewport" content = "initial-scale = 2.3, <br /> user-scalable = no"><br />
    34. 34. viewport - 아이폰과옴니아2<br />아이폰을 기준으로 옴니아viewport 설정<br /><meta name="viewport" content="width=device-width; initial-scale=0.75; <br /> maximum-scale=0.75; “/><br />해상도:<br />480x800px<br />해상도:<br />320x480px<br />
    35. 35. 선택자<br />CSS 문법<br />선택자{ 속성: 값(단위); } //주석<br />CSS2.1 + CSS3 선택자<br />a > b, a + b<br />a:hover, a:active, a:focus<br />a[foo=“bar”]<br />:before, :after<br />a::nth-child(n), a:empty, a::checked, a:not(s)<br />
    36. 36. 다운로드 웹 폰트<br />기본 사용법<br />@font-face {<br /> font-family: "yunache";<br />src: url(http://..../yunache.ttf) <br /> format("truetype");<br />}<br />h1 { font-family: "yunache", sans-serif; }<br />//font 가져오기(google등)<br />@import url(http://.../fonts.css) all;<br />h1 { font-family: yunache, serif; }<br />
    37. 37. 멀티 컬럼<br />use Tablet. not (i)phone; <br />.col3 {<br /> column-count: 3; <br /> column-gap: 1em; <br /> column-rule: 1px solid black; <br /> -moz-column-count: 3; <br /> -moz-column-gap: 1em; <br /> -moz-column-rule: 1px solid black; <br /> -webkit-column-count: 3; <br /> -webkit-column-gap: 1em; <br /> -webkit-column-rule: 1px solid black;<br />}<br />
    38. 38. 둥근 모서리<br />3x3 이미지는 잊자.<br />#preful {<br /> border: 1px solid #ccc; <br /> border-radius: 5px; <br />-moz-border-radius: 5px; <br />-webkit-border-radius: 5px;<br />}<br />#pref li {<br />border-top: 1px solid #ccc;<br />}<br />#prefli:first-child {<br />border: 0<br />}<br />
    39. 39. min/max width/height<br />min/max-width/height<br />
    40. 40. box-sizing<br />border/content-box<br />.box {<br /> box-sizing: content-box;<br /> -moz-box-sizing: content-box; -ms-box-sizing: content-box; <br /> -webkit-box-sizing: content-box;<br />}<br />내가 원하는 박스 모델<br />min/max-width/height와 함께 사용 불가<br />
    41. 41. opacity<br />다양한 투명도를 블랜딩하기<br />#trans {<br /> opacity: 0.4;<br />-moz-opacity: 0.4;<br />-webkit-opacity: 0.4;<br />filter:alpha(opacity=40);<br />}<br />
    42. 42. display<br />격자 그리드 레이아웃은 테이블 레이아웃으로~<br />#grid3 { display: table; }<br />#grid3 ul { display: table-row; }<br />#grid3 li { display: table-cell; }<br />#grid3 li#col1 { widht: 100px;}<br />#grid3 li#col2 { widht: 600px;}<br />#grid3 li#col3 { widht: 200px;}<br />
    43. 43. 웹 페이지 최적화<br />HTTP 요청 줄이기<br />콘텐츠 전송 네트워크 사용<br />헤더에 만료기한 추가<br />Gzip 컴포넌트<br />스타일시트는 위에 두기<br />스크립트는 아래에 두기<br />CSS Expression 피하기<br />JS와 CSS 압축<br />25kb 이하로 줄이기<br />JS와 CSS는 외부 파일로<br />DNS 조회 줄이기<br />자바스크립트 최소화<br />리다이렉트 피하기<br />중복 스크립트 제거<br />ETag 설정<br />Ajax 캐시 지정<br />DOM 접근 줄이기<br />이미지 압축<br />Yahoo! 최적화 규칙 http://developer.yahoo.com/performance/rules.html<br />
    44. 44. 영감, 참조<br />모방은 창조의 어머니 by 아리스토텔레스<br />
    45. 45. http://www.mobileawesomeness.com/<br />
    46. 46. http://mobify.me/gallery/<br />
    47. 47. http://www.cssiphone.com/<br />
    48. 48. 가이드, 지침, 테스트<br />
    49. 49. 모바일 웹 관련 기관/활동/가이드<br />W3C Mobile Web Initiative<br />Mobile Web Best Practices<br />mobileOK Basic<br />Content Transformation Guidelines<br />Mobile Web Application Best Practices<br />Mobile Web 2.0 Forum<br />한국형 모바일 웹 모범사례 확장 1.5 가이드<br />한국형 모바일OK 1.0 표준가이드<br />한국형 모바일OK 기본 테스트 1.0<br />
    50. 50. http://validator.w3.org/mobile/<br />
    51. 51. http://v.mobileok.kr/<br />
    52. 52. http://ready.mobi/launch.jsp<br />
    53. 53. http://itunes.apple.com/app/liveview/id301069270<br />
    54. 54. http://www.phonegap.com/<br />
    55. 55. Adobe DeviceCentral<br />
    56. 56. 더 늦지 않게... 모바일 웹과 멀티 디바이스 세계로 떠나봅시다!<br />
    57. 57. 감사합니다.<br />^_^<br />문의: 조훈 (i@hooney.net)<br />

    ×