Viewport란, 웹 페이지를 볼 때 사용자가 보는 영역을 말합니다. 보통 모니터, 태블릿, 스마트폰과 같은 기기에서 브라우저를 실행하면 웹 페이지가 보여지는데, 이때 브라우저는 화면 전체를 사용하는 것이 아니라, 뷰포트 크기에 맞게 웹 페이지를 조정하여 보여줍니다.
윈도우에서 브라우저 창의 크기를 조절하면 뷰포트의 크기도 함께 변경됩니다.
Viewport는 브라우저 창에서 실제로 컨텐츠를 표시하는 영역을 말합니다. 브라우저 창의 크기가 변경되면 뷰포트도 그에 맞게 자동으로 조절됩니다. 예를 들어, 브라우저 창의 크기를 줄이면 뷰포트도 작아지고, 브라우저 창의 크기를 늘리면 뷰포트도 커집니다.
이렇게 뷰포트의 크기가 변경되면, 웹 페이지에서 사용되는 미디어 쿼리(Media Queries)를 사용하여 반응형 웹 디자인을 구현할 수 있습니다. 미디어 쿼리를 사용하면 뷰포트의 크기에 따라 다른 스타일 시트를 적용하여 사용자에게 더 나은 사용 경험을 제공할 수 있습니다.
미디어 쿼리(Media Queries)를 사용하여 반응형 웹 디자인을 구현
예를 들어, 모바일 기기와 데스크톱 기기에서 다른 레이아웃을 사용하고 싶다고 가정해봅시다. 모바일 기기에서는 세로 방향으로 길쭉한 형태로, 데스크톱 기기에서는 가로 방향으로 넓은 형태로 컨텐츠를 보여주고 싶다면, 다음과 같은 미디어 쿼리를 사용할 수 있습니다.
/* 모바일 기기에서 사용할 스타일 */
@media screen and (max-width: 767px) {
/* 뷰포트의 최대 너비가 767px 이하일 때 적용될 스타일 */
/* 세로 방향으로 길쭉한 형태의 레이아웃 사용 */
}
/* 데스크톱 기기에서 사용할 스타일 */
@media screen and (min-width: 768px) {
/* 뷰포트의 최소 너비가 768px 이상일 때 적용될 스타일 */
/* 가로 방향으로 넓은 형태의 레이아웃 사용 */
}위의 코드에서 @media는 미디어 쿼리를 시작하는 키워드입니다. screen은 미디어 타입으로, 화면에서 사용하는 스타일 시트를 적용하는 것을 의미합니다. max-width와 min-width는 뷰포트의 최대 및 최소 너비를 나타내는 속성으로, 특정 너비 범위에 해당하는 뷰포트에서만 적용될 스타일을 정의할 수 있습니다.
따라서 위의 예제에서는 뷰포트의 너비가 767px 이하일 때는 모바일 기기에서 사용할 스타일을, 768px 이상일 때는 데스크톱 기기에서 사용할 스타일을 적용하도록 미디어 쿼리를 작성하였습니다. 이를 통해 사용자의 기기에 맞추어 최적화된 레이아웃을 제공할 수 있습니다.
viewport 설정
CSS에서는 뷰포트의 크기를 나타내는 단위인 vw와 vh를 제공합니다. vw는 뷰포트 너비의 1%에 해당하며, vh는 뷰포트 높이의 1%에 해당합니다. 이러한 단위를 사용하면, 웹 페이지를 뷰포트 크기에 맞게 반응형으로 디자인할 수 있습니다.
또한, CSS에서는 뷰포트의 너비와 높이를 나타내는 속성 viewport-width와 viewport-height를 제공합니다. 이 속성은 @viewport 규칙을 사용하여 지정할 수 있으며, 뷰포트의 크기를 조정하는데 사용됩니다. 그러나, @viewport 규칙은 아직 대부분의 브라우저에서 지원되지 않으므로 사용에 주의해야 합니다. 대신, 뷰포트를 조정하는 데에는 meta 태그를 사용하는 것이 일반적입니다.
meta 태그로 뷰포트 설정
meta 태그를 사용하여 뷰포트를 설정하는 방법은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 웹 페이지의 내용 -->
</body>
</html>위의 코드에서 meta 태그를 사용하여 뷰포트 설정을 지정하고 있습니다. meta 태그의 name 속성에는 viewport를 지정하고, content 속성에는 뷰포트 설정을 나타내는 값들을 지정합니다.
content 속성에는 뷰포트의 너비와 초기 확대/축소 비율을 나타내는 값들이 있습니다. 위의 예제에서는 width=device-width를 사용하여 뷰포트의 너비를 디바이스의 너비에 맞추도록 설정하고, initial-scale=1.0을 사용하여 초기에 확대/축소 비율을 1:1로 설정하고 있습니다.
다른 설정값으로는 minimum-scale, maximum-scale, user-scalable 등이 있습니다. 이러한 값들을 조합하여 적절한 뷰포트 설정을 지정할 수 있습니다. 예를 들어, 아래와 같은 설정은 뷰포트를 기기의 너비에 맞추고, 초기에는 1:1로 보이지만, 최대로는 2배까지 확대가 가능하도록 설정한 것입니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0">'HTML, CSS' 카테고리의 다른 글
| css margin auto로 요소를 수평 중앙에 배치하기 (0) | 2023.03.19 |
|---|---|
| css float 속성 (0) | 2023.03.19 |
| css overflow 속성 (0) | 2023.03.19 |
| html에서 img를 화면 가로로 가운데에 배치하는 방법 (0) | 2023.03.18 |
| html에서 이미지 크기를 적당히 조정하는 방법 (0) | 2023.03.18 |
