뷰포트와 모바일 기준 폭

개념 이해하기

viewport meta가 없으면 모바일 브라우저가 넓은 가상 화면을 축소할 수 있습니다. width=device-width와 initial-scale=1로 CSS 픽셀 기준을 실제 기기 폭에 맞춥니다.

대상 요소는 width: 100%라 .stage 폭을 그대로 따르고, ::after가 그 뒤에 현재 viewport: 유연한 100% 폭이라는 문구를 붙입니다. 생성된 문구는 공백 없이 대상 요소라는 글자 바로 뒤에 이어지므로 화면에는 두 말이 붙어 보이고, 띄우려면 content 문자열 맨 앞에 공백을 넣어야 합니다. 이 상자가 실제로 몇 CSS 픽셀이 될지는 문서의 viewport meta가 정한 기준 폭에 달려 있습니다.

모바일 브라우저는 주소 표시줄이 접히고 펼쳐질 때 화면 높이가 바뀌어, 100vh로 만든 영역의 아래쪽이 표시줄에 가려질 수 있습니다. svh는 표시줄이 펼쳐진 가장 작은 높이, lvh는 접힌 가장 큰 높이, dvh는 지금 이 순간의 높이를 기준으로 하므로 쓰임에 맞게 고릅니다.