• Save
Responsive web
Upcoming SlideShare
Loading in...5
×
 

Responsive web

on

  • 590 views

 

Statistics

Views

Total Views
590
Views on SlideShare
590
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive web Responsive web Presentation Transcript

  • 모든 스크린에 서비스 가능핚 “Responsive Web”Responsive Web반응형 웹과 모바일 웹에 관핚 이야기
  • Mobile?1. (고정되지 않고 쉽고 빠르게) 이동하는..2. 고정되어 있지 않은
  • Laptop WEB? Mobile WEB ?
  • iPad 가로 SmartPhone iPad 세로PCOptimization?
  • HTML IMAGE CSS JAVASCRIPT무엇으로 만들까?
  • 200px = 17.5% ▷@media screen and (max-width:400px) Type ▷ Type
  • 피씨엔 미래의 사옥 일까요~?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.
  • UI나 UX 설계시 모바일을 최우선 초점에 맞춰 디자인 하자는 “전략”이자 “철학”Mobile-first responsive web design Luke Wroblewski
  • Problem
  • 이미지 리사이즈 등의많은시스템 자원소모 @media screen and (max-width:400px) { } @media screen and (max-width:1000px) { }불필요핚 데이터의 다운미디어쿼리 미지원 브라우저의 제약
  • Resolution
  • RESS:Responsive Design + Server-Side ComponentsUser Agent SniffingDynamic Script Loading
  • Thank youResponsive Web Design