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

잔글 (봇: 자동으로 텍스트 교체 (-<source +<syntaxhighlight , -</source> +</syntaxhighlight>))
 
(사용자 2명의 중간 판 12개는 보이지 않습니다)
1번째 줄: 1번째 줄:
*뷰포트, viewport
==개요==
;viewport
;뷰포트
*웹페이지에서 실제 사용자가 볼 수 있는 영역
*뷰포트는 디바이스에 따라 각각 다른 값을 가짐
*타블렛, 모바일폰이 등장하기 전까지는 컴퓨터 스크린에 맞춰 사이즈가 고정된 경우가 일반적임


==뷰포트 기초예제==
==뷰포트 기초예제==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ko">
<html lang="ko">
<head>
<head>
<meta charset="utf-8" />
<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>
<title>제목</title>
</head>
</head>
14번째 줄: 19번째 줄:
</body>
</body>
</html>
</html>
</source>
</syntaxhighlight>
→ 너비 480 픽셀. 확대축소 가능. 초기배율 1.0. 최대 배율 3.0
→ 너비 480 픽셀. 확대축소 가능. 초기배율 1.0. 최대 배율 3.0


20번째 줄: 25번째 줄:
다음과 속성들이 있다.
다음과 속성들이 있다.
{| class='wikitable'
{| class='wikitable'
|-
!속성
!의미
!값
|-
|-
!width
!width
45번째 줄: 54번째 줄:
|yes 또는 no
|yes 또는 no
|}
|}
*아이폰의 경우 뷰포트를 지정하지 않으면 뷰포트의 너비는 980px이 된다.


<source lang='html5'>
;예제
width=device-width
<syntaxhighlight lang='html5'>
</source>
<meta name="viewport" content="width=device-width, user-scalable=no" />
→ 기기 크기에 맞춤. 아이폰의 경우 뷰포트를 지정하지 않으면 뷰포트의 너비는 980px이 된다.
</syntaxhighlight>
<source lang='html5'>
기기 화면 크기에 맞추고 고정(확대축소 불가).
initial-sacle=1.0
</source>
→ 초기 배율을 1.0으로 설정
<source lang='html5'>
user-scalable=no
</source>
→ 확대축소 불가


==아이폰 화면 크기==
==아이폰 화면 크기==
66번째 줄: 69번째 줄:
*URL Bar 높이: 60px
*URL Bar 높이: 60px
*Button Bar 높이: 44px
*Button Bar 높이: 44px
==같이 보기==
*[[캔버스]]
*[[스마트폰 기종 확인]]


[[분류:HTML5]]
[[분류:HTML5]]
[[분류:모바일 웹]]
[[분류:모바일 웹]]
==참고==
*http://www.w3schools.com/css/css_rwd_viewport.asp

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 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}