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

웹 개발에 관심이 많은 주니어 개발자 여러분, 반응형 웹사이트를 만들 때 중요한 것 중 하나가 바로 갤러리입니다. 오늘은 CSS 그리드 레이아웃을 사용하여 멋진 반응형 갤러리를 만드는 방법을 배워보겠습니다. 복잡한 용어는 최대한 피하고, 실제 코드를 통해 쉽게 이해할 수 있도록 할게요!

CSS 그리드 레이아웃이란?

CSS 그리드 레이아웃은 웹 페이지의 요소들을 그리드(격자) 형태로 배치할 수 있게 해주는 CSS 기법입니다. 이를 통해 복잡한 레이아웃도 손쉽게 구현할 수 있죠. 특히 반응형 디자인을 구현할 때 매우 유용합니다.

기본 설정

먼저, 갤러리를 만들기 위한 HTML 구조를 만들어봅시다. 간단하게 div 태그를 사용하여 이미지를 담을 컨테이너를 만들고, 그 안에 여러 개의 이미지(img) 태그를 넣어줍니다.

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

CSS 그리드 적용하기

이제 CSS를 사용하여 갤러리에 그리드 레이아웃을 적용해봅시다. .gallery 클래스에 display: grid; 속성을 추가하여 그리드 컨테이너를 만들고, grid-template-columns 속성을 사용하여 각 열의 크기를 정의합니다. 반응형 디자인을 위해 fr 단위와 auto-fit, minmax() 함수를 활용할 것입니다.

.gallery {
    display: grid;
    grid-gap: 10px; /* 각 이미지 사이의 간격 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

grid-template-columns 속성에서 repeat(auto-fit, minmax(250px, 1fr))는 컨테이너의 크기에 따라 열의 개수가 자동으로 조정되도록 합니다. 각 이미지는 최소 250px, 최대 1fr(가용 공간을 모두 사용)의 너비를 가지게 됩니다. 이렇게 설정하면 브라우저의 크기가 변해도 갤러리가 자연스럽게 반응합니다.

이미지 스타일링

마지막으로, 이미지가 그리드 내에서 잘 보이도록 스타일을 추가해줍니다. 이미지가 각 그리드 셀에 꽉 차도록 width와 height를 조정하고, object-fit 속성을 사용하여 이미지 비율이 유지되도록 합니다.

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지 비율을 유지하면서 셀에 꽉 차게 */
}

이제 여러분의 웹사이트에 멋진 반응형 갤러리가 추가되었습니다! CSS 그리드 레이아웃을 사용하면 이처럼 복잡하지 않으면서도 효과적인 레이아웃을 구현할 수 있습니다. 주니어 개발자 여러분, 오늘 배운 내용을 활용하여 다양한 프로젝트에 도전해보세요! 🚀