HTML Viewport 메타 태그는 반응형 웹사이트를 만드는 데 사용됩니다. 웹 페이지가 표시 영역에 따라 너비를 조정할 수 있도록 합니다.
구문
다음은 구문입니다 -
< meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
표시 영역 메타 태그의 속성
| 속성 | 설명 |
|---|---|
| 너비 | 기기의 가상 뷰포트 너비를 지정합니다. |
| 높이 | 기기의 가상 뷰포트 높이를 지정합니다. |
| 초기 규모 | 페이지를 처음 방문할 때 확대/축소 수준을 지정합니다. |
| 최소 규모 | 사용자가 페이지를 확대할 수 있는 최소 확대/축소 수준을 지정합니다. |
| 최대 규모 | 사용자가 페이지를 확대할 수 있는 최대 확대/축소 수준을 지정합니다. |
| 사용자 확장 가능 | 사용자가 확대 또는 축소할 수 있는지 여부를 지정합니다. |
예시
HTML 뷰포트 메타 태그의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h1>HTML Viewport meta tag Demo</h1>
<p>
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
</p>
<p>
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
</p>
</body>
</html> 출력
이제 브라우저 창의 크기를 조정하여 더 작은 기기에서 페이지가 어떻게 표시되는지 관찰해 보십시오.
