CSS를 활용하면 화면 크기에 따라 열의 개수가 유동적으로 변하는 반응형 혼합 열 레이아웃 그리드를 손쉽게 구현할 수 있습니다. 이번 글에서는 float 속성과 미디어 쿼리(@media)를 조합하여 4열 → 2열 → 1열로 자동 전환되는 그리드 레이아웃을 만드는 방법을 단계별로 살펴보겠습니다.
핵심 개념 정리
혼합 열 레이아웃을 구현하기 위해 사용되는 주요 CSS 기술은 다음과 같습니다.
- float: left — 각 열을 나란히 배치합니다.
- box-sizing: border-box — 패딩을 포함한 너비 계산으로 레이아웃이 깨지는 것을 방지합니다.
- :after 클리어필스(clearfix) — 부모 요소가 float된 자식 요소의 높이를 인식하도록 합니다.
- @media 미디어 쿼리 — 화면 너비에 따라 열 너비를 동적으로 변경합니다.
전체 예제 코드
아래 코드는 4개의 열을 가진 그리드 레이아웃 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.col {
color: white;
float: left;
width: 25%;
padding: 10px;
}
.colContainer:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 900px) {
.col {
width: 50%;
}
}
@media screen and (max-width: 600px) {
.col {
width: 100%;
}
}
</style>
</head>
<body>
<h1>혼합 열 레이아웃 예제</h1>
<h2>화면 크기를 조절하면 아래 div들이 자동으로 재배치됩니다</h2>
<div class="colContainer">
<div class="col" style="background-color:rgb(153, 29, 224);">
<h2>첫 번째 열</h2>
</div>
<div class="col" style="background-color:rgb(12, 126, 120);">
<h2>두 번째 열</h2>
</div>
<div class="col" style="background-color:rgb(207, 41, 91);">
<h2>세 번째 열</h2>
</div>
<div class="col" style="background-color:rgb(204, 91, 39);">
<h2>네 번째 열</h2>
</div>
</div>
</body>
</html>
코드 상세 설명
1. 기본 4열 설정
.col 클래스에 width: 25%를 지정하여 각 열이 전체 너비의 4분의 1을 차지하도록 합니다. float: left로 인해 4개의 열이 한 줄에 나란히 배치됩니다.
2. 태블릿 대응 (900px 이하)
화면 너비가 900px 이하로 줄어들면 미디어 쿼리가 작동하여 열 너비가 50%로 변경됩니다. 결과적으로 4개의 열이 2줄에 걸쳐 2열씩 배치됩니다.
3. 모바일 대응 (600px 이하)
화면 너비가 600px 이하가 되면 열 너비가 100%로 변경되어 모든 열이 세로로 쌓이는 1열 구조로 전환됩니다.
4. clearfix의 역할
.colContainer:after 선택자는 부모 컨테이너가 float된 자식 요소들을 감싸도록 만들어 줍니다. 이 처리가 없으면 컨테이너의 높이가 0이 되어 배경이나 테두리가 제대로 표시되지 않습니다.
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 확인할 수 있습니다.
브라우저 창 크기를 줄이면 4열 레이아웃이 2열로 자동 전환됩니다.
마무리 및 추가 팁
이처럼 float와 미디어 쿼리만으로도 간단하게 반응형 그리드를 만들 수 있습니다. 다만 최신 프로젝트에서는 더 강력하고 직관적인 CSS Grid(display: grid)나 Flexbox를 활용하는 것을 추천합니다. 특히 CSS Grid의 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 패턴을 사용하면 미디어 쿼리 없이도 자동으로 반응하는 그리드를 구현할 수 있어 코드가 훨씬 간결해집니다.