반응형 이미지 모자이크: CSS 레이아웃 및 디자인 마스터하기

소개

이 랩에서는 CSS 프로그래밍의 기본 사항을 탐구합니다. 일련의 실습과 프로젝트를 통해 HTML 콘텐츠 스타일 지정, 레이아웃 및 위치 조작, 다양한 화면 크기에 적응하는 반응형 디자인 생성 방법을 배우게 됩니다. 이 랩을 마치면 CSS 에 대한 탄탄한 기반을 갖추게 되어 시각적으로 훌륭한 웹 페이지를 만들 수 있게 됩니다.

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

반응형 이미지 모자이크

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

반응형 이미지 모자이크를 만들려면 display: grid를 사용하여 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) 및 grid-auto-rows: 240px로 반응형 그리드 레이아웃을 만듭니다. 항목을 두 행 또는 두 열에 걸쳐 표시하려면 grid-row: span 2 / auto 및 grid-column: span 2 / auto를 사용합니다. 마지막으로, 이러한 스타일을 미디어 쿼리 (media query) 로 묶어 작은 화면 크기에는 적용되지 않도록 합니다.

<div class="image-mosaic">
  <div
    class="card card-tall card-wide"
    style="background-image: url('https://picsum.photos/id/564/1200/800')"
  ></div>
  <div
    class="card card-tall"
    style="background-image: url('https://picsum.photos/id/566/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/575/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/626/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/667/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/678/800/530')"
  ></div>
  <div
    class="card card-wide"
    style="background-image: url('https://picsum.photos/id/695/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/683/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/693/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/715/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/610/800/530')"
  ></div>
  <div
    class="card"
    style="background-image: url('https://picsum.photos/id/599/800/530')"
  ></div>
</div>

.image-mosaic {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-auto-rows: 240px;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #353535 url("https://picsum.photos/id/564/1200/800") center /
    cover no-repeat;
  font-size: 3rem;
  color: #fff;
  box-shadow:
    rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem,
    rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transition: all 500ms;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.card-tall {
  grid-row: span 2 / auto;
}

.card-wide {
  grid-column: span 2 / auto;
}

@media screen and (max-width: 599px) {
  .card-tall,
  .card-wide {
    grid-row: span 1 / auto;
    grid-column: span 1 / auto;
  }
}

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

반응형 이미지 모자이크

소개

반응형 이미지 모자이크

요약