CSS3 미디어쿼리와 스크린경계치

출처 : http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=167
https://docs.google.com/document/d/17iR_7DstddOKDQsdut7DNbc6y3b7CgsA7-qxsWUwo0g/edit?pli=1

목차

1. 우선 해야할 일
   1. viewport meta tag 설정
   2. IE9이하를 위한 설정
2. CSS3 미디어 쿼리
   1. 역사
   2. 문법
   3. 미디어 속성
   4. 예제
3. 스크린 경계치 (screen breakpoints)
   1. 대표적인 경계치
   2. 트위터 Bootstrap의 경계치
   3. mediaquri.es의 경계치
   4. 자연스러운 경계치 (natural breakpoints)
   5. 스크린 경계치 선택
4. 참고문헌/자료

   
   

강좌 내용 원본 링크

구글 문서 링크

2. 미디어 쿼리와 스크린 경계치

참고문헌/자료

1. html5-boilerplate, Viewport and Media Queries: The Complete Idiot's Guide, 구글문서, 2011
2. quirksmode.org, A pixel is not a pixel is not a pixel, 2010
3. 456bereastreet.com, Controlling text size in Safari for iOS without disabling user zoom, 2010.
4. W3C Recommendation, Media Queries, 2012
5. Safari Web Content Guide, Configuring the Viewport
6. Roger Johansson, Controlling text size in Safari for iOS without disabling user zoom, 456bereastreet.com, 2010
7. Android Developers, Targeting Screens from Web Apps
8. GionaF, css3-mediaqueries.js VS respond.js, Stack Overflow, 2011
9. Patrick Grady, Re-thinking Breakpoints in Responsive Design, 2012