CSS 를 활용한 수직 스크롤 스냅 마스터하기

소개

이 랩에서는 CSS 프로그래밍의 세계를 탐구하고 다양한 기능과 특징을 살펴볼 것입니다. 이 랩의 목적은 학습자들이 CSS 를 사용하여 시각적으로 매력적이고 반응형 웹 페이지를 만들 수 있는 데 필요한 기술을 갖추도록 하는 것입니다. 실습과 실험을 통해 학습자는 CSS 구문, 선택자 (selectors), 속성 (properties) 등에 대한 탄탄한 이해를 얻게 될 것입니다.

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

수직 스크롤 스냅 (Vertical Scroll Snap)

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

이 코드는 스크롤 시 요소에 스냅되는 스크롤 가능한 컨테이너를 생성합니다. 이 효과를 얻기 위해 다음 단계가 수행됩니다.

display: grid와 grid-auto-flow: row를 사용하여 수직 레이아웃을 생성합니다.
scroll-snap-type: y mandatory와 overscroll-behavior-y: contain을 사용하여 수직 스크롤에 스냅 효과를 생성합니다.
scroll-snap-align을 start, stop 또는 center와 함께 사용하여 스냅 정렬을 변경할 수 있습니다.

다음은 HTML 및 CSS 코드입니다.

<div class="vertical-snap">
  <a href="#"><img src="https://picsum.photos/id/1067/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/122/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/188/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/249/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/257/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/259/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/283/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/288/640/640" /></a>
  <a href="#"><img src="https://picsum.photos/id/299/640/640" /></a>
</div>

.vertical-snap {
  margin: 0 auto;
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;
  width: calc(180px + 1rem);
  padding: 1rem;
  height: 480px;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

.vertical-snap > a {
  scroll-snap-align: center;
}

.vertical-snap img {
  width: 180px;
  object-fit: contain;
  border-radius: 1rem;
}

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

요약

축하합니다! 수직 스크롤 스냅 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.