반응형 웹/RWD (Responsive Web Design)에 대한 정의

10,272 views
9,919 views

Published on

반응형 웹/RWD (Responsive Web Design)에 대한 정의

  1. 1. 이롭게 내부 세미나 / 반응형웹 /RWD (Responsive Web Design)
  2. 2. Where to go• Why – responsive web design works• What – responsive web design means• How – to do responsive web design
  3. 3. © http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  4. 4. © http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  5. 5. © http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
  6. 6. 등장 배경• N-Screen 시대 / 다양한 기기 등장• 스마트폰 점유율 상승• 구형 브라우저 점유율 하락• …
  7. 7. 반응형웹이란…• 모든 뷰포트에서 최적의 콘텐츠가 보이게 하는 것• 웹 디자인의 접근 방식의 변화
  8. 8. 반응형 웹의 3요소• FLUID GRIDS• FLEXIBLE(RESPONSIVE) IMAGES• MEDIA QUERIES by Ethan Marcotte
  9. 9. STEP1 STEP2 STEP3 STEP4
  10. 10. 반응형 웹 디자인을 선택하기 전• 고객이 가장 빠르게 성장하고 있는 인터넷 사용자 지원을 원하는가?• 고객이 깨끗하고 빠르며 유지보수가 쉬운 코드 베이스를 원하는가?• 고객이 브라우저 별로 적용돼야 할 사용자 경험이나 방법이 다르다는 사실을 이해하고 있는가?• 고객이 IE8 이하의 구 버전의 브라우저를 포함하는 모든 브라우저에서 디자인이 동일하게 보이기를 원하는가?• 현재 또는 예상되는 사이트 방문자의 70% 이상이 IE8이나 구 버전의 브라우저를 사용하고 있는가? * 반응형 디자인이 항상 올바른 선택은 아니다. © 반응형 웹 디자인 (에이콘출판사) http://www.aladin.co.kr/shop/wproduct.aspx?ISBN=8960773484
  11. 11. RESPONSIVE IMAGES
  12. 12. 이미지 / 오브젝트 처리• max-width• 자바스크립트 또는 서버단에서 처리 – 스크린 크기에 맞는 이미지 제공 – Html5 스펙으로도 현재 개발 중
  13. 13. MEDIA QUERIES
  14. 14. CSS3 !• border-radius• box-shadow• media queries• gradient• background-size• transition / transform• …
  15. 15. 미디어 쿼리• CSS3의 일부 http://caniuse.com/#search=@media• 특정 기기의 능력에 따라 css를 적용• 미디어 쿼리의 판단 목록 – width / device-width – height / device-height – orientation – color – resolution – …
  16. 16. @media@media screen and (device-width:320px) { /* css … */}@media all and (orientation:portrait) { /* css … */}http://codepen.io/reedids/pen/xFusi
  17. 17. Break point/* 모든 화면에서 공통으로 사용하는 css */@media screen and (min-width: 768px) { /* 화면 너비가 768px 이상인 화면을 위한 css */}@media screen and (min-width: 980px) { /* 큰 화면을 위한 css */}
  18. 18. Break point/* 모든 화면에서 공통으로 사용하는 css */@media screen and (max-width: 767px) { /* … */}@media screen and (min-width: 768px) and (max-width: 979px) { /* … */}@media screen and (min-width: 980px) { /* … */}
  19. 19. Responsive test javascriptjavascript:document.write(<!DOCTYPE html><html><head><meta charset="utf-8"><title>ResponsiveDesign Testing</title><style>body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }.wrapper { width:6000px; }.frame { float: left; }h2 { margin: 0 0 5px 0; }iframe { margin: 0 20px 20px 0; border: 1px solid#666; }</style></head><body><div class="wrapper"><div class="frame"><h2>320<span> x 480</span><small>(mobile)</small></h2><iframe src=" + window.location + " sandbox="allow-same-origin allow-forms" seamless width="320" height="480"></iframe></div><div class="frame"><h2>480<span> x640</span> <small>(small tablet)</small></h2><iframe src=" + window.location + " sandbox="allow-same-origin allow-forms" seamless width="480" height="640"></iframe></div><div class="frame"><h2>768<span>x 1024</span> <small>(tablet - portrait)</small></h2><iframe src=" + window.location + " sandbox="allow-same-origin allow-forms" seamless width="768" height="1024"></iframe></div><divclass="frame"><h2>1024<span> x 768</span> <small>(tablet - landscape)</small></h2><iframe src=" +window.location + " sandbox="allow-same-origin allow-forms" seamless width="1024"height="768"></iframe></div><div class="frame"><h2>1200<span> x 800</span><small>(desktop)</small></h2><iframe src=" + window.location + " sandbox="allow-same-origin allow-forms" seamless width="1200" height="800"></iframe></div></div></body></html>)© http://mattkersley.com/responsive/http://mediaqueri.es/ 에 가서 한 번 해봅시다 
  20. 20. 반응형 & 적응형http://iropke.com/proposal/HiSeoul/
  21. 21. 정리 – 미디어 쿼리• CSS3의 일부이다.• 반응형 웹의 핵심 기술• 자바스크립트로 대체 가능• 브레이크 포인트• 유동적인 레이아웃이 필요하다.
  22. 22. Flexible / FluidGRID
  23. 23. 그리드 Grid / 레이아웃 LayoutFluid, Liquid, Flex, Proportional 유동적인, 유연한, 비례하는
  24. 24. 유동적인 레이아웃• uses percentage widths to adapt to size of viewport = 너비에 %값을 사용한다!
  25. 25. 정리 – 유동적인 레이아웃• 너비값을 %로• 반응형 웹으로 가는 1단계• 브레이크 포인트 사이를 자연스럽게
  26. 26. NEXT : HTML5 <!DOCTYPE html>반응형 웹 디자인을 위한 html5, css3

×