반응형
1. 뷰포트란?
웹은 단순히 PC에서만 접속하는 것이 아니고 다양한 크기의 디바이스가 존재하기 때문에,
이에 대응하기 위해서 새로운 HTML문서를 작성할 때는 charset과 함께 항상 뷰포트 설정을 추가하는 습관 기르자!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 뷰포트 -->
<!-- => 웹페이지가 표현되는 영역 -->
<!-- => 즉, 웹페이지를 접속했을 때 화면의 왼쪽 끝에서부터 오른쪽 끝까지를 의미함 -->
<!-- => width=device-width : 문서의 콘텐츠 폭을 디바이스에 맞추기 위해(뷰포트가 좁아지면 작게 설정) -->
<!-- => initial-scale=1.0 : 웹페이지에 접속했을 때 문서가 확대, 축소되지 않은 원래 크기(1배율)로 표현되기 위해 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="margin:0 auto; width:50%">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quisquam
incidunt similique quaerat ducimus, saepe tempora, nulla aliquid, libero maxime nostrum fuga rerum. Consectetur,
placeat minima. Reprehenderit beatae dolores autem.</p>
</body>
</html>반응형
'web > html' 카테고리의 다른 글
| [html] 7. <a> VS <form> | 입력 폼 태그 (0) | 2024.04.29 |
|---|---|
| [html] 6. 하이퍼링크 태그 | 기타 태그 | 문장강조 태그 | 인용문출력 태그 | 멀티미디어 태그 | 이미지설명제공 태그 (2) | 2024.04.29 |
| [html] 5. 시맨틱태그 | 텍스트태그 | entity | 박스태그 | 이미지태그 | 리스트태그 | 테이블태그 (0) | 2024.04.28 |
| [html] 4. 기본 태그 | head | body (1) | 2024.04.28 |
| [html] 3. 웹 통신 프로토콜 (HTTP/TCP/IP) (0) | 2024.04.27 |
