뷰포트 : 웹페이지가 브라우저 화면상에서 실제로 표시되는 영역
기기에 따라 적절히 보이는 반응형 웹을 만들기 위해 뷰포트 메타 태그를 사용해야함.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<title>...</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</html>
<meta> 는 뷰포트 요소로서 페이지의 크기 및 배율을 제어하는 방법에 대한 지침을 제공
width=device-width // 랜더링 영역을 기기의 뷰포트의 크기와 같게 함.
initial-scale=1.0 // 브라우저에 의해 페이지가 처음 로드될 때 초기 확대/축소 레벨을 설정. 0 ~ 10 값을 가짐
user-scalable // 사용자가 화면을 확대/축소 할수 있는지 여부. yes/no 값을 가짐.
maximum-scale // 늘릴 수 있는 최대 크기 지정. 0 ~ 10 값을 가짐
minimum-scale // 줄일 수 있는 최소 크기 지정. 0 ~ 10 값을 가짐
'HTML & CSS' 카테고리의 다른 글
| radio 값 가져오기 (0) | 2023.03.14 |
|---|---|
| 캐싱(caching) (0) | 2022.02.23 |
| getBoundingClientRect (0) | 2022.02.09 |
| min-content/max-content/fit-content와 auto (0) | 2022.02.08 |
| 반응형 웹을 위한 단위 정리 vh, vw, calc, em, rem (0) | 2022.02.08 |
