브라우저를 넘어 디바이스로
DESCRIPTION
브라우저를 넘어 디바이스로 at 제 4회 웹표준의 날TRANSCRIPT
브라우저를 넘어 디바이스로[email protected]
5th Korea Web Standards Day
http://hooney.net
취미 : 싸이클링 , 여행 , 불리
최근 관심 사항 : 2~30 대 투표율
수 많은 브라우저들을 맞추는 건 ... 전쟁처럼 치열했습니다 .
그 동안 고생 많았습니다 .
여러분은 진정한 챔피언입니다 .
짝짝짝 !
모바일 웹의 남의 나라 얘기인 줄 알았죠 . 아이폰 출시전까진 ...
모바일 운영체제 (OS) 통계 - 전세계
모바일 웹 브라우저 통계 - 전세계
국내도 아 .. 아이폰이 출시되면서 스마트폰이 쏟아져 나옵니다 .
모바일 운영체제 (OS) 통계 - 한국
모바일 웹 브라우저 통계 - 한국
5 인치부터 10 인치까지 ... 타블렛 사이즈는 제한도 없나 ?!
어쩌면 ... 이렇게 ... 남의 사정 봐주지도 않구 ... 막 나오남 ;;;
웹 접근성 구성요소
웹접근성구성요소
콘텐츠
사용자제작자
• 제작 도구
• 평가 도구
• 브라우저• 미디어플레이
어• 보조 기기
모바일 웹 구성요소
모바일 웹
콘텐츠
사용자제작자
• 웹표준 +최신기술
• 개발 SDK
• 프레임 웍• 평가 도구
• 디바이스• 운영체제• 브라우저• 네트워크• 사용자
입력 / 반응
One Web
• W3C’s One Web– 어떠한 기기에 상관없이 사용자는 동일한 정보와 서비스를 이용할 수
있어야 함 .– 그러나 , 동일한 정보가 모든 기기에서 동일하게 보이지 않을 수도
있음 .
• 모바일 웹의 차이점– 다른 출력 : screen size, device capavilities– 다른 반응 : user behavior, browser behavior, input meth-
ods– 다른 접근 : low notwork, wifi, transcoders
모바일 웹과 멀티 디바이스의 험난 여정을 떠나볼까요 ?
모바일 웹 제작
• 보편적 – 좋은 콘텐츠와 디자인 , 사용성– 웹 표준 (+ 접근성 ) 준수 , 구조 / 표현 / 동작 분리
• 모바일 웹– 유연한 디자인– 점진적 기능 향상 , 최신 기술 적극 활용– 웹 페이지 최적화
(-o-);;
돌발 퀴즈 : 다음의 기호는 CSS 에서 무엇을 의미할까요 ?
상품 : 웹 사이트 최적화 기법 , UI 개발자를 위한 필수 지침서 by 스티브 사우더스
CSS3 와 밴더 확장 속성
• CSS 2.1 의 벤더 전용 확장 속성-ms-, mso-, -moz-, -webkit-, -o-
• CSS 3 와 벤더 전용 확장 속성border-radious, border-imagebox-sizing, box-shadow, text-shadowcolumns, column-count, column-gap, column-rule,
미디어 쿼리
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%; }
}
미디어 쿼리
모바일 기기별 스타일 제공 <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">
viewport
Viewportwidth: default(980px)scale: none
Viewportwidth: 320pxscale: 1.0
Viewportwidth: 320pxscale: 1.5
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">
viewport - 아이폰과 옴니아 2
아이폰을 기준으로 옴니아 viewport 설정
<meta name="viewport" content="width=device-width; initial-
scale=0.75;
maximum-scale=0.75; “/>
해상도 :480x800px
해상도 :320x480px
선택자
• 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)
다운로드 웹 폰트
• 기본 사용법@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; }
멀티 컬럼
• 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;
}
둥근 모서리
• 3x3 이미지는 잊자 .#pref ul {
border: 1px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}#pref li {
border-top: 1px solid #ccc;}#pref li:first-child {
border: 0}
min/max width/heightmin/max-width/height
box-s iz ing
• 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 와 함께 사용 불가
opaci ty
• 다양한 투명도를 블랜딩하기
#trans {opacity: 0.4;-moz-opacity: 0.4;-webkit-opacity: 0.4;filter:alpha(opacity=40);
}
disp lay
• 격자 그리드 레이아웃은 테이블 레이아웃으로 ~
#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;}
웹 페이지 최적화
• HTTP 요청 줄이기
• 콘텐츠 전송 네트워크 사용
• 헤더에 만료기한 추가
• Gzip 컴포넌트
• 스타일시트는 위에 두기
• 스크립트는 아래에 두기
• CSS Expression 피하기
• JS 와 CSS 압축
• 25kb 이하로 줄이기
• JS 와 CSS 는 외부 파일로
• DNS 조회 줄이기
• 자바스크립트 최소화
• 리다이렉트 피하기
• 중복 스크립트 제거
• ETag 설정
• Ajax 캐시 지정
• DOM 접근 줄이기
• 이미지 압축
Yahoo! 최적화 규칙 http://developer.yahoo.com/performance/rules.html
영감 , 참조모방은 창조의 어머니 by 아리스토텔레스
http://www.mobileawesomeness.com/
http://mobify.me/gallery/
http://www.cssiphone.com/
가이드 , 지침 , 테스트
모바일 웹 관련 기관 / 활동 / 가이드
• 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
http://validator.w3.org/mobile/
http://v.mobileok.kr/
http://ready.mobi/launch.jsp
http://itunes.apple.com/app/liveview/id301069270
http://www.phonegap.com/
Adobe DeviceCentral
더 늦지 않게 ... 모바일 웹과 멀티 디바이스 세계로 떠나봅시다 !