"뷰포트"의 두 판 사이의 차이

2021년 9월 24일 (금) 23:17 기준 최신판

1 개요[ | ]

viewport
뷰포트

웹페이지에서 실제 사용자가 볼 수 있는 영역
뷰포트는 디바이스에 따라 각각 다른 값을 가짐
타블렛, 모바일폰이 등장하기 전까지는 컴퓨터 스크린에 맞춰 사이즈가 고정된 경우가 일반적임

2 뷰포트 기초예제[ | ]

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=480,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />
<title>제목</title>
</head>
<body>
<p>내용</p>
</body>
</html>

→ 너비 480 픽셀. 확대축소 가능. 초기배율 1.0. 최대 배율 3.0

3 속성[ | ]

다음과 속성들이 있다.

속성	의미	값
width	너비 (단위: px)	200~10000. 또는 device-width
height	높이 (단위: px)	223~10000. 또는 device-height
initial-scale	초기 배율
minimum-scale	최소 배율	0.0 ~ 10.0 (기본값 0.25)
maximum-scale	최대 배율	0.0 ~ 10.0
user-scalable	확대/축소 가능 여부	yes 또는 no

아이폰의 경우 뷰포트를 지정하지 않으면 뷰포트의 너비는 980px이 된다.

예제

<meta name="viewport" content="width=device-width, user-scalable=no" />

→ 기기 화면 크기에 맞추고 고정(확대축소 불가).

4 아이폰 화면 크기[ | ]

스마트폰 화면 크기 문서를 참고하십시오.

아이폰: 320 x 480 px

Status Bar 높이: 20px
URL Bar 높이: 60px
Button Bar 높이: 44px

5 같이 보기[ | ]

6 참고[ | ]

http://www.w3schools.com/css/css_rwd_viewport.asp

@@ 1번째 줄: / 1번째 줄: @@
-*뷰포트, viewport
+==개요==
+;viewport
+;뷰포트
+*웹페이지에서 실제 사용자가 볼 수 있는 영역
+*뷰포트는 디바이스에 따라 각각 다른 값을 가짐
+*타블렛, 모바일폰이 등장하기 전까지는 컴퓨터 스크린에 맞춰 사이즈가 고정된 경우가 일반적임
 ==뷰포트 기초예제==
-<source lang='html5'>
+<syntaxhighlight lang='html5'>
 <!DOCTYPE html>
 <html lang="ko">
 <head>
 <meta charset="utf-8" />
-<meta name="width=480,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />
+<meta name="viewport" content="width=480,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0" />
 <title>제목</title>
 </head>
@@ 14번째 줄: / 19번째 줄: @@
 </body>
 </html>
-</source>
+</syntaxhighlight>
 → 너비 480 픽셀. 확대축소 가능. 초기배율 1.0. 최대 배율 3.0
 ==속성==
 다음과 속성들이 있다.
-*width (너비)
+{| class='wikitable'
-<source lang='html5'>
+|-
-width=device-width
+!속성
-</source>
+!의미
-→ 기기 크기에 맞춤. 아이폰의 경우 뷰포트를 지정하지 않으면 뷰포트의 너비는 980px이 된다.
+!값
-*height (높이)
+|-
-*initial-scale (초기 배율)
+!width
-<source lang='html5'>
+|너비 (단위: px)
-initial-sacle=1.0
+|200~10000. 또는 device-width
-</source>
+|-
-→ 초기 배율을 1.0으로 설정
+!height
-*minimum-scale (최소 배율)
+|높이 (단위: px)
-*maximum-scale (최대 배율)
+|223~10000. 또는 device-height
-*user-scalable (확대축소 가능여부)
+|-
-<source lang='html5'>
+!initial-scale
-user-scalable=no
+|초기 배율
-</source>
+|
-→ 확대축소 불가
+|-
+!minimum-scale
+|최소 배율
+|0.0 ~ 10.0 (기본값 0.25)
+|-
+!maximum-scale
+|최대 배율
+|0.0 ~ 10.0
+|-
+!user-scalable
+|확대/축소 가능 여부
+|yes 또는 no
+|}
+*아이폰의 경우 뷰포트를 지정하지 않으면 뷰포트의 너비는 980px이 된다.
+;예제
+<syntaxhighlight lang='html5'>
+<meta name="viewport" content="width=device-width, user-scalable=no" />
+</syntaxhighlight>
+→ 기기 화면 크기에 맞추고 고정(확대축소 불가).
 ==아이폰 화면 크기==
@@ 45번째 줄: / 69번째 줄: @@
 *URL Bar 높이: 60px
 *Button Bar 높이: 44px
+==같이 보기==
+*[[캔버스]]
+*[[스마트폰 기종 확인]]
 [[분류:HTML5]]
 [[분류:모바일 웹]]
+==참고==
+*http://www.w3schools.com/css/css_rwd_viewport.asp