CSS 그리드 레이아웃으로 반응형 갤러리 만들기 🖼️

웹 개발에 관심이 많은 주니어 개발자 여러분, 오늘은 CSS 그리드 레이아웃을 활용해 멋진 반응형 갤러리를 만드는 방법을 소개하려 합니다. 복잡해 보일 수 있는 그리드 레이아웃이지만, 기본 개념을 이해하면 생각보다 쉽게 접근할 수 있어요. 시작해볼까요?

CSS 그리드 레이아웃 기초

CSS 그리드는 웹 페이지를 2차원의 그리드로 나누어 레이아웃을 구성할 수 있게 해주는 강력한 CSS 기능입니다. 이를 통해, 우리는 열과 행을 기반으로 요소를 정렬할 수 있어요.

먼저, 그리드 컨테이너를 만들어보겠습니다. HTML에서 갤러리를 감쌀 div 태그를 추가하고, CSS에서 이를 그리드 컨테이너로 지정해줍니다.

<div class="gallery">
  <!-- 이미지들 -->
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

위 코드에서 grid-template-columns 속성은 각 열의 크기를 정의합니다. auto-fill과 minmax() 함수를 함께 사용하면, 브라우저의 크기에 따라 열의 수가 자동으로 조절되어 반응형 디자인을 구현할 수 있습니다. gap 속성은 그리드 아이템 사이의 간격을 지정합니다.

이미지 추가하기

이제 갤러리에 이미지를 추가해볼까요? 간단하게 몇 개의 이미지 태그를 gallery 클래스 안에 넣어줍니다.

<div class="gallery">
  <img src="image1.jpg" alt="갤러리 이미지 1">
  <img src="image2.jpg" alt="갤러리 이미지 2">
  <img src="image3.jpg" alt="갤러리 이미지 3">
  <!-- 더 많은 이미지 -->
</div>

이미지들은 자동으로 그리드 레이아웃에 맞춰 조정됩니다. 각 이미지가 다른 크기를 가지고 있더라도, CSS 그리드가 알아서 예쁘게 배열해줍니다.

반응형 만들기

위에서 설명한 grid-template-columns 속성 덕분에, 우리의 갤러리는 이미 반응형입니다. 하지만, 더 세밀한 조정을 위해 미디어 쿼리를 추가할 수 있습니다.

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

이 미디어 쿼리는 브라우저의 너비가 600px 이하일 때, 각 열의 최소 크기를 200px로 조정합니다. 이렇게 하면 화면이 작아져도 콘텐츠가 잘 보이도록 할 수 있습니다.

마무리

CSS 그리드 레이아웃을 사용하면, 복잡한 레이아웃도 쉽고 빠르게 구현할 수 있습니다. 오늘 배운 내용을 활용해 멋진 반응형 갤러리를 만들어보세요. 웹 개발의 세계는 끝없이 탐험할 것들로 가득 차 있습니다. 계속해서 새로운 것을 배우고, 실험하며, 성장해나가는 것이 중요해요. Happy coding! 🚀