정의
웹 개발에서 viewport는 사용자의 브라우저 창 내에서 실제로 보이는 영역을 의미한다.
예를 들어 사용자가 크롬 창을 늘리거나 줄이면 보이는 만큼이 viewport 영역이며 모바일에서 핸드폰으로 보는 상황이라면 핸드폰의 스크린에 보이는 만큼이 viewport 영역이다.
viewport는 반응형 웹에서 특히 신경써서 개발해야 하며 모바일, 태블릿은 일반적으로 화면의 크기가 고정되어 있기 때문에 서비스를 만들 때 각 디바이스의 화면의 크기에 맞게 break point를 정해놓고 개발을 진행하는것이 일반적이다.
아래는 일반적인 break point의 수치이다.
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
tailwindcss.com
가장 작은 화면에 대해서도 고려해봐야 하는데 회사, 서비스 마다 다를 것 같지만 350px로 설정한 뒤 작업하면 대부분의 기기 사이즈를 맞출 수 있다.
종류
layout viewport: layout viewport는 웹 페이지가 레이아웃을 계산하는데 사용되는 영역을 의미한다. 이는 웹 페이지가 화면에 어떻게 배치되고, 요소들이 서로 어떻게 상호 작용하는지를 결정하는 데 사용된다
visual viewport: 현재 표시되고있는 viewport 부분을 말한다. 사용자가 두 손가락으로 줌 한 경우와 같이 layout viewport보다 작을 수 있다
사용
HTML 문서에서 viewport를 제어하기 위해서는 <meta> 태그를 사용하여 페이지의 viewport 설정을 지정할 수 있다. 이 태그는 보통 문서의 <head> 부분에 위치하며 기본 구조는 다음과 같다:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이 태그는 아래의 속성을 가진다.
width : viewport의 사이즈를 설정한다. width=600 같은 픽셀 값이나 100vw, 100%와 같은 값을 의미하는 device-width 같은 값을 넣을 수 있다. 최소 값은 1이며 최대 값은 1만이다.
height: viewport의 사이즈를 설정한다. height=600 같은 픽셀 값이나 100vh, 100%와 같은 값을 의미하는 device-height같은 값을 넣을 수 있다. 최소 값은 1이며 최대 값은 10,000이다.
initial-scale: 페이지가 처음 로드될 때의 사이즈이다 최소는 0.1, 최대는 10이다. default 값은 0.1이며 음수값은 무시된다.
maximum-scale: 최대 zoom의 크기를 제어한다. 최소 값은 0.1, 최대 값은10, default는 10이다. 음수는 무시된다.
minimum-scale: 최소 zoom의 크기를 제어한다. 최소 값은 0.1, 최대 값은10, default는 10이다. 음수는 무시된다.
user-scalable: zoom 액션 허용 유무를 제어한다 0,1 yes, no를 받으며 기본 값은 yes 혹은 1이다. no 혹은 0으로 설정하는 것은 WCAG(Web Content Accessibility Guideline)에 위배된다.
interactive-widget: 가상 키보드 같은 UI widget이 viewport에 미치는 영향을 지정한다. resize-visual, resize-content, 또는 overlay-content 값을 받으며 . default는 resize-visual 이다.
- resizes-visual
- visual viewport 는 대화형 widget에 의해 크기가 조정된다.
- resizes-content
- viewport 는 대화형 widget에 의해 크기가 조정된다.
- overlays-content
- viewport 또는 visual viewport는 대화형 widget에 의해 크기가 조정되지 않는다.
모바일 트릭
모바일은 스크롤 시 주소 창, 하단 바가 올라오는 동작이 있으며 이러한 동작 때문에 기존의 100vh로 페이지를 로드 했을 때 vh의 값이 줄어들게 되면서 하단이 짤리게 되는 문제가 간간히 발생한다.
이를 해결하기 위한 2가지 방법이 있다.
- window.innerHeight, resize event 등으로 높이를 구한 뒤 직접 1vh를 계산한 뒤 실시간으로 적용하기
- 새로 생긴 viewport 단위를 사용해보기
- dvh (Dynamic Viewport Height) : 탭 노출 유무에 따라 실시간으로 변하는 viewport
- svh (Short Viewport Height) : 사용자 화면 기준 가장 짧은 viewport
- lvh (Large Viewport Height) : 사용자 화면 기준 가장 큰 viewport
'javascript' 카테고리의 다른 글
| RequestAnimationFrame이란 (1) | 2024.04.25 |
|---|---|
| setTimeout에서 발생 가능한 문제들 (0) | 2024.04.21 |
| Builder를 위한 Path parser 구현 후기 (1) | 2024.01.09 |
| Promise.race를 응용한 긴 비동기 작업 필터링 방법 (1) | 2023.12.22 |
| Code splitting시 주의해야할 점(side effect) (1) | 2023.01.15 |