CSS Grid Layout으로 반응형 갤러리 만들기 🖼️

반응형 웹 디자인은 오늘날 웹 개발의 핵심입니다. 사용자들이 다양한 크기의 스크린으로 웹사이트를 방문하기 때문에, 모든 디바이스에서 멋지게 보이는 웹사이트를 만드는 것이 중요해졌죠. 오늘은 CSS Grid Layout을 사용하여 멋진 반응형 갤러리를 만드는 방법을 배워볼 거예요. 복잡한 용어는 사용하지 않을 테니 걱정 마세요!

시작하기 전에

CSS Grid Layout은 웹 페이지를 그리드(격자) 기반으로 디자인할 수 있게 해주는 강력한 CSS 기능입니다. 이를 통해 복잡한 레이아웃도 쉽게 구현할 수 있어요. 반응형 갤러리를 만들기 위해, 우리는 이 그리드 시스템을 활용할 거예요.

기본 HTML 구조

먼저, 갤러리에 들어갈 이미지들을 위한 간단한 HTML 구조를 만들어봅시다.

<div class="gallery">
  <div class="item"><img src="image1.jpg" alt="Gallery image 1"></div>
  <div class="item"><img src="image2.jpg" alt="Gallery image 2"></div>
  <div class="item"><img src="image3.jpg" alt="Gallery image 3"></div>
  <!-- 여기에 더 많은 이미지를 추가할 수 있습니다 -->
</div>

CSS를 이용한 그리드 설정

이제 CSS를 사용하여 .gallery 클래스에 그리드 레이아웃을 적용해봅시다.

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

• display: grid;는 이 요소를 그리드 컨테이너로 만듭니다.
• grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));는 각 그리드 아이템이 최소 250px, 최대 1fr(가능한 공간을 모두 차지)의 크기를 가지며, 화면 크기에 따라 자동으로 아이템 수를 조절합니다.
• gap: 20px;는 각 아이템 사이의 간격을 설정합니다.
• padding: 20px;는 갤러리 주변의 여백을 추가합니다.

반응형 갤러리 완성

위의 CSS 코드를 적용하면, 다양한 화면 크기에서도 멋지게 보이는 반응형 갤러리를 만들 수 있습니다. 화면이 작아지면 자동으로 아이템의 수가 줄어들고, 크면 늘어나면서 항상 최적의 레이아웃을 유지하게 됩니다.

이제 여러분도 CSS Grid Layout을 사용하여 멋진 반응형 갤러리를 만들어 볼 수 있습니다. 간단한 코드 몇 줄만으로도 사용자들에게 더 나은 경험을 제공할 수 있어요. 웹 개발의 세계에서는 이런 작은 디테일이 큰 차이를 만듭니다. 시작해보세요!