Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
이롭게 내부 세미나    / 반응형웹 /RWD (Responsive Web Design)
Where to go• Why  – responsive web design works• What  – responsive web design means• How  – to do responsive web design
© http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
© http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
© http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
등장 배경•   N-Screen 시대 / 다양한 기기 등장•   스마트폰 점유율 상승•   구형 브라우저 점유율 하락•   …
반응형웹이란…• 모든 뷰포트에서  최적의 콘텐츠가 보이게 하는 것• 웹 디자인의 접근 방식의 변화
반응형 웹의 3요소• FLUID GRIDS• FLEXIBLE(RESPONSIVE) IMAGES• MEDIA QUERIES                by Ethan Marcotte
STEP1   STEP2   STEP3   STEP4
반응형 웹 디자인을 선택하기 전•     고객이 가장 빠르게 성장하고 있는      인터넷 사용자 지원을 원하는가?•     고객이 깨끗하고 빠르며      유지보수가 쉬운 코드 베이스를 원하는가?•     고객이 브라...
RESPONSIVE IMAGES
이미지 / 오브젝트 처리• max-width• 자바스크립트 또는 서버단에서 처리  – 스크린 크기에 맞는 이미지 제공  – Html5 스펙으로도 현재 개발 중
MEDIA QUERIES
CSS3 !•   border-radius•   box-shadow•   media queries•   gradient•   background-size•   transition / transform•   …
미디어 쿼리• CSS3의 일부 http://caniuse.com/#search=@media• 특정 기기의 능력에 따라 css를 적용• 미디어 쿼리의 판단 목록   –   width / device-width   –   ...
@media@media screen and (device-width:320px) {    /* css … */}@media all and (orientation:portrait) {    /* css … */}http:...
Break point/* 모든 화면에서 공통으로 사용하는 css */@media screen and (min-width: 768px) {      /* 화면 너비가 768px 이상인 화면을 위한 css */}@media...
Break point/* 모든 화면에서 공통으로 사용하는 css */@media screen and (max-width: 767px) {       /* … */}@media screen and (min-width: 7...
Responsive test javascriptjavascript:document.write(<!DOCTYPE html><html><head><meta charset="utf-8"><title>ResponsiveDesi...
반응형 & 적응형http://iropke.com/proposal/HiSeoul/
정리 – 미디어 쿼리•   CSS3의 일부이다.•   반응형 웹의 핵심 기술•   자바스크립트로 대체 가능•   브레이크 포인트• 유동적인 레이아웃이 필요하다.
Flexible / FluidGRID
그리드 Grid / 레이아웃 LayoutFluid, Liquid, Flex, Proportional 유동적인, 유연한, 비례하는
유동적인 레이아웃• uses percentage widths to adapt to  size of viewport = 너비에 %값을 사용한다!
정리 – 유동적인 레이아웃• 너비값을 %로• 반응형 웹으로 가는 1단계• 브레이크 포인트 사이를 자연스럽게
NEXT : HTML5     <!DOCTYPE html>반응형 웹 디자인을 위한 html5, css3
반응형 웹/RWD (Responsive Web Design)에 대한 정의
반응형 웹/RWD (Responsive Web Design)에 대한 정의
반응형 웹/RWD (Responsive Web Design)에 대한 정의
반응형 웹/RWD (Responsive Web Design)에 대한 정의
반응형 웹/RWD (Responsive Web Design)에 대한 정의
Upcoming SlideShare
Loading in …5
×

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

15,101 views

Published on

  • Be the first to comment

반응형 웹/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

×