CSS로 반응형 이미지 갤러리 만들기

요소를 설정합니다.

<div class="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>

CSS 스타일링으로 갤러리 만들기

갤러리의 레이아웃을 스타일링하기 위해 CSS를 추가합니다. Flexbox를 활용하여 이미지의 배치와 크기를 유연하게 조정합니다.

.gallery {
  display: flex;
  flex-wrap: wrap; /* 여러 줄로 자동으로 배열됩니다. */
  justify-content: center; /* 중앙 정렬합니다. */
}
.gallery img {
  flex: 0 0 300px; /* 기본 너비 설정 */
  height: auto; /* 비율 유지 */
  margin: 10px; /* 간격 설정 */
  object-fit: cover; /* 이미지가 지정된 공간을 가득 채우도록 조정합니다. */
}

미디어 쿼리로 반응형 디자인 적용하기

미디어 쿼리를 통해 다양한 화면 크기에 맞춰 스타일을 조정할 수 있습니다. 예를 들어, 화면의 너비가 768픽셀 이하일 때 이미지의 너비를 100%로 설정할 수 있습니다.

@media screen and (max-width: 768px) {
  .gallery img {
    flex: 0 0 100%; /* 작은 화면에서는 100% 너비로 조정 */
    height: 150px; /* 높이 조정 */
  }
}

반응형 이미지 갤러리 동작 확인하기

위와 같이 설정된 CSS는 다양한 디바이스에서 자동으로 조정됩니다. 모바일에서 데스크탑까지, 사용자가 어떤 기기를 사용하든 깔끔한 갤러리 형태를 유지하게 됩니다.

갤러리의 추가적인 스타일링 및 기능

갤러리에 추가적인 스타일을 더하여 더욱 매력적인 디자인을 만들 수 있습니다. 예를 들어, 이미지에 호버 효과를 주어 사용자가 마우스를 올릴 때 약간의 변화를 주는 것도 좋은 방법입니다.

.gallery img:hover {
  transform: scale(1.05); /* 호버 시 이미지 확대 */
  transition: transform 0.3s ease; /* 부드러운 전환 효과 */
}

결론

이렇게 CSS Flexbox와 미디어 쿼리를 활용하여 반응형 이미지 갤러리를 쉽게 구현할 수 있습니다. 이 방법은 모든 기기에서 유연하게 크기를 조정하므로, 다양한 사용자의 경험을 향상시키는 데 큰 도움이 됩니다. 여러분도 위의 방법을 통해 멋진 이미지 갤러리를 만들어 보시기 바랍니다!

자주 찾으시는 질문 FAQ