고정된 너비 대 높이 비율: 반응형 디자인 기법 - CSS 학습

소개

이 랩에서는 다양한 너비를 가진 요소에 대해 고정된 너비 대 높이 비율을 만드는 방법을 살펴봅니다. ::before 가상 요소에 padding-top 속성을 사용하여 요소의 높이가 너비에 비례하도록 유지할 수 있습니다. 이 기술은 반응형 사각형 및 특정 종횡비를 가진 다른 모양을 만드는 데 사용할 수 있습니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 97%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

고정된 너비 대 높이 비율

index.html 및 style.css는 이미 VM 에 제공되었습니다.

이 코드 조각은 가변적인 width를 가진 요소가 비례적인 height 값을 유지하도록 보장합니다. 이를 위해 ::before 가상 요소에 padding-top을 적용하여 요소의 height가 width의 백분율과 같도록 만듭니다. height 대 width의 비율은 필요에 따라 변경할 수 있습니다. 예를 들어, padding-top이 100%이면 1:1 비율의 반응형 사각형이 생성됩니다. 이 코드를 사용하려면 다음 HTML 코드를 추가하십시오.

<div class="constant-width-to-height-ratio"></div>

그런 다음 다음 CSS 코드를 추가하십시오.

.constant-width-to-height-ratio {
  background: #9c27b0;
  width: 50%;
}

.constant-width-to-height-ratio::before {
  content: "";
  padding-top: 100%;
  float: left;
}

.constant-width-to-height-ratio::after {
  content: "";
  display: block;
  clear: both;
}

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 고정된 너비 대 높이 비율 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.