1. 뷰포트(viewport) 란?
사용자가 웹 페이지를 볼 때 화면에 표시되는 영역을 의미합니다. 모바일 기기에서는 특히 중요하며, 반응형 디자인 및 모바일 친화적인 경험을 구현하는 데 사용됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>Your Page Title</title>
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html>
위의 코드는 반응형 페이지 제작시 설정하는 예제입니다.
- width=device-width : 이 설정은 기기의 화면 너비를 웹 페이지의 너비로 사용하도록 지정합니다.
- initial-scale=1.0 : 이 설정은 페이지가 처음 로드될 때 초기 배율을 1.0으로 설정합니다. 이는 사용자가 페이지를 처음 열었을 때 기본 배율로 표시되도록 합니다.
- maximum-scale : 사용자가 확대할 수 있는 최대 배율을 제어합니다.
- minimum-scale : 사용자가 축소할 수 있는 최소 배율을 제어합니다.
- user-scalable : 사용자의 확대 및 축소 가능 여부를 결정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
위의 코드는 사용자가 화면을 확대, 축소를 못하게 하는 예제입니다.
일반적으로는 사용자에게 이 자유를 주는 것이 좋습니다. 설정은 프로젝트의 요구사항 및 사용자 경험에 따라 조절할 수 있습니다.
궁금한게 있으시면 댓글 달아주세요.
답변 해드릴게요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.
반응형
'Front End > HTML' 카테고리의 다른 글
| [HTML] 엔터티코드 완벽 가이드: 개념, 코드 종류, 사용법 총정리 (0) | 2025.01.09 |
|---|---|
| [HTML] a 태그(tag) 속성 (href, target, title 등) (0) | 2024.01.25 |
| [HTML] @import vs link tag (장단점 및 사용법) (0) | 2024.01.12 |
| [HTML] input [type="file"] 속성(property) 정리 (0) | 2023.06.14 |