CSS 뷰포트 유닛 vh를 사용하여 모바일 화면에 적합한 웹 페이지 레이아웃을 만드는 방법

CSS 뷰포트 유닛 vh를 사용하여 모바일 화면에 적합한 웹 페이지 레이아웃을 만드는 방법

모바일 장치의 인기와 사용이 점점 더 널리 보급되고 있으며 점점 더 많은 웹 페이지가 모바일 화면에 맞게 조정되어야 합니다. 모바일 화면. 이 문제를 해결하기 위해 CSS3에서는 vh(뷰포트 높이)를 포함하는 새로운 단위-뷰포트 단위를 도입했습니다. 이 기사에서는 vh 단위를 사용하여 모바일 화면에 적합한 웹 페이지 레이아웃을 만드는 방법을 살펴보고 구체적인 코드 예제를 제공합니다.

1. 뷰포트 단위 소개
뷰포트는 웹페이지가 브라우저 창에 콘텐츠를 표시하는 영역을 말합니다. vh 단위는 뷰포트의 높이를 기준으로 하는 단위입니다. vh 값은 뷰포트 높이에 대한 백분율이고 1vh는 뷰포트 높이의 1%와 같습니다. 예를 들어 뷰포트의 높이가 800픽셀이면 1vh는 8픽셀과 같습니다.

2. 휴대폰 화면에 맞는 웹페이지 레이아웃 만들기
vh 유닛을 사용하면 휴대폰 화면에 맞는 웹페이지 레이아웃을 쉽게 만들 수 있습니다. 아래에서는 몇 가지 일반적인 레이아웃 방법을 소개합니다.

1. 전체 화면 레이아웃
   전체 화면 레이아웃은 웹 콘텐츠가 흰색 가장자리를 남기지 않고 전체 휴대폰 화면에 표시되는 것을 의미합니다. 이는 HTML 및 본문 요소의 높이를 100vh로 설정하여 달성할 수 있습니다.

html, body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

2. 수직 중앙 레이아웃
   수직 중앙 레이아웃은 콘텐츠가 휴대폰 화면 중앙에 수직으로 표시된다는 의미입니다. 상위 컨테이너의 높이를 100vh로 설정하고 플렉스 레이아웃을 사용하여 수직 중앙 정렬을 달성할 수 있습니다.

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

3. 상단 고정 레이아웃
   상단 고정 레이아웃은 웹 페이지 상단의 콘텐츠가 웹 페이지 상단에 고정된다는 의미입니다. 모바일 화면이며 스크롤 막대로 스크롤하지 않습니다. 콘텐츠 영역의 높이를 100vh로 설정하고 고정 위치 지정을 사용하여 달성할 수 있습니다.

.container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
}

4. 적응형 이미지 레이아웃
   웹 페이지 제작에서는 휴대폰 화면에 적응형 이미지를 표시해야 하는 경우가 많습니다. vh 단위를 사용하여 이미지의 높이와 너비를 뷰포트의 특정 비율로 설정할 수 있습니다. 예를 들어 적응형 이미지 레이아웃을 얻으려면 이미지 높이를 50vh로 설정하고 너비를 50vh로 설정하세요.

img {
  height: 50vh;
  width: 50vh;
}

3 . 요약
CSS 뷰포트 유닛 vh 를 사용하면 휴대폰 화면에 적합한 웹페이지 레이아웃을 쉽게 만들 수 있습니다. 이 문서에서는 전체 화면 레이아웃, 수직 중앙 레이아웃, 상단 고정 레이아웃, 적응형 이미지 레이아웃을 포함한 몇 가지 일반적인 레이아웃 방법을 소개하고 구체적인 코드 예제를 제공합니다. 이 기사가 독자들이 모바일 화면에 더 잘 적응하고 웹 페이지의 사용자 경험을 향상시키는 데 도움이 되기를 바랍니다.

위 내용은 CSS 뷰포트 유닛 vh를 사용하여 모바일 화면에 적합한 웹 페이지 레이아웃을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!