반응형 이미지 그리드는 화면 크기에 따라 열 개수가 자동으로 조정되는 레이아웃으로, 데스크톱, 태블릿, 모바일 등 어떤 기기에서도 최적의 화면을 제공합니다. 이 글에서는 CSS Flexbox와 미디어 쿼리(Media Query)를 활용해 HTML과 CSS만으로 반응형 이미지 그리드를 구현하는 방법을 소개합니다.
핵심 원리
- outer-grid:
display: flex와flex-wrap: wrap속성을 적용해 자식 요소들이 공간이 부족하면 자동으로 줄바꿈되도록 합니다. - inner-grid: 각 열 역할을 하는 컨테이너로,
flex: 25%를 지정해 한 줄에 4개의 열이 배치됩니다. - 미디어 쿼리: 화면 너비가 800px 이하로 줄어들면 2열(50%), 600px 이하로 줄어들면 1열(100%)로 전환됩니다.
- box-sizing: border-box: 패딩과 테두리를 포함해 요소 크기를 계산하므로 레이아웃이 어긋나는 문제를 방지합니다.
전체 코드 예제
다음은 HTML과 CSS를 사용해 반응형 이미지 그리드를 만드는 완전한 코드입니다.
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
h1 {
text-align: center;
}
.outer-grid {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.inner-grid {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.inner-grid img {
margin-top: 8px;
width: 100%;
padding: 10px;
}
@media screen and (max-width: 800px) {
.inner-grid {
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.inner-grid {
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<h1>Responsive Image Grid Example</h1>
<div class="outer-grid">
<div class="inner-grid">
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/1083822/pexels-photo-1083822.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</div>
<div class="inner-grid">
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/3805102/pexels-photo-3805102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</div>
<div class="inner-grid">
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
<img src="https://images.pexels.com/photos/3863778/pexels-photo-3863778.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"/>
</div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 각 열에 세 장씩 이미지가 배치된 그리드 레이아웃이 화면에 나타납니다.
화면 크기에 따른 반응형 동작
브라우저 창의 너비를 줄이면 미디어 쿼리 조건에 따라 그리드가 3열 → 2열 → 1열 순서로 자동 재배치됩니다. 덕분에 별도의 JavaScript 없이도 모든 기기에서 깔끔하게 정렬된 이미지 목록을 유지할 수 있습니다.
마무리
Flexbox와 미디어 쿼리만 활용해도 복잡한 라이브러리 없이 반응형 이미지 갤러리를 손쉽게 만들 수 있습니다. 열 개수나 전환 시점(브레이크포인트)은 flex 값과 @media 조건만 수정하면 되므로, 프로젝트 성격에 맞게 자유롭게 응용해 보시기 바랍니다.