사이드바가 있는 반응형 레이아웃

소개

이 랩에서는 CSS 프로그래밍의 세계를 탐구할 것입니다. 이 랩의 주요 목표는 사이드바가 있는 반응형 레이아웃을 생성하는 실습 경험을 제공하는 것입니다. 이 랩을 마치면, display: grid와 minmax() 속성을 사용하여 효과적이고 시각적으로 매력적인 레이아웃을 만드는 방법에 대한 이해도가 높아질 것입니다.

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

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

콘텐츠 영역과 사이드바가 있는 반응형 레이아웃을 만들려면, 부모 컨테이너에 display: grid를 사용하고, 두 번째 열 (사이드바) 에 minmax()를 사용하여 150px에서 20% 사이의 공간을 차지하도록 하며, 첫 번째 열 (메인 콘텐츠) 에 1fr을 사용하여 나머지 공간을 차지하도록 합니다. 다음은 HTML 및 CSS 코드의 예입니다.

<div class="container">
  <main>This element is 1fr large.</main>
  <aside>Min: 150px / Max: 20%</aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main,
aside {
  padding: 12px;
  text-align: center;
}

main {
  background: #d4f2c4;
}

aside {
  background: #81cfd9;
}

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

요약

축하합니다! 사이드바가 있는 반응형 레이아웃 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.