지그재그(Zig-Zag) 레이아웃은 텍스트와 이미지가 좌우로 번갈아 배치되어 페이지에 리듬감과 시각적 흥미를 더하는 대표적인 웹 디자인 패턴입니다. 이 글에서는 CSS의 float 속성과 미디어 쿼리(media query)만을 활용해, 화면 크기에 따라 자동으로 조정되는 반응형 지그재그 레이아웃을 만드는 방법을 살펴보겠습니다.
지그재그 레이아웃의 핵심 원리
구현 방식은 생각보다 간단합니다. 전체 너비의 약 66.66%를 차지하는 텍스트 영역(.width66)과 약 33.33%를 차지하는 이미지 영역(.width33)을 만든 뒤, 각 행마다 두 요소의 배치 순서를 교대로 바꾸면 됩니다. 그리고 화면 너비가 1000px 이하로 좁아지면 미디어 쿼리를 통해 모든 열의 너비를 100%로 전환하여 콘텐츠가 세로로 쌓이도록 처리함으로써 모바일 환경까지 자연스럽게 대응할 수 있습니다.
예제 코드
다음은 CSS로 반응형 지그재그 레이아웃을 구현한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div h1 {
font-size: 40px;
color: blueviolet;
text-align: center;
}
div p {
font-size: 18px;
}
.container {
padding: 64px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.width66 {
float: left;
width: 66.66666%;
padding: 20px;
height: 471px;
}
.width33 {
float: left;
width: 33.33333%;
padding: 20px;
height: 471px;
}
.large-font {
font-size: 48px;
}
.xlarge-font {
font-size: 64px;
}
.button {
border: none;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
background-color: #4CAF50;
}
img {
display: block;
height: 250px;
width: 250px;
max-width: 100%;
}
@media screen and (max-width: 1000px) {
.width66, .width33 {
width: 100%;
text-align: center;
}
img {
margin: auto;
}
}
</style>
</head>
<body>
<h1 style="text-align:center">반응형 지그재그 레이아웃 예제</h1>
<div class="width66">
<h1>집시차(Gypsy)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
</div>
<div class="width33">
<img src="https://i.picsum.photos/id/551/800/800.jpg">
</div>
<div class="width33">
<img src="https://i.picsum.photos/id/211/800/800.jpg" alt="App">
</div>
<div class="width66">
<h1>크루즈 선박</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
</div>
<div class="width66">
<h1>자연의 풍경</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p>
</div>
<div class="width33">
<img src="https://i.picsum.photos/id/251/800/800.jpg">
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 텍스트 블록과 이미지가 좌우로 번갈아 배치되어 지그재그 형태를 이루는 것을 확인할 수 있습니다.
브라우저 창의 너비를 1000px 이하로 줄이면, 두 개의 열이 하나의 열로 합쳐지면서 콘텐츠가 세로 방향으로 재정렬되고 이미지는 자동으로 가운데 정렬됩니다.
마무리
이처럼 float 속성과 미디어 쿼리만 활용해도 별도의 프레임워크 없이 반응형 지그재그 레이아웃을 손쉽게 구현할 수 있습니다. 다만 최신 프로젝트에서는 CSS Grid나 Flexbox를 사용하면 clearfix 처리 없이도 더 깔끔하고 유연하게 동일한 레이아웃을 만들 수 있으니, 상황에 맞게 선택해서 적용해 보시기 바랍니다.