1. 뷰포트(viewport)
• 현재 화면에 보여지고 있는 영역을 의미한다
• 기기 별로 뷰포트가 다르기 때문에 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해
화면의 크기가 다르게 보이는 현상이 나타난다
• 기기 별로 뷰포트가 다르기 때문에 발생하는 배율 문제에 대응하기 위해 meta 태그를 통해
뷰포트 관련 설정을 추가할 수 있다
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0">
→ 뷰포트의 너비를 단말기 너비에 맞추고, 초기 배율을 1로 한다
2. 실습
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>뷰포트 체험하기</title>
</head>
<body>
<h1>안녕하세요!</h1>
<h1>감사해요!</h1>
<h1>잘있어요!</h1>
<h1>다시만나요!</h1>
</body>
</html>
블로그 이전했습니다 -> https://young-code.tistory.com