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