이 페이지는 Cloud Translation API를 통해 번역되었습니다.

크고 작은 동적 표시 영역 단위

동적 툴바가 포함된 모바일 표시 영역을 고려한 새로운 CSS 단위

Bramus

표시 영역 및 표시 단위

표시 영역과 같은 높이로 크기를 조절하려면 vw 및 vh 단위를 사용하면 됩니다.

요소의 너비는 100vw, 높이를 100vh로 지정하면 표시 영역 전체를 포함합니다.

vw 및 vh 단위가 브라우저에 추가되었습니다.

이러한 단위는 브라우저 지원이 뛰어납니다.

브라우저 지원

기존 광고 단위가 데스크톱에서는 잘 작동하지만 모바일 기기에서는 다릅니다. 여기서 표시 영역 크기는 동적 툴바의 존재 여부에 따라 달라집니다. 여기에는 주소 표시줄이나 탭바와 같은 사용자 인터페이스가 있습니다.

표시 영역 크기는 변경될 수 있지만 vw 및 vh 크기는 변경되지 않습니다. 따라서 높이가 100vh인 요소가 표시 영역 밖으로 흘러나옵니다.

이러한 동적 툴바는 아래로 스크롤하면 접힙니다. 이 상태에서 높이가 100vh인 요소는 전체 표시 영역을 포함합니다.

이 문제를 해결하기 위해 CSS Working Group에서 뷰포트의 다양한 상태를 지정했습니다.

새 표시 영역에는 지정 단위도 있습니다.

큰 표시 영역을 나타내는 단위에는 lv 접두사가 있습니다. 단위는 lvw, lvh, lvi, lvb, lvmin, lvmax입니다.
작은 표시 영역을 나타내는 단위에는 sv 접두사가 있습니다. 단위는 svw, svh, svi, svb, svmin, svmax입니다.

표시 영역 자체의 크기를 조절하지 않는 한 이러한 표시 영역 비율 단위의 크기는 고정되어 안정적입니다.

크고 작은 표시 영역 외에도 UA UI를 동적으로 고려하는 동적 표시 영역도 있습니다.

함께 제공되는 단위에는 dv 접두사(dvw, dvh, dvi, dvb, dvmin, dvmax)가 있습니다. 그 크기는 lv*와 sv* 대응 항목 간에 고정됩니다.

이 단위는 Chrome 108에서 제공되며 이미 지원 중인 Safari 및 Firefox와 함께 제공됩니다.

브라우저 지원

표시 영역 단위에 대해 알아야 할 몇 가지 주의사항이 있습니다.

스크롤바 크기를 고려하지 않은 표시 영역 단위는 없습니다. 따라서 기존 스크롤바가 사용 설정된 시스템에서는 100vw 크기의 요소가 약간 너무 넓어집니다. 이는 사양에 따라 적용됩니다.
동적 표시 영역의 값은 60fps로 업데이트되지 않습니다. 모든 브라우저에서 UA UI가 확장되거나 철회될 때 업데이트가 제한됩니다. 어떤 브라우저는 사용된 동작 (느린 스크롤 대 스와이프)에 따라 업데이트를 완전히 디바운스하기도 합니다.
터치 키보드 (가상 키보드라고도 함)는 UA UI의 일부로 간주되지 않습니다. 따라서 표시 영역 단위의 크기에 영향을 미치지 않습니다. Chrome에서는 가상 키보드가 표시 영역 단위에 영향을 미치는 동작을 선택할 수 있습니다.

표시 영역과 이러한 단위에 대한 자세한 내용은 이 HTTP 203 에피소드를 확인하세요. 여기에서 Bramus는 Jake에게 다양한 표시 영역에 대해 설명하고 이러한 단위의 크기가 정확히 어떻게 결정되는지 설명합니다.

추가 읽기 자료: