Your SlideShare is downloading. ×
  • Like
브라우저를 넘어 디바이스로
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 2,949 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,949
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
58
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • 이미지 크기: 320x356px

Transcript

  • 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. 어쩌면... 이렇게... 남의 사정 봐주지도 않구... 막 나오남;;;
  • 13. 웹 접근성 구성요소
  • 모바일 웹 구성요소
  • One Web
    W3C’sOne Web
    어떠한 기기에 상관없이 사용자는 동일한 정보와 서비스를 이용할 수 있어야 함.
    그러나, 동일한 정보가 모든 기기에서 동일하게 보이지 않을 수도 있음.
    모바일 웹의 차이점
    다른 출력: screen size, device capavilities
    다른 반응: user behavior, browser behavior, input methods
    다른 접근: low notwork, wifi, transcoders
  • 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)