이 템플릿은 세로 구도의 사진 4장을 인스타 감성의 폴라로이드 스타일로, 한 화면에 콜라주 형태로 배치할 수 있도록 디자인된 레이아웃입니다. 각 사진은 흰색 테두리와 라운드 처리된 모서리, 은은한 그림자 효과로 독립된 카드 느낌을 살렸으며 기울기와 겹침 효과를 활용해 자유롭고 자연스러운 분위기를 연출합니다. 템플릿의 배경은 깔끔하고 심플하게 구성되어 사진의 컬러와 내용이 돋보이고 개별 사진들은 좌우·상하로 교차 배치되어 입체감과 생동감을 더합니다. 반응형 구조로 모바일에서는 세로 한 줄로 정렬되어 가독성을 유지합니다. 여행, 일상, 인물 등 다양한 테마의 사진을 감각적으로 배열할 수 있어 포토 에세이, 브이로그, 추억 기록 등에 활용도가 높습니다. ▼
세로사진 템플릿 4장
☑
모바일에서 1열(한 줄 세로)로 보이도록 만드는 핵심 매커니즘은 미디어쿼리(@media)와 CSS 레이아웃 전환에 있습니다.
- 미디어쿼리(@media) 사용
@media (max-width: 700px)처럼 화면 가로폭이 700px 이하(모바일 환경)일 때만 CSS 규칙이 적용되게 만듭니다. - 카드의 position 변경
PC에서는 .ti-polaroid-img에 position: absolute를 적용해 카드가 자유롭게 겹치도록 배치하지만
모바일에선 .ti-polaroid-img에 position: static !important;를 줘서 각 카드가 흐름대로 아래로 쌓이게(블록 요소처럼) 만듭니다. - 가로 너비와 정렬 변경
모바일에서는 .ti-polaroid-collage에 display: flex; flex-direction: column; align-items: center;를 추가하여
모든 카드가 한 줄 세로 방향으로 정렬되고, 좌우 가운데에 오도록 합니다.
카드의 너비도 width: 92vw; max-width: 350px; 등으로 본문에 맞게 자동 조정됩니다.
즉, 브라우저가 모바일 크기임을 감지하면 카드들이 자동으로 한 줄 세로로 바뀌어(1열), 겹침 없이 위에서 아래로 순서대로 정렬되는 구조입니다.
실제 코드는 아래처럼 동작합니다.
@media (max-width: 700px) {
.ti-polaroid-collage {
display: flex;
flex-direction: column;
align-items: center;
}
.ti-polaroid-img {
position: static !important;
width: 92vw;
max-width: 350px;
margin: 0 auto;
transform: none !important;
}
}
핵심 사항
- PC : position: absolute + 겹침
- 모바일 : position: static + flex column (순차 세로 1열 정렬) 이 방식으로 구현됩니다.
네 장의 세로 사진을 한 화면에 감각적으로 보여주는 이 콜라주 템플릿은 다양한 이미지를 효과적으로 소개할 수 있도록 설계되었습니다. 폴라로이드 감성의 레이아웃으로 각 사진의 개성을 살리면서도 전체적으로는 통일감 있게 연출할 수 있습니다. 단조로운 나열을 지양하고 각기 다른 이미지가 조화롭게 배치되어 하나의 새로운 분위기를 만듭니다. 데스크톱에서는 입체적으로 보이고 모바일에서는 세로 한 줄로 자연스럽게 전환되어 어떤 기기에서도 보기 좋게 구성됩니다. 사진을 모아 스토리텔링을 하거나 여행·일상 기록을 남기고 싶은 분들에게 추천할 만한 템플릿입니다.
