반응형 웹/RWD (Responsive Web Design)에 대한 정의

이롭게 내부 세미나
/ 반응형웹 /
RWD (Responsive Web Design)

Where to go

• Why
– responsive web design works
• What
– responsive web design means
• How
– to do responsive web design

등장 배경

• N-Screen 시대 / 다양한 기기 등장
• 스마트폰 점유율 상승
• 구형 브라우저 점유율 하락
• …

반응형웹이란…

• 모든 뷰포트에서
최적의 콘텐츠가 보이게 하는 것

• 웹 디자인의 접근 방식의 변화

반응형 웹의 3요소

• FLUID GRIDS
• FLEXIBLE(RESPONSIVE) IMAGES
• MEDIA QUERIES

by Ethan Marcotte

반응형 웹 디자인을 선택하기 전

• 고객이 가장 빠르게 성장하고 있는
인터넷 사용자 지원을 원하는가?

• 고객이 깨끗하고 빠르며
유지보수가 쉬운 코드 베이스를 원하는가?

• 고객이 브라우저 별로 적용돼야 할
사용자 경험이나 방법이 다르다는 사실을 이해하고 있는가?

• 고객이 IE8 이하의 구 버전의 브라우저를 포함하는
모든 브라우저에서 디자인이 동일하게 보이기를 원하는가?

• 현재 또는 예상되는 사이트 방문자의 70% 이상이
IE8이나 구 버전의 브라우저를 사용하고 있는가?

* 반응형 디자인이 항상 올바른 선택은 아니다.
© 반응형 웹 디자인 (에이콘출판사) http://www.aladin.co.kr/shop/wproduct.aspx?ISBN=8960773484

이미지 / 오브젝트 처리

• max-width

• 자바스크립트 또는 서버단에서 처리
– 스크린 크기에 맞는 이미지 제공
– Html5 스펙으로도 현재 개발 중

CSS3 !

• border-radius
• box-shadow
• media queries
• gradient
• background-size
• transition / transform
• …

미디어 쿼리

• CSS3의 일부 http://caniuse.com/#search=@media
• 특정 기기의 능력에 따라 css를 적용

• 미디어 쿼리의 판단 목록
– width / device-width
– height / device-height
– orientation
– color
– resolution
– …

@media

@media screen and (device-width:320px) {
/* css … */
}

@media all and (orientation:portrait) {
/* css … */
}

http://codepen.io/reedids/pen/xFusi

Break point

/* 모든 화면에서 공통으로 사용하는 css */

@media screen and (min-width: 768px) {
/* 화면 너비가 768px 이상인 화면을 위한 css */
}

/* 큰 화면을 위한 css */
}

Break point

/* 모든 화면에서 공통으로 사용하는 css */

@media screen and (max-width: 767px) {
/* … */
}

@media screen and (min-width: 768px) and (max-width: 979px) {
/* … */
}

/* … */
}

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/ 에 가서 한 번 해봅시다 

반응형 & 적응형

http://iropke.com/proposal/HiSeoul/

정리 – 미디어 쿼리

• CSS3의 일부이다.
• 반응형 웹의 핵심 기술
• 자바스크립트로 대체 가능
• 브레이크 포인트

• 유동적인 레이아웃이 필요하다.

그리드 Grid / 레이아웃 Layout

Fluid, Liquid, Flex, Proportional
유동적인, 유연한, 비례하는

유동적인 레이아웃

• uses percentage widths to adapt to
size of viewport

= 너비에 %값을 사용한다!

정리 – 유동적인 레이아웃

• 너비값을 %로
• 반응형 웹으로 가는 1단계
• 브레이크 포인트 사이를 자연스럽게

NEXT : HTML5

<!DOCTYPE html>

반응형 웹 디자인을 위한 html5, css3

반응형 웹/RWD (Responsive Web Design)에 대한 정의

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

반응형 웹/RWD (Responsive Web Design)에 대한 정의