반응형 웹디자인 1. 가변 그리드(상대적 폰트) 2. 가변 이미지 3. 미디어 쿼리 4. 가변 그리드, 이미지, 미디어 쿼리의 결합
- 최초 등록일
- 2016.04.29
- 최종 저작일
- 2015.11
- 29페이지/ MS 파워포인트
- 가격 1,000원
목차
1. 반응형 웹디자인의 등장 배경
2. 반응형 웹디자인이란?
3. 반응형 웹디자인의 장점
4. 반응형 웹디자인의 핵심 속성
5.가변 그리드
5-1. 레이아웃 패턴 체크 포인트
5-2. 레이아웃 패턴 1 - Mostly Fluid
5-3. 레이아웃 패턴 2 - Column Drop
5-4. 레이아웃 패턴 3 - Layout Shifter
5-5. 레이아웃 패턴 4 - Tiny Tweaks
5-6. 레이아웃 패턴 5 - Off Canvas
6. 가변그리드 공식
7. 상대적 폰트
8. 가변 이미지
9. 미디어 쿼리
10. 미디어 쿼리 등장 배경
11. 미디어 쿼리와 가변 그리드/이미지 결합
12. 미디어 쿼리 사용법
13. 참고 사이트/ 참고 서적
본문내용
-반응형 웹디자인의 등장 배경
새로운 브라우저 및 다양한 사이즈 기기의 등장
모바일의 성장과 다양한 태블릿 PC의 등장
웹디자인 영역에서 사용자의 편의성을 위해 시장에 진입하고 있는 각기 다른 기기와 그에 따른 해상도를 따라잡는 것이 점점 어려워지고 있다.
데스크탑과 모바일에서 보여지는 사이트 별도 개발
데스크탑에서 보여지는 웹사이트와 모바일로 제공되는 사이트의 디자인과 기능이 서로 다르다.
반응형 웹디자인이란?
(Responsive Web Design)
하나의 웹으로 다양한 환경의 사용자들이 사용할 수 있게 하는 것
(예 : http://pr.hyundai.com/#/pages/main.aspx)
너비에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 미디어쿼리가 어우러져서 특정 환경에 '최적화' 된 방법이 아니라 환경에 반응하여 스스로 적응하는 방법.
반응형 웹디자인의 장점
새로운 기기 출현에 따른 별도 개발 이슈를 줄여 효율적인 관리가 가능
참고 자료
반응형 웹디자인의 정의 및 레이아웃 패턴
http://blog.naver.com/wowhji?Redirect=Log&logNo=30159477650&from=section
반응형 웹디자인
저자: 제프리 젤드먼(Jeffrey Zeldman), 이단 마콧(Ethan Marcotte)