Viewport Units
뷰포트 단위
뷰포트 단위는 브라우저의 표시 영역을 기준으로 하는 CSS 길이입니다. 작은 버전, 큰 버전, 동적 버전은 나타나거나 사라지는 브라우저 바를 처리합니다.
다른 예시
모바일 환영 패널은 `min-block-size: 100svh`를 사용합니다. 브라우저 바가 열려 있을 때 동의 버튼은 보이도록 유지됩니다. 전체 화면 갤러리는 바가 숨겨질 때 `100dvh`를 사용합니다. 두 경우 모두 안전 영역 패딩을 추가하고 콘텐츠가 하나의 뷰포트를 넘어 확장될 수 있게 합니다.
주요 부분
- 01뷰포트 변형
- 02축 백분율
- 03안전한 오버플로우 동작
사용할 때
안정적인 작은 뷰는 `sv*`, 큰 뷰는 `lv*`를 선택하세요. 브라우저 바에 따라 크기가 변하는 경우는 `dv*`를 선택하세요.
다음 경우에는 사용하지 마세요
모바일 브라우저 막대 뒤에 컨트롤이 숨겨지거나 확대된 콘텐츠가 스크롤되지 않도록 `100vh` 고정 페이지를 피하십시오.
코드에서 사용된 이름
svh/svw, lvh/lvw, dvh/dvw, and classic vh/vw 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 뷰포트 단위 (Viewport Units)。 User context：모바일 환영 패널은 `min-block-size: 100svh`를 사용합니다. 브라우저 바가 열려 있을 때 동의 버튼은 보이도록 유지됩니다. 전체 화면 갤러리는 바가 숨겨질 때 `100dvh`를 사용합니다. 두 경우 모두 안전 영역 패딩을 추가하고 콘텐츠가 하나의 뷰포트를 넘어 확장될 수 있게 합니다. Design concept to apply：뷰포트 단위 (Viewport Units)。 Why it fits：안정적인 작은 뷰는 `sv*`, 큰 뷰는 `lv*`를 선택하세요. 브라우저 바에 따라 크기가 변하는 경우는 `dv*`를 선택하세요. Do not use it when：모바일 브라우저 막대 뒤에 컨트롤이 숨겨지거나 확대된 콘텐츠가 스크롤되지 않도록 `100vh` 고정 페이지를 피하십시오. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 뷰포트 단위 (Viewport Units) is used now. Definition: 뷰포트 단위는 브라우저의 표시 영역을 기준으로 하는 CSS 길이입니다. 작은 버전, 큰 버전, 동적 버전은 나타나거나 사라지는 브라우저 바를 처리합니다. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.