[css]Flexbox 마스터하기: 4. Flexbox를 활용한 반응형 사진 갤러리 예제

안녕하세요! 이번에는 Flexbox를 활용하여 반응형 사진 갤러리를 구현하는 예제에 대해 알아보겠습니다. 이 예제는 다양한 디바이스와 화면 크기에 자동으로 조정되는 유연한 레이아웃을 구현하는 방법을 보여줄 것입니다.

 

<div class="image-gallery">
  <img src="https://picsum.photos/300/300?random=1" alt="Image 1">
  <img src="https://picsum.photos/300/300?random=2" alt="Image 2">
  <img src="https://picsum.photos/300/300?random=3" alt="Image 3">
  <img src="https://picsum.photos/300/300?random=4" alt="Image 4">
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image {
  flex: 0 0 300px;
  height: 200px;
  margin: 10px;
  object-fit: cover;
  /* 이미지 스타일 및 배경 설정 */
}

@media screen and (max-width: 768px) {
  .image {
    flex: 0 0 100%;
    height: 150px;
  }
}

[ 예제 설명 ]

위의 예제에서는 .gallery를 Flex 컨테이너로 설정하고, img 태그를 Flex 아이템으로 배치합니다. 사진 갤러리는 가로로 유연하게 표시되며, 화면의 크기에 따라 자동으로 조정됩니다.

각 이미지는 src 속성을 통해 실제 이미지 파일을 로드하고, alt 속성을 통해 대체 텍스트를 제공합니다. .image 클래스를 적용하여 스타일을 설정하며, flex: 0 0 300px;를 사용하여 이미지의 고정된 너비를 지정합니다.

object-fit: cover;를 사용하여 이미지가 자동으로 채워지도록 설정합니다. 이렇게 함으로써 이미지가 유지되면서 적절하게 화면에 맞춰 표시됩니다.

@media 쿼리를 사용하여 화면 크기가 768px 이하일 때 .image의 너비를 100%로 설정하고, 높이를 150px로 조정합니다. 이렇게 함으로써 작은 화면에서도 이미지가 화면에 나오도록 만들어 반응형으로 동작하게 됩니다.

Flexbox를 사용하여 구현된 이 예제는 다양한 디바이스에서 사진 갤러리가 깔끔하게 표시될 수 있습니다. 이미지의 크기와 배치가 유연하게 조정되므로 모바일 기기부터 데스크탑까지 다양한 화면에서 잘 동작할 것입니다.

이렇게 Flexbox를 활용하여 반응형 사진 갤러리를 구현할 수 있습니다. 다양한 브라우저와 디바이스에서 효과적으로 작동하는 유연한 레이아웃을 만들어보세요.

"배너 클릭시 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

"배너 클릭시 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."