CSS 뷰포트 단위: CSS *vh(dvh, lvh, svh) 및 *vw 단위

CSS 뷰포트 단위는 다양한 화면 크기에 적응하는 반응형 레이아웃을 만드는 데 필수적입니다. 이러한 단위는 뷰포트의 높이와 너비를 기준으로 치수를 측정하므로 개발자는 유연하고 적응 가능한 웹 인터페이스를 디자인할 수 있습니다. 이 가이드에서는 전통적인 vh 및 vw 단위를 다루고 dvh, lvh 및 svh와 같은 최신 단위를 소개하여 응답성을 향상시키고 뷰포트 변경을 보다 효과적으로 처리하는 방법을 설명합니다.

1. CSS의 뷰포트 단위란 무엇입니까?

뷰포트 단위는 브라우저의 뷰포트 크기에 따라 동적으로 조정되는 상대적 단위입니다. 가장 일반적으로 사용되는 것은 다음과 같습니다.

• vh: 뷰포트 높이의 1%
• vw: 뷰포트 너비의 1%

이러한 단위를 사용하면 브라우저 창 크기에 따라 확장되는 요소를 쉽게 디자인할 수 있습니다. 예를 들면 다음과 같습니다.

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

이 예에서 div는 뷰포트 너비의 절반과 전체 높이에 걸쳐 있습니다.

2. 기존 vh 및 vw의 한계

vh 및 vw는 대부분의 시나리오에서 잘 작동하지만 다음과 같은 뷰포트의 특정 동적 변경 사항을 설명하지 않습니다.

• 모바일 기기의 브라우저 주소 표시줄이나 탐색 컨트롤의 모양
• 기기 방향 또는 브라우저 창 크기 조정으로 인해 변경이 발생합니다.

이러한 제한으로 인해 디자인이 일관되지 않게 나타나거나 특히 모바일에서 의도하지 않은 레이아웃 문제가 발생할 수 있습니다.

3. 새로운 뷰포트 단위: dvh, lvh 및 svh

이러한 문제를 해결하기 위해 CSS는 dvh(동적 뷰포트 높이), lvh(큰 뷰포트 높이), svh(작은 뷰포트 높이)라는 세 가지 새로운 단위를 도입했습니다.

동적 뷰포트 높이(dvh)

dvh는 브라우저 UI 요소의 표시 또는 사라짐과 같은 뷰포트의 변경 사항에 따라 동적으로 조정됩니다. 현재 뷰포트 높이의 1%를 나타내므로 레이아웃이 실시간으로 조정됩니다.

예:

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

이렇게 하면 브라우저 UI가 변경되더라도 div가 항상 표시 영역에 맞도록 보장됩니다.

큰 뷰포트 높이(lvh)

lvh는 동적 UI 변경(예: 모바일 주소 표시줄)을 무시하고 가능한 최대 뷰포트 높이의 1%를 나타냅니다.

예:

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

브라우저 UI 변경에 관계없이 일관성을 유지해야 하는 레이아웃에 유용합니다.

작은 뷰포트 높이(svh)

svh는 가능한 가장 작은 뷰포트 높이의 1%를 나타내며 브라우저 UI가 화면의 상당 부분을 차지하는 시나리오를 수용합니다.

예:

div {
  width: 50vw; /* 50% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  background-color: lightblue;
}

이 장치는 키보드 팝업과 같은 UI 요소가 표시 영역을 축소할 수 있는 장치를 다룰 때 특히 유용합니다.

4. 뷰포트 너비(vw)

vw는 뷰포트 너비의 1%를 측정합니다. 일관성을 유지하며 스크롤이나 UI 모양과 같은 동적 변화에 영향을 받지 않습니다.

예:

div {
  height: 100dvh; /* Adjusts dynamically to visible viewport height */
  background-color: lightgreen;
}

가로 레이아웃이나 전체 너비 디자인에 적합합니다.

5. 실제 사용 사례

이러한 단위를 실제 시나리오에 적용하는 방법은 다음과 같습니다.

반응형 히어로 섹션

div {
  height: 100lvh; /* Fixed to the maximum viewport height */
  background-color: lightcoral;
}

이렇게 하면 모바일 주소 표시줄이 숨겨지거나 나타나는 경우에도 히어로 섹션이 항상 화면에 맞도록 보장됩니다.

전체 페이지 모달

div {
  height: 100svh; /* Adjusts to the smallest viewport height */
  background-color: lightgoldenrodyellow;
}

svh를 사용하면 화면 키보드가 뷰포트 높이를 줄이는 경우에도 모달을 계속 사용할 수 있습니다.

고정 바닥글

div {
  width: 100vw; /* Full viewport width */
  background-color: lightpink;
}

다양한 기기에서 크기가 유지되는 고정 바닥글입니다.

6. 유연성 극대화를 위한 단위 결합

보다 적응력이 뛰어난 디자인을 위해 이러한 장치를 혼합하고 일치시킬 수 있습니다. 예:

.hero {
  height: 100dvh; /* Ensures the hero fits the visible viewport */
  width: 100vw;
  background: url('hero.jpg') no-repeat center center/cover;
}

이 접근 방식을 사용하면 디자인이 가능한 모든 뷰포트 시나리오에 적응할 수 있습니다.

7. 브라우저 지원

vh 및 vw는 여러 브라우저에서 광범위하게 지원되지만 dvh, lvh 및 svh는 새로 추가되었습니다. 브라우저 호환성을 확인하고 이전 브라우저에 대한 대체 기능을 제공하세요.

대체 예:

.modal {
  height: 100svh; /* Accounts for the smallest viewport height */
  width: 100vw;
  overflow-y: auto; /* Allows scrolling if needed */
  background-color: white;
}

8. 결론

vh, vw, dvh, lvh 및 svh와 같은 CSS 뷰포트 단위는 반응형 및 적응형 웹 디자인을 만들기 위한 강력한 도구입니다. vh 및 vw는 대부분의 경우를 처리하지만 최신 dvh, lvh 및 svh 장치는 특히 모바일 장치의 제한 사항을 해결합니다. 모바일 앱 개발자는 이러한 단위를 이해하고 활용함으로써 모든 기기와 시나리오에서 작동하는 원활하고 사용자 친화적인 디자인을 만들 수 있습니다.

위 내용은 CSS 뷰포트 단위: CSS *vh(dvh, lvh, svh) 및 *vw 단위의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!