[HTML] 메타태그 - viewport (뷰포트)
[HTML] 메타태그 - viewport (뷰포트)
- 사전적 의미 :
viewport 미국식 [|vju:pɔ:rt] 영국식 [|vju:pɔ:t]
1. (컴퓨터의) 보임창
2. (우주선의) 창문
○ 사용이유 : 디바이스(PC, Tablet, Smart Phones)의 해상도에 따라서 적절하게 대응하는 반응형 웹(Responsive Web)을 만들기 위하여 사용
○ 사용방법 :
<head> ...... </head> 태그 안에 삽입
<meta name="viewport" content="속성=값, ......">
○ viewport content properities; (속성)과 value(값)
- width (뷰포트 너비) ; device-width (값)
- height (뷰포트 높이) ; device-height (값)
- user-scalable (확대 or 축소 가능여부) ; yes or no(값)
- initial-scale (초기 축소/확대 값) ; 1 ~ 10 (값)
- minimum-scale (최소 확대/축소 값) ; 1 ~ 10 (값)
- maximum-scale (최대 확대/축소 값) ; 1 ~ 10 (값)
ex)
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
Contents
</body>
</html>
- 기본형
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
user-scalable 값을 지정하지 않으면 축소/확대가 가능
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
user-scalable 값을 no로 지정하면 축소/확대가 불가능
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimun-scale=.5, maximum-scale=2" />
축소/확대가 가능하고 축소는 0.5 (2분의1)까지 확대는 2배까지 가능.
'Web Design > HTML & HTML 5' 카테고리의 다른 글
| HTML5 - New Structural Tags : <article> (0) | 2018.04.28 |
|---|---|
| HTML5 - New Structural Tags : <section> (0) | 2018.04.26 |
| HTML - META tag (0) | 2018.04.26 |
| HTML vs HTML5 (0) | 2018.04.25 |
| HTML5 브라우저 호환 테스트 (0) | 2018.04.10 |
