CSS만으로도 화면 크기에 맞춰 레이아웃이 자동으로 조정되는 반응형 포트폴리오 갤러리 그리드를 만들 수 있습니다. 핵심 원리는 float 속성으로 이미지 열을 가로로 배치한 뒤, 미디어 쿼리(media query)를 사용해 화면 너비에 따라 열의 개수를 유동적으로 바꾸는 것입니다.
핵심 구현 포인트
- box-sizing: border-box — 패딩과 테두리가 요소의 전체 너비에 포함되도록 하여 레이아웃 계산을 단순화합니다.
- float: left + width: 25% — 데스크톱 화면에서 한 줄에 4개의 이미지가 나란히 정렬됩니다.
- :after 선택자로 clear: both 처리 — float 요소로 인해 발생하는 부모 컨테이너의 높이 무너짐(collapse) 현상을 방지합니다.
- 미디어 쿼리 — 화면 너비가 900px 이하면 2열(50%), 600px 이하면 1열(100%)로 전환되어 모바일에서도 자연스럽게 표시됩니다.
전체 예제 코드
다음은 CSS로 반응형 포트폴리오 갤러리 그리드를 구현한 완전한 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
* {
box-sizing: border-box;
}
h1 {
font-size: 50px;
text-align: center;
font-family: monospace, serif, sans-serif;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
main {
max-width: 1000px;
margin: auto;
}
img {
width: 100%;
}
.portfolioContainer {
margin: 8px -16px;
}
.portfolioContainer,
.portfolioContainer > .ImageCol {
padding: 8px;
}
.ImageCol {
float: left;
width: 25%;
}
.portfolioContainer:after {
content: "";
display: table;
clear: both;
}
.portfolioContent {
background-color: white;
padding: 10px;
}
@media screen and (max-width: 900px) {
.ImageCol {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.ImageCol {
width: 100%;
}
}
</style>
</head>
<body>
<main>
<h1>Photography</h1>
<hr />
<div class="portfolioContainer">
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://i.picsum.photos/id/531/400/400.jpg" />
<h3>Picture 1</h3>
<p>Clicked at my house</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://i.picsum.photos/id/511/400/400.jpg" />
<h3>Picture 2</h3>
<p>Clicked at Tenesse</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://i.picsum.photos/id/521/400/400.jpg" />
<h3>Picture 3</h3>
<p>Clicked on a bridge while travelling</p>
</div>
</div>
<div class="ImageCol">
<div class="portfolioContent">
<img src="https://i.picsum.photos/id/551/400/400.jpg" />
<h3>Picture 4</h3>
<p>Riding my safari jeep in sahara</p>
</div>
</div>
</div>
</main>
</body>
</html>
코드 동작 방식 살펴보기
.portfolioContainer는 음수 마진(-16px)과 패딩을 조합해 각 카드 사이에 균일한 간격을 만듭니다..ImageCol은float: left로 왼쪽부터 차례대로 배치되며, 기본 너비는25%라서 4개의 카드가 한 줄에 들어갑니다..portfolioContent는 흰색 배경과 패딩으로 각 사진에 제목과 설명이 담긴 카드 형태를 제공합니다.- 브라우저 창의 크기를 줄여 보면 미디어 쿼리에 의해 4열 → 2열 → 1열 순서로 레이아웃이 자동 전환되는 것을 확인할 수 있습니다.
출력 결과
위 코드를 실행하면 다음과 같은 출력 결과가 나타납니다.
