반응형 웹/RWD (Responsive Web Design)에 대한 정의1. 이롭게 내부 세미나
/ 반응형웹 /
RWD (Responsive Web Design)
2. Where to go
• Why
– responsive web design works
• What
– responsive web design means
• How
– to do responsive web design
6. 등장 배경
• N-Screen 시대 / 다양한 기기 등장
• 스마트폰 점유율 상승
• 구형 브라우저 점유율 하락
• …
8. 반응형 웹의 3요소
• FLUID GRIDS
• FLEXIBLE(RESPONSIVE) IMAGES
• MEDIA QUERIES
by Ethan Marcotte
9. STEP1 STEP2 STEP3 STEP4
10. 반응형 웹 디자인을 선택하기 전
• 고객이 가장 빠르게 성장하고 있는
인터넷 사용자 지원을 원하는가?
• 고객이 깨끗하고 빠르며
유지보수가 쉬운 코드 베이스를 원하는가?
• 고객이 브라우저 별로 적용돼야 할
사용자 경험이나 방법이 다르다는 사실을 이해하고 있는가?
• 고객이 IE8 이하의 구 버전의 브라우저를 포함하는
모든 브라우저에서 디자인이 동일하게 보이기를 원하는가?
• 현재 또는 예상되는 사이트 방문자의 70% 이상이
IE8이나 구 버전의 브라우저를 사용하고 있는가?
* 반응형 디자인이 항상 올바른 선택은 아니다.
© 반응형 웹 디자인 (에이콘출판사) http://www.aladin.co.kr/shop/wproduct.aspx?ISBN=8960773484
12. 이미지 / 오브젝트 처리
• max-width
• 자바스크립트 또는 서버단에서 처리
– 스크린 크기에 맞는 이미지 제공
– Html5 스펙으로도 현재 개발 중
14. CSS3 !
• border-radius
• box-shadow
• media queries
• gradient
• background-size
• transition / transform
• …
15. 미디어 쿼리
• CSS3의 일부 http://caniuse.com/#search=@media
• 특정 기기의 능력에 따라 css를 적용
• 미디어 쿼리의 판단 목록
– width / device-width
– height / device-height
– orientation
– color
– resolution
– …
16. @media
@media screen and (device-width:320px) {
/* css … */
}
@media all and (orientation:portrait) {
/* css … */
}
http://codepen.io/reedids/pen/xFusi
17. Break point
/* 모든 화면에서 공통으로 사용하는 css */
@media screen and (min-width: 768px) {
/* 화면 너비가 768px 이상인 화면을 위한 css */
}
@media screen and (min-width: 980px) {
/* 큰 화면을 위한 css */
}
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. Responsive test javascript
javascript:document.write('<!DOCTYPE html><html><head><meta charset="utf-8"><title>Responsive
Design 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> x
640</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><div
class="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/ 에 가서 한 번 해봅시다
21. 정리 – 미디어 쿼리
• CSS3의 일부이다.
• 반응형 웹의 핵심 기술
• 자바스크립트로 대체 가능
• 브레이크 포인트
• 유동적인 레이아웃이 필요하다.
23. 그리드 Grid / 레이아웃 Layout
Fluid, Liquid, Flex, Proportional
유동적인, 유연한, 비례하는
25. 유동적인 레이아웃
• uses percentage widths to adapt to
size of viewport
= 너비에 %값을 사용한다!
30. 정리 – 유동적인 레이아웃
• 너비값을 %로
• 반응형 웹으로 가는 1단계
• 브레이크 포인트 사이를 자연스럽게