Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

반응형 웹 디자인

한국IT전문학교
by

Lim Ki Ung

on 1 August 2017

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of 반응형 웹 디자인

가변 그리드
Fluid Grid
모든 요소는 %
화면의 크기에 관계없이 자유롭게 늘어나거나 줄어들게 만든다.
Fluid Layout
Flexible Layout
Flexible Grid
#wrapper {
width:970px;
height:500px;
margin:0 auto;
background:red;
}
가변 그리드
Fluid Grid
모든 브라우저 크기에 대응하는 박스를 만들려면?
Fluid Grid
Viewport
Media Queries
Responsive Web Design
가변 그리드
Fluid Grid
Target / Context = Result x 100
뷰포트
viewport
모니터나 기기의 화면을 통해 보이는 영역
나는 980px이여~
http://yssmi.dothome.co.kr/size/size.html
아냐, 니 브라우저의 가로크기에 맞춰!

<meta name="viewport" content="
user-scalable
=no,
initial-scale
=1.0,
maximum-scale
=1.0,
minimum-scale
=1.0,
width=device-width
" />
뷰 포트를 조정해서 1:1비율로 보여 줄 수 있는 메타태그
해상도 확인
스마트폰의 해상도와 (폰에 내장된) 브라우저의 해상도는 다르다.

아이폰 전 제품의 가로값 : 320px
갤럭시S3 : 360px
갤럭시 노트 : 400px

보통 디바이스 해상도의 절반 크기
http://uhb.kr/resolution
미디어쿼리
Media Queries
넌 어떤 종류의 미디어니?
화면 크기는 몇?
기기의 환경또는 종류를 감지해 그 기기에 맞게 웹사이트의 구조를 바꾼다.
@media all and (min-width:320px){
body {
background:red;
}
}
미디어쿼리
Media Queries
모든 미디어에서 가로 크기가
최소 320px 이상
일 때
<style type="text/css">
body {background:red;}

@media all and (min-width:320px){
body {background:orange;}
}
@media all and (min-width:768px){
body {background:yellow;}
}
@media all and (min-width:960px){
body {background:green;}
}
</style>
미디어쿼리
Media Queries
all
print
screen
tv
projection
handheld
speech
aural
embossed
tty
braille
모든 장치
인쇄 장치
컴퓨터 화면 또는 스마트 기기의 화면
영상과 음성이 동시에 출력되는 장치
프로젝터 장치
손에 들고 다니는 소형 장치
음성 출력 장치
음성 합성 장치
점자 인쇄 장치
디스플레이 기능이 제한된 장치
점자 표시 장치
PC는 사용자가 지정한 해상도에 따라 보이는 영역이 결정된다.
스마트 기기는
기본 설정값
이 자동으로 보이는 영역을 결정한다.
미디어쿼리
Media Queries
@media all
and
(min-width:320px){

}
앞뒤 조건이
모두
사실일 때
@media all and (min-width:320px) and (max-width:768px){

}
미디어쿼리
Media Queries
min

max
최소, 이상

최대, 이하
context
1. (어떤 일의) 맥락, 전후 사정
2. (글의) 맥락, 문맥
픽셀을 %로 바꾸는 공식
마진
margin
고정마진을 가변으로!
마진
margin
고정마진을 가변으로!
마진
margin
고정마진을 가변으로!
패딩
padding
고정패딩을 가변으로!
패딩
padding
어떤 박스에 포함된 경우
고정패딩을 가변으로!
http://ipsum-generator.com/
가변 레이아웃 + 고정 여백
Multi-Device Layout Patterns
by Luke Wroblewski
width : 1000px
height : 300px
width : 1000px (200px, 600px, 200px)
height : 700px
height : 300px
width : 1000px (200px, 800px)
height : 800px (400px, 400px)
http://mediaqueri.es/
하위 브라우저 대응
IE8 이하에서 HTML5, CSS3, 미디어쿼리 사용하기
IE9.js
html5shiv
respond.js
IE를 인간답게
IE9.js
IE6~8을 IE9처럼 보이게 만들기
IE7 자바스크립트 라이브러리
IE7은 IE가 표준을 준수하는 브라우저처럼 행동하게 만드는 자바스크립트 라이브러리
IE5.5~6 을 IE7처럼 보이게

IE5.5~8을 IE9처럼 보이게

IE5.5~8을 IE9처럼 보이게
IE7.js

IE8.js

IE9.js
http://aboooks.tistory.com/341
IE9.js
적용하기
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
CDN
Download
*IE9.js를 사용하면 IE7/IE8.js를 추가할 필요 없음.
https://code.google.com/archive/p/ie7-js/downloads
html5요소를 인식해라
새로운 HTML5 섹셔닝 요소를 이전 버전의 IE6~9, Safari 4.x(iPhone 3.x)와 Firefox 3.x 에서도 작동하도록 해주는 라이브러리
html5shiv
https://cdnjs.com/libraries/html5shiv/
<header><footer><aside><nav><section><article>
미디어쿼리를 쓰고 싶다
https://github.com/scottjehl/Respond/


<!--[if lt IE 9]>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
IE 6~8 버전 브라우저에서도 미디어쿼리를 해석할 수 있도록 만들어 주는 자바스크립트 라이브러리
respond.min.js
https://cdnjs.com/libraries/respond.js/


html5shiv
적용하기
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
CDN
Download
https://github.com/afarkas/html5shiv
CDN
Download
Full transcript