반응형 웹/RWD (Responsive Web Design)에 대한 정의
Transcript of 반응형 웹/RWD (Responsive Web Design)에 대한 정의
![Page 1: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/1.jpg)
이롭게 내부 세미나/ 반응형웹 /
RWD (Responsive Web De-sign)
![Page 2: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/2.jpg)
Where to go
• Why – responsive web design works
• What – responsive web design means
• How– to do responsive web design
![Page 3: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/3.jpg)
© http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
![Page 4: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/4.jpg)
© http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
![Page 5: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/5.jpg)
© http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
![Page 6: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/6.jpg)
등장 배경
• N-Screen 시대 / 다양한 기기 등장• 스마트폰 점유율 상승• 구형 브라우저 점유율 하락• …
![Page 7: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/7.jpg)
반응형웹이란…
• 모든 뷰포트에서 최적의 콘텐츠가 보이게 하는 것
• 웹 디자인의 접근 방식의 변화
![Page 8: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/8.jpg)
반응형 웹의 3 요소
• FLUID GRIDS• FLEXIBLE(RESPONSIVE) IM-AGES• MEDIA QUERIES
by Ethan Marcotte
![Page 9: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/9.jpg)
STEP1 STEP2 STEP3 STEP4
![Page 10: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/10.jpg)
반응형 웹 디자인을 선택하기 전
• 고객이 가장 빠르게 성장하고 있는 인터넷 사용자 지원을 원하는가 ?
• 고객이 깨끗하고 빠르며 유지보수가 쉬운 코드 베이스를 원하는가 ?
• 고객이 브라우저 별로 적용돼야 할 사용자 경험이나 방법이 다르다는 사실을 이해하고 있는가 ?
• 고객이 IE8 이하의 구 버전의 브라우저를 포함하는 모든 브라우저에서 디자인이 동일하게 보이기를 원하는가 ?
• 현재 또는 예상되는 사이트 방문자의 70% 이상이 IE8 이나 구 버전의 브라우저를 사용하고 있는가 ?
* 반응형 디자인이 항상 올바른 선택은 아니다 .© 반응형 웹 디자인 ( 에이콘출판사 ) http://www.aladin.co.kr/shop/wproduct.aspx?ISBN=8960773484
![Page 11: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/11.jpg)
RESPONSIVE IMAGES
![Page 12: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/12.jpg)
이미지 / 오브젝트 처리
• max-width
• 자바스크립트 또는 서버단에서 처리–스크린 크기에 맞는 이미지 제공– Html5 스펙으로도 현재 개발 중
![Page 13: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/13.jpg)
MEDIA QUERIES
![Page 14: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/14.jpg)
CSS3 !
• border-radius• box-shadow• media queries• gradient• background-size• transition / transform• …
![Page 15: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/15.jpg)
미디어 쿼리
• CSS3 의 일부 http://caniuse.com/#search=@media
• 특정 기기의 능력에 따라 css 를 적용
• 미디어 쿼리의 판단 목록– width / device-width– height / device-height– orientation – color – resolution – …
![Page 16: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/16.jpg)
@media
@media screen and (device-width:320px) {/* css … */
}
@media all and (orientation:portrait) {/* css … */
}
http://codepen.io/reedids/pen/xFusi
![Page 17: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/17.jpg)
Break point
/* 모든 화면에서 공통으로 사용하는 css */
@media screen and (min-width: 768px) {/* 화면 너비가 768px 이상인 화면을 위한 css */
}
@media screen and (min-width: 980px) {/* 큰 화면을 위한 css */
}
![Page 18: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/18.jpg)
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) {/* … */
}
![Page 19: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/19.jpg)
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 - land-scape)</small></h2><iframe src="' + window.location + '" sandbox="allow-same-origin al-low-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/ 에 가서 한 번 해봅시다
![Page 20: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/20.jpg)
반응형 & 적응형
http://iropke.com/proposal/HiSeoul/
![Page 21: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/21.jpg)
정리 – 미디어 쿼리
• CSS3 의 일부이다 . • 반응형 웹의 핵심 기술• 자바스크립트로 대체 가능• 브레이크 포인트
• 유동적인 레이아웃이 필요하다 .
![Page 22: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/22.jpg)
GRIDFlexible / Fluid
![Page 23: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/23.jpg)
그리드 Grid / 레이아웃 Layout
Fluid, Liquid, Flex, Proportional유동적인 , 유연한 , 비례하는
![Page 24: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/24.jpg)
![Page 25: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/25.jpg)
유동적인 레이아웃
• uses percentage widths to adapt to size of viewport
= 너비에 % 값을 사용한다 !
![Page 28: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/28.jpg)
![Page 30: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/30.jpg)
정리 – 유동적인 레이아웃
• 너비값을 % 로• 반응형 웹으로 가는 1 단계• 브레이크 포인트 사이를 자연스럽게
![Page 31: 반응형 웹/RWD (Responsive Web Design)에 대한 정의](https://reader036.fdocument.pub/reader036/viewer/2022081418/556357ead8b42aed538b529a/html5/thumbnails/31.jpg)
NEXT : HTML5
<!DOCTYPE html>
반응형 웹 디자인을 위한 html5, css3