반응형 컨테이너 | 종횡비 | CSS 튜토리얼 - 웹 디자인

소개

이 랩에서는 CSS 를 사용하여 지정된 종횡비 (aspect ratio) 를 가진 반응형 컨테이너를 만드는 방법을 배웁니다. --aspect-ratio 사용자 정의 속성 (custom property) 과 calc() 함수를 사용하여 컨테이너의 높이를 계산하는 방법을 소개합니다. 또한, object-fit: cover 속성을 사용하여 자식 요소가 종횡비를 유지하도록 설정하는 방법도 배웁니다. 이 랩을 마치면 웹 페이지에서 시각적으로 매력적이고 반응형 컨테이너를 만드는 방법에 대한 이해도가 높아질 것입니다.

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

종횡비 (Aspect Ratio)

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

이 코드는 CSS 사용자 정의 속성 (custom property) 과 calc() 함수를 사용하여 특정 종횡비를 가진 반응형 컨테이너를 생성합니다. 다음 단계를 따라 이를 구현하십시오.

CSS 사용자 정의 속성 --aspect-ratio를 사용하여 원하는 종횡비를 정의합니다.
컨테이너 요소의 position 속성을 relative로 설정하고 height 속성을 0으로 설정합니다.
calc() 함수와 --aspect-ratio 사용자 정의 속성을 사용하여 컨테이너 요소의 높이를 계산하고, 이를 padding-bottom 속성으로 설정합니다.
컨테이너 요소의 직접적인 자식 요소의 position을 absolute, top: 0, left: 0, width: 100%, height: 100%로 설정합니다.
자식 요소의 object-fit 속성을 cover로 설정하여 자식 요소의 종횡비를 유지합니다.

다음 HTML 및 CSS 코드를 사용하여 컨테이너를 생성하십시오.

<div class="container">
  <img src="https://picsum.photos/id/119/800/450" />
</div>

.container {
  --aspect-ratio: 16/9;
  position: relative;
  height: 0;
  padding-bottom: calc(100% / var(--aspect-ratio));
}

.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

요약

축하합니다! 종횡비 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.

반응형 컨테이너 종횡비 CSS

소개

종횡비 (Aspect Ratio)

요약