Embed Size (px)
Citation preview
이롭게 내부 세미나/ 반응형웹 /
RWD (Responsive Web De-sign)
Where to go
• Why – responsive web design works
• What – responsive web design means
• How– to do responsive web design
© http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
© http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
© http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web
등장 배경
• N-Screen 시대 / 다양한 기기 등장• 스마트폰 점유율 상승• 구형 브라우저 점유율 하락• …
반응형웹이란…
• 모든 뷰포트에서 최적의 콘텐츠가 보이게 하는 것
• 웹 디자인의 접근 방식의 변화
반응형 웹의 3 요소
• FLUID GRIDS• FLEXIBLE(RESPONSIVE) IM-AGES• MEDIA QUERIES
by Ethan Marcotte
STEP1 STEP2 STEP3 STEP4
반응형 웹 디자인을 선택하기 전
• 고객이 가장 빠르게 성장하고 있는 인터넷 사용자 지원을 원하는가 ?
• 고객이 깨끗하고 빠르며 유지보수가 쉬운 코드 베이스를 원하는가 ?
• 고객이 브라우저 별로 적용돼야 할 사용자 경험이나 방법이 다르다는 사실을 이해하고 있는가 ?
• 고객이 IE8 이하의 구 버전의 브라우저를 포함하는 모든 브라우저에서 디자인이 동일하게 보이기를 원하는가 ?
• 현재 또는 예상되는 사이트 방문자의 70% 이상이 IE8 이나 구 버전의 브라우저를 사용하고 있는가 ?
* 반응형 디자인이 항상 올바른 선택은 아니다 .© 반응형 웹 디자인 ( 에이콘출판사 ) http://www.aladin.co.kr/shop/wproduct.aspx?ISBN=8960773484
RESPONSIVE IMAGES
이미지 / 오브젝트 처리
• max-width
• 자바스크립트 또는 서버단에서 처리–스크린 크기에 맞는 이미지 제공– Html5 스펙으로도 현재 개발 중
MEDIA QUERIES
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 */
}
@media screen and (min-width: 980px) {/* 큰 화면을 위한 css */
}
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) {/* … */
}
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/ 에 가서 한 번 해봅시다
반응형 & 적응형
http://iropke.com/proposal/HiSeoul/
정리 – 미디어 쿼리
• CSS3 의 일부이다 . • 반응형 웹의 핵심 기술• 자바스크립트로 대체 가능• 브레이크 포인트
• 유동적인 레이아웃이 필요하다 .
GRIDFlexible / Fluid
그리드 Grid / 레이아웃 Layout
Fluid, Liquid, Flex, Proportional유동적인 , 유연한 , 비례하는
유동적인 레이아웃
• uses percentage widths to adapt to size of viewport
= 너비에 % 값을 사용한다 !
정리 – 유동적인 레이아웃
• 너비값을 % 로• 반응형 웹으로 가는 1 단계• 브레이크 포인트 사이를 자연스럽게
NEXT : HTML5
<!DOCTYPE html>
반응형 웹 디자인을 위한 html5, css3
![[Td 2015]너에게만 나는 반응해 반응형 응용프로그램(이규원)](https://img.pdfslide.tips/doc/110x75/5878c3ce1a28ab26728b5943/td-2015--58bb9d81e0964.jpg)
