Responsive web

736 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Responsive web

  1. 1. 모든 스크린에 서비스 가능핚 “Responsive Web”Responsive Web반응형 웹과 모바일 웹에 관핚 이야기
  2. 2. Mobile?1. (고정되지 않고 쉽고 빠르게) 이동하는..2. 고정되어 있지 않은
  3. 3. Laptop WEB? Mobile WEB ?
  4. 4. iPad 가로 SmartPhone iPad 세로PCOptimization?
  5. 5. HTML IMAGE CSS JAVASCRIPT무엇으로 만들까?
  6. 6. 200px = 17.5% ▷@media screen and (max-width:400px) Type ▷ Type
  7. 7. 피씨엔 미래의 사옥 일까요~?2022년 미래 사옥의 모습입니다.출입구가 12개라 도망가기 쉽습니다. gf피씨엔 미래의 사옥 일까요~?2022년 미래 사옥의 모습입니다.출입구가 12개라 도망가기 쉽습니다. Postani simpatizer피씨엔 미래의 사 Priključi se podpornikom ideje za옥 일까요~? zdravo in uravnoteženo preživljanje2022년 미래 사옥의 časa v družbi s spletom in모습입니다. sodobnimi tehnologijami.출입구가 12개라 도망가기 쉽습니다. Postani simpatizer Priključi se podpornikom ideje za zdravo in uravnoteženo preživljanje časa v družbi s spletom in sodobnimi tehnologijami.
  8. 8. UI나 UX 설계시 모바일을 최우선 초점에 맞춰 디자인 하자는 “전략”이자 “철학”Mobile-first responsive web design Luke Wroblewski
  9. 9. Problem
  10. 10. 이미지 리사이즈 등의많은시스템 자원소모 @media screen and (max-width:400px) { } @media screen and (max-width:1000px) { }불필요핚 데이터의 다운미디어쿼리 미지원 브라우저의 제약
  11. 11. Resolution
  12. 12. RESS:Responsive Design + Server-Side ComponentsUser Agent SniffingDynamic Script Loading
  13. 13.
  14. 14. Thank youResponsive Web Design

×