Articles
CSS 소개
뷰포트와 반응형 디자인

뷰포트와 반응형 디자인

이 문서에서는 뷰포트와 반응형 디자인에 대해 설명합니다.

<meta> 태그를 사용하여 뷰포트를 설정하는 방법과 그것이 중요한 이유를 배우게 됩니다.

YouTube Video

미리보기를 위한 HTML

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

HTML에서 viewport 설정에 대하여

viewport 설정은 웹페이지를 표시하는 기기의 디스플레이 영역(뷰포트)에 대한 정보를 제어하는 데 사용됩니다. 특히 모바일 기기에서 웹 페이지의 표시를 조정하는 데 중요한 역할을 합니다.

뷰포트란 무엇인가?

뷰포트는 사용자가 웹 페이지를 보고 있는 브라우저 창 또는 기기의 디스플레이 영역을 말합니다. 데스크톱에서는 브라우저 창의 크기가 뷰포트가 되는 반면, 스마트폰 및 태블릿과 같은 모바일 기기에서는 기기의 화면 크기가 뷰포트가 됩니다.

뷰포트 지정하기

뷰포트를 제어하려면 HTML의 <meta> 태그를 사용하여 뷰포트 설정을 구성해야 합니다. 이 설정은 페이지가 서로 다른 기기에서 어떻게 표시될지를 지정할 수 있게 해줍니다.

기본 구문 

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 코드는 뷰포트 너비를 기기의 너비와 일치하도록 설정하고, 페이지의 초기 표시 배율(확대 수준)을 1.0(100% 표시)으로 설정합니다.

viewport의 주요 속성

viewport의 content 속성으로 주로 지정할 수 있는 속성은 다음과 같습니다:.

  1. width

    • width로 뷰포트의 너비를 지정합니다. device-width로 설정하면 뷰포트가 기기의 물리적 너비(픽셀 단위)에 맞게 조정됩니다.
    • 예: width=device-width

  2. height

    • height로 뷰포트의 높이를 지정할 수 있지만, 일반적으로는 너비만 설정되고 높이는 자주 지정되지 않습니다. device-height로 설정하면 뷰포트가 기기의 물리적 높이(픽셀 단위)에 맞춰집니다.
    • 예: height=device-height

  3. initial-scale

    • initial-scale로 페이지의 초기 확대/축소 수준을 지정합니다. 1.0은 기기의 100% 확대 수준을 의미합니다.
    • 예시: initial-scale=1.0

  4. minimum-scale

    • minimum-scale를 사용하여 축소의 최소 배율을 지정합니다. 0.5로 설정하면 최대 50%까지 축소할 수 있습니다.
    • 예시: minimum-scale=0.5

  5. maximum-scale

    • maximum-scale를 사용하여 확대의 최대 배율을 지정합니다. 2.0로 설정하면 최대 200%까지 확대할 수 있습니다.
    • 예시: maximum-scale=2.0

  6. user-scalable

    • user-scalable을 사용하여 사용자가 페이지를 확대/축소할 수 있는지 여부를 지정합니다. yes 또는 no로 지정합니다.
    • 예시: user-scalable=no로 설정하면 사용자의 확대/축소가 비활성화됩니다.

일반적으로 사용되는 예시

  1. 표준 반응형 설정
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 설정은 모바일 기기의 화면 너비에 맞게 페이지를 자동으로 조정하며, 페이지가 100% 확대 비율로 표시되도록 보장합니다. 이는 반응형 디자인의 필수 설정입니다.

  1. 확대/축소 비활성화
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

이 설정은 사용자의 확대/축소를 비활성화합니다. 특정 디자인에 확대/축소가 필요하지 않거나 확대/축소로 인해 디자인이 깨질 수 있는 경우에 사용됩니다.

  1. 고정 확대 배율 및 Viewport 너비
1<meta name="viewport" content="width=1024, initial-scale=1.0">

이 설정은 Viewport 너비를 1024 픽셀로 고정하고 초기 표시에서 확대 비율을 100%로 설정합니다. 기기의 너비와 관계없이 페이지 너비를 일정하게 유지하려는 경우에 사용됩니다.

viewport의 역할

viewport 설정은 특히 모바일 기기에서 디스플레이를 최적화하기 위해 필수적입니다. Viewport를 올바르게 구성하면 다음과 같은 문제를 방지할 수 있습니다:.

  • 페이지가 기기의 너비를 초과하지 않도록 하여 스크롤이 필요하지 않게 합니다.
  • 텍스트와 이미지가 너무 작아져 읽기 어려워지는 것을 방지합니다.
  • 전체 페이지가 축소되어 상호작용이 어렵게 되는 것을 방지합니다.

요약

  • viewport는 웹 페이지를 표시하는 기기의 디스플레이 영역을 제어하는 데 사용됩니다.
  • 주로 모바일 기기 화면에 맞추기 위해 사용되며 반응형 디자인에서 중요한 역할을 합니다.
  • width=device-width 및 initial-scale=1.0과 같은 설정은 표준 반응형 웹 디자인에서 자주 사용됩니다.

viewport를 적절히 설정하면 모바일 사용자에게 편안한 보기 환경을 제공할 수 있습니다.

위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.

YouTube Video

CSS에서의 반응형 디자인 개요