[모음글] 반응형웹
왼쪽이 적응형 오른쪽이 반응형..
엄밀히 말하면, media query 사용해서 PC용 스마트패드용 스마트폰용 이렇게 3개의 스타일 만들어서 사용하는 것이 적응형.
반응형은, 3가지 스타일 만들어 놓는 것이 아니라 화면 사이즈에 맞게 항상 변하는 넘.
모바일 기기도 PC 라고 보는 견해와 아니라는 견해가 있지만, 암튼..
스크린 크기에 따라 화면 레이아웃이 변형되도록 작업하는 것이 반응형웹의 취지인듯..
한 번 작성해서 여러 스크린을 커버한다는 실용적인 기법.
1. 플랫폼/플러그인/프레임웍
트위터 bootstrap 반응형웹 레이아웃
http://helloworld.naver.com/helloworld/67876
Masonry 반응형웹 라이브러리, MIT 라이센스
http://masonry.desandro.com/docs/intro.html
http://www.haeyounglee.com/tutorials/javascript/pinterest-layout-jquery-superfish
jQuery Masonry
http://sir.co.kr/bbs/board.php?bo_table=g4_plugin&wr_id=14563
Foundation 반응형웹 라이브러리, MIT 라이센스
화면 크기에 맞춰 이미지 리사이징하는 플러그인
2. 개념글
화면 크기에 맞춰 UI 가 변경.
http://blog.naver.com/kipfa/70133197348
반응형 웹 고민할 문제..
http://helloworld.naver.com/helloworld/81480
- 웹브라우저 하위 호환성
- 성능 (CSS, JS)
- 네비게이션
- 개발편의
UX 트렌드
http://userexperience.tistory.com/297
반응형 웹 기획론
http://www.slideshare.net/YoungAhKim/ss-11348360
모바일 퍼스트, 반응형웹
http://study.gnuboard.org/wiki/read/studygroup/rwd/Mobile-First-and-RWD
반응형 웹 컨퍼런스
http://spoqa.github.com/2012/08/16/make-a-responsive-web.html
3. 잘 만들어진 웹사이트
http://www.zazzle.com/3200tigers
4. 기타
javascript 로 반응형 웹 지원
http://github.com/ten1seven/jRespond
1분만에 반응형 웹사이트 만들어준다고..
http://www.1stwebdesigner.com/css/responsive-website-tutorial/
반응형웹 25개 웹사이트 분석했다네요. 결론은, IE6.x 를 버릴 수 있을까..?
http://www.slideshare.net/leeseungje/25-14080430
http://blog.saltfactory.net/199, CSS3 1/2
http://blog.saltfactory.net/200, CSS3 2/2
*. 반응형 웹 기획론
http://sanghyuns.com/wp/rwd%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9-%ED%95%B4%EC%83%81%EB%8F%84/
요즘 모바일 해상도 환경
http://www.slideshare.net/YoungAhKim/ss-11348360
예시 화면 샘플들..
.css
http://v.daum.net/link/32274065
http://stuffandnonsense.co.uk/content/dl/2010/09/30/hardboiledmediaqueries.0.9.css