맛집이나 여행 포스팅을 하다 보면 사진 10장을 올려야 할 때가 있습니다. 이걸 그냥 세로로 쭉 나열하면 어떻게 될까요? ‘스크롤 지옥’이 펼쳐집니다. 독자는 사진을 보기도 전에 지쳐서 나가버리죠.
인스타그램이 왜 인기 있을까요? 바로 ‘그리드(Grid)’ 때문입니다. 한눈에 들어오는 정사각형 배치가 시각적 편안함을 주거든요. 오늘은 여러분의 블로그나 홈페이지를 인스타 피드처럼 바꿔줄 ‘마법의 코드’를 가져왔습니다. 사진 크기가 들쑥날쑥해도 상관없습니다. 코드가 알아서 예쁘게 잘라줍니다.
1. 복사해서 붙여넣는 ‘인스타 그리드’ 코드
이 코드는 HTML(뼈대), CSS(디자인), JS(팝업 기능)가 하나로 합쳐져 있습니다. 티스토리/워드프레스 [HTML 모드]에서 원하는 위치에 그대로 붙여넣으세요. 이미지 주소(src)만 사장님 사진으로 바꾸면 됩니다.
<style>
/* 1. 그리드 레이아웃 설정 */
.insta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* PC: 한 줄에 3개 */
gap: 10px; /* 사진 사이 간격 */
margin: 20px 0;
}
/* 2. 이미지 스타일 (자동 자르기 & 확대 효과) */
.grid-item {
position: relative;
overflow: hidden;
border-radius: 8px; /* 둥근 모서리 */
cursor: pointer;
aspect-ratio: 1 / 1; /* ★핵심: 무조건 정사각형 비율 유지 */
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover; /* 찌그러지지 않고 꽉 차게 */
transition: transform 0.3s ease; /* 부드러운 움직임 */
}
.grid-item:hover img {
transform: scale(1.1); /* 마우스 올리면 1.1배 확대 */
}
/* 3. 모바일 반응형 (화면 작을 땐 2줄로) */
@media (max-width: 768px) {
.insta-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 4. 팝업(라이트박스) 스타일 */
#popup {
display: none;
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.9); z-index: 9999;
justify-content: center; align-items: center;
}
#popup img {
max-width: 90%; max-height: 90%; border-radius: 5px;
}
#popup span {
position: absolute; top: 20px; right: 30px;
color: white; font-size: 40px; cursor: pointer;
}
</style>
<!-- 사진 목록 (src="이미지주소" 부분을 수정하세요) -->
<div class="insta-grid">
<div class="grid-item" onclick="openPopup(this)"><img src="https://picsum.photos/400/400?random=1"></div>
<div class="grid-item" onclick="openPopup(this)"><img src="https://picsum.photos/400/400?random=2"></div>
<div class="grid-item" onclick="openPopup(this)"><img src="https://picsum.photos/400/400?random=3"></div>
<div class="grid-item" onclick="openPopup(this)"><img src="https://picsum.photos/400/400?random=4"></div>
<div class="grid-item" onclick="openPopup(this)"><img src="https://picsum.photos/400/400?random=5"></div>
<div class="grid-item" onclick="openPopup(this)"><img src="https://picsum.photos/400/400?random=6"></div>
</div>
<!-- 팝업 기능 스크립트 -->
<div id="popup" onclick="this.style.display='none'">
<span>×</span>
<img id="popup-img">
</div>
<script>
function openPopup(element) {
const imgSrc = element.querySelector('img').src;
document.getElementById('popup-img').src = imgSrc;
document.getElementById('popup').style.display = 'flex';
}
</script>“솔직히 고백하자면, 예전엔 사진 크기를 포토샵으로 일일이 500×500으로 잘랐습니다. 하지만 이 코드의 `object-fit: cover` 속성을 알고 난 뒤로 그 짓을 멈췄습니다. 직사각형 사진을 넣어도 알아서 중앙을 중심으로 정사각형으로 보여줍니다. 혁명이죠.”
2. 반응형: 모바일 배려가 핵심
PC에서는 사진 3개가 나란히 보이는 게 예쁘지만, 좁은 모바일 화면에서 3개를 우겨넣으면 사진이 콩알만 해집니다.
그래서 코드 중간에 `@media`라는 부분을 넣었습니다. “화면이 768px보다 작아지면(스마트폰), 한 줄에 2개씩만 보여줘!”라고 명령한 겁니다. 덕분에 폰으로 볼 때도 시원시원한 인스타 감성이 유지됩니다.
💡 코드캠의 실전 TIP: ‘라이트박스’ 팝업
작은 썸네일만 보여주고 끝내면 답답하죠? 위 코드에는 클릭 시 화면이 어두워지면서 큰 이미지가 뜨는 ‘라이트박스(Lightbox)’ 기능이 포함되어 있습니다. 별도의 플러그인 설치 없이 코드 복사만으로 작동합니다.
3. 어디에 쓰면 좋을까요?
- ✅ 포트폴리오: 디자이너, 사진작가의 작품을 한눈에 보여줄 때
- ✅ 쇼핑몰 리뷰: 고객 후기 사진을 모아서 보여줄 때
- ✅ 여행/맛집 블로그: 음식 사진 9장을 ‘메뉴판’처럼 깔끔하게 정리할 때
사진은 ‘배치’가 디자인입니다
아무리 잘 찍은 사진도 배치가 엉망이면 빛을 잃습니다. 반대로 평범한 사진도 ‘그리드(Grid)’ 안에 넣으면 작품처럼 보입니다.
지금 블로그 글쓰기 버튼을 누르고, 위 코드를 붙여넣어 보세요. 그리고 갤러리에 잠자고 있던 사진들을 꺼내보세요. 사장님의 블로그가 순식간에 감성 매거진으로 변신할 겁니다.
