Viewport 메타 태그

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 62번째.

HTML에서 viewport meta tag는 다양한 기기, 특히 모바일 기기에서 웹 페이지의 레이아웃과 크기 조절을 제어하는 데 사용되는 특수 태그입니다. 이 태그는 HTML 문서의 <head> 섹션 내에 위치하며 브라우저에 페이지를 렌더링하는 방법에 대한 지침을 제공합니다. viewport meta tag는 다양한 화면 크기와 해상도에 적응하는 반응형 웹 디자인을 만드는 데 필수적입니다.

뷰포트(viewport) 메타 태그를 사용하기 위한 기본 구문은 다음과 같습니다:

<meta name="viewport" content="name=value, name=value">

<meta>: HTML 문서에 대한 메타데이터를 정의하는 데 사용되는 HTML 태그입니다.
name="viewport": 이 메타 태그가 뷰포트 설정을 제어하는 데 사용됨을 지정합니다.
content: 뷰포트 설정을 쉼표로 구분된 name=value 쌍의 목록으로 제공하는 속성입니다.

content 속성에서 사용되는 일반적인 name=value 쌍은 다음과 같습니다:

width=device-width: 뷰포트의 너비를 기기 화면의 너비로 설정합니다.

initial-scale=1.0: 페이지가 처음 로드될 때 초기 확대/축소 수준을 설정합니다. 1.0 값은 확대/축소가 없음을 의미합니다.

maximum-scale=1.0: 허용되는 최대 확대 배율을 설정합니다.
minimum-scale=1.0: 허용되는 최소 확대 배율을 설정합니다.

다음은 HTML 문서에서 뷰포트(viewport) 메타 태그를 사용하는 방법에 대한 예시입니다:

<!DOCTYPE html>
<html>
<head>
    <title>Viewport Meta Tag</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>

이 예제에서 viewport 메타 태그는 width=device-width, initial-scale=1.0로 설정되어 있습니다. 이는 브라우저에게 뷰포트의 너비를 기기 너비로 설정하고 초기 확대 수준을 1.0(확대 없음)으로 사용하도록 지시합니다.

챌린지

쉬움

제목(<h1>)과 단락(<p>)이 포함된 HTML 문서가 주어집니다. 여러분의 작업은 문서를 반응형으로 만들기 위해 뷰포트(viewport) 메타 태그를 추가하는 것입니다. 다음 단계를 따르세요:

HTML 문서의 <head> 섹션에 <meta> 태그를 추가합니다.
<meta> 태그의 name 속성을 viewport로 설정합니다.
<meta> 태그의 content 속성을 width=device-width, initial-scale=1.0으로 설정합니다.

직접 해보기

<html>
<head>
    <title>Viewport Meta Tag</title>
    <!--여기에 코드를 작성하세요-->
</head>
<body>
    <h1>Responsive Web Page</h1>
    <p>This page uses the viewport meta tag to adapt to different screen sizes.</p>
</body>
</html>