1. 모든 스크린에 서비스 가능핚 “Responsive Web”
Responsive Web
반응형 웹과 모바일 웹에 관핚 이야기

2. Mobile?
1. (고정되지 않고 쉽고 빠르게) 이동하는..
2. 고정되어 있지 않은

3. Laptop WEB?
Mobile WEB
?

6. iPad 가로
SmartPhone
iPad 세로PC
Optimization?

8. HTML
IMAGE
CSS
JAVASCRIPT
무엇으로 만들까?

9. 200px = 17.5%
▷
@media screen and (max-width:400px)
Type ▷ Type

14. 피씨엔 미래의 사옥 일까요~?
2022년 미래 사옥의 모습입니다.
출입구가 12개라 도망가기 쉽습니다.
gf
피씨엔 미래의 사옥 일까요~?
2022년 미래 사옥의 모습입니다.
출입구가 12개라 도망가기 쉽습니다.
Postani simpatizer
피씨엔 미래의 사 Priključi se podpornikom ideje za
옥 일까요~? zdravo in uravnoteženo preživljanje
2022년 미래 사옥의 č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.

17. UI나 UX 설계시 모바일을 최우선 초점에 맞춰 디자인 하자는 “전략”이자 “철학”
Mobile-first responsive web design Luke Wroblewski

18. Problem

19. 이미지 리사이즈 등의
많은시스템 자원소모
@media screen and (max-width:400px) {
}
@media screen and (max-width:1000px) {
}
불필요핚 데이터의 다운
미디어쿼리 미지원 브라우저의 제약

20. Resolution

21. RESS:Responsive Design + Server-Side Components
User Agent Sniffing
Dynamic Script Loading

24. ∞

26. Thank you
Responsive Web Design