HTML 메타태그 Viewport

안녕하세요! 오늘은 HTML 메타 태그중 하나인 Viewport 에 대해서 정리해 보려고 합니다.

메타태그는 HTML 문서의 맨 위쪽에 입력하는 태그로, head 태그 사이에 위치하는 태그 입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Subject" content="매타태그 중 ViewPort에 대한 설명" />
    <meta http-equiv="Author" content="uensung" />
    <title>viewPort</title>
  </head>
  <body>
  </body>
</html>
<!DOCTYPE html>

HTML 파일을 참고하다 보면 위와 같은 메타 태그를 보신적이 있으시죠? 위와 같은 메타 태그는

사이트 디자인에는 영향을 미치지 않지만 HTML 문서가 어떤 내용을 담고 있고, 주제가 무엇인지 작성자가 누구인지에 대한 문서 자체의 특성을 담고 있습니다. 이 meta 태그 중 하나인 Viewport에 대해서 정리해 보겠습니다!

반응형 웹(Responsive Web)에 필요한 Viewport

반응형 웹이란 하나의 웹페이지가 데스크탑 PC의 브라우저, 스마트폰, 태블릿 등 접속하는 디바이스의 종류에 관계없이 화면의 크기가 저절로 변하도록 만들어진 웹페이지를 말합니다. 디바이스의 종류에 따라 화면의 크기가 변하기 때문에 웹페이지가 사용자에게 보여지는 영역이 어느정도인지 얼마만큼의 크기로 보여줄지에 대해 지정해 줄 필요가 생기게 됩니다. 어느정도의 영역을 얼마만큼의 스케일로 디바이스에보여줄지 정하는 역할을 하는 것이 바로 Viewport입니다.

그럼 직접 페이지를 만들어 보며 Viewport의 속성에 대해 알아보겠습니다.

<html>
  <head>
    <title>ViewPort</title>
  </head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    .image {
      width: 800px;
    }
  </style>
  <body>
    <img class="image" src="image.png" alt="image">
    <div class="text">
      <h2>Meta element</h2>
      <div>
        Meta elements are tags used in HTML and XHTML documents to provide structured metadata about a Web page. They are part of a web page's head section. Multiple Meta elements with different
        attributes can be used on the same page. Meta elements can be used to specify page description, keywords and any other metadata not provided through the other head elements and attributes.
        The meta element has two uses: either to emulate the use of an HTTP response header field, or to embed additional metadata within the HTML document.
        With HTML up to and including HTML 4.01 and XHTML, there were four valid attributes: content, http-equiv, name and scheme. Under HTML 5 there are now five valid attributes,
        charset having been added. http-equiv is used to emulate an HTTP header, and name to embed metadata. The value of the statement, in either case, is contained in the content attribute, which
        is the only required attribute unless charset is given. charset is used to indicate the character set of the document, and is available in HTML5.
      </div>
    </div>
  </body>
</html>

위와 같이 width가 800px인 이미지 하나와 긴문장의 텍스트를 입력 후 PC화면의 브라우저에서 결과를 확인해 보겠습니다.

데스크탑 PC 브라우저의 경우

데스크탑 PC의 브라우저에서 결과를 확인할 경우 브라우저의 width값을 800px 보다 크게 할 경우

아래와 같이 나타납니다.

브라우저의 width 값을 800px 보다 작게 줄일 경우에는 아래와 같이 스크롤이 생기게 됩니다.

PC의 브라우저의 경우 창을 늘리고 줄일 경우 ViewPort 값이 현재 브라우저 창의 크기와 같게 계속 변하기 때문에 위와 같은 결과가 나오 게 됩니다.

태블릿, 모바일의 경우

개발자 도구창을 열어 테스트 환경을 모바일로 바꾸고 결과 화면을 확인해 보겠습니다.

모바일 화면의 경우 ViewPort 값을 지정해 주지 않을 경우 기본 값인 980px로 지정되게 되고,

아래와 같은 화면으로 나타나게 됩니다.

모바일 화면의 경우 width 길이를 360px에 맞춘 웹페이지 내용을 보여주길 원하지만

기본값 980px의 width길이를 가진 화면이 축소되어 화면에 보여지기 때문에 우리가 원하는

모바일 화면에 맞는 페이지가 보여지고 있지 않습니다.

Viewport를 적용해 보자!

그럼 이제 Viewport를 직접 적용해 보겠습니다.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ViewPort</title>
</head>

head 태그 내부에 meta태그를 하나 만들고 위와 같이 name과, content 내부의 내용을 입력해 줍니다.

width=device-width는 보여 줄 웹페이지의 너비를 접근하는 디바이스에 기기의 스크린 너비로 설정 한다는 의미입니다. initial-scale 값의 경우 처음 페이지를 불러올때 확대/축소 값을 얼마로 지정할지에 대한 값입니다. initial-scale의 범위는 1~10까지 지정 가능하고 기본값은 1입니다.

.image {
  width: 100%;
}

content보다 작은 viewport값을 설정할 경우 적용되지 않기 때문에 이미지의 크기를 width에 꽉차는 100%로 변경해 주겠습니다.

[모바일 결과 화면]

[태블릿 결과 화면]

적용한 결과 화면을 확인해 보면 모바일일 경우 width 길이가 360px로 모바일 기기의 화면에 꽉차게

결과 화면이 나오고, 태블릿일 경우 width 길이가 1024px로 태블릿 기기에 맞춰 기기의 화면에 꽉차게

내용이 나오게 됩니다! 이렇게 사용하는 디바이스마다 보여 줄 웹페이지의 길이를 조절 할 수 있기 때문에

Viewport를 사용하게 됩니다. 그럼 마지막으로 Viewport의 추가 속성에 대해 정리 해 보겠습니다.

Viewport 속성

속성	내용	값	기본값
width	viewport 가로 길이 device-width 일경우 기기 가로크기에 자동 맞춤	auto \| 숫자값 \| device-width	980px
height	viewport 세로 길이 device-height 일경우 기기 세로크기에 자동 맞춤	auto \| 숫자값 \| device-height	auto
initial-scale	처음 페이지에 접속했을 때 화면 확대 배율	0~10 사이의 값	1
user-scale	확대 축소 가능 여부	yes \| no	yes
minimum-scale	축소율 최소값	0~10 사이의 값	0.25
maximum-scale	확대율 최대값	0~10 사이의 값	1.6

그럼 지금 까지 HTML 메타태그 중 Viewport 기능에 대해서 알아 보았습니다.

그럼 다음에 새로운 내용으로 찾아오겠습니다. 그럼 이만~

Front-end Story