CSS를 활용하면 간단한 코드만으로 화면을 세 개의 열로 나누는 레이아웃 그리드를 만들 수 있습니다. 이 글에서는 float 속성을 이용한 기본적인 3열 레이아웃 구현 방법을 예제와 함께 자세히 살펴보겠습니다.
핵심 원리
3열 레이아웃의 기본 아이디어는 다음과 같습니다.
- 세 개의
<div>요소(왼쪽, 중앙, 오른쪽)를 생성합니다. - 각 요소에
float: left;를 적용해 나란히 배치합니다. - 각 열의 너비를 약 33%로 지정해 전체 폭을 세 부분으로 균등하게 나눕니다.
- 부모 컨테이너에
clear: both;를 적용해 float로 인한 레이아웃 무너짐을 방지합니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
padding: 1%;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
* {
box-sizing: border-box;
}
.left, .right, .center {
float: left;
width: 33%;
color: white;
padding: 10px;
height: 500px;
text-align: center;
}
.left {
background-color: tomato;
}
.right {
background-color: teal;
}
.center {
background-color: rgb(166, 71, 255);
}
.container:after {
clear: both;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Three Column grid example</h1>
<div class="container">
<div class="left">
<h1>Some text on the left</h1>
</div>
<div class="center">
<h1>Some text in center</h1>
</div>
<div class="right">
<h1>Some text on the right</h1>
</div>
</div>
</body>
</html>코드 설명
위 코드의 주요 부분을 하나씩 살펴보겠습니다.
1. 박스 크기 계산 설정
* { box-sizing: border-box; }를 선언하면 패딩과 테두리가 요소의 너비에 포함되어 계산됩니다. 덕분에 33% 너비를 지정했을 때 패딩 때문에 열이 벗어나는 문제를 예방할 수 있습니다.
2. 열 배치
.left, .center, .right 클래스에 공통으로 float: left;와 width: 33%를 적용하여 세 개의 열이 한 줄에 나란히 정렬되도록 합니다.
3. 컨테이너 정리(Clearfix)
.container:after { clear: both; }는 float된 자식 요소들이 부모 컨테이너의 높이 계산에서 제외되는 현상을 막아주는 역할을 합니다.
실행 결과
위 코드를 실행하면 왼쪽은 토마토색, 중앙은 보라색, 오른쪽은 청록색으로 구성된 세 개의 열이 화면에 나란히 표시됩니다.
참고: 더 현대적인 방법
float 방식은 과거부터 사용되어 온 전통적인 기법이지만, 최신 CSS에서는 더 간편하고 유연한 방법들이 있습니다.
- Flexbox: 부모 요소에
display: flex;를 선언하고 자식 요소에flex: 1;을 주면 별도의 clearfix 없이도 균등한 3열 레이아웃을 쉽게 만들 수 있습니다. - CSS Grid: 부모 요소에
display: grid; grid-template-columns: repeat(3, 1fr);를 선언하면 단 두 줄로 3열 그리드가 완성됩니다. 반응형 레이아웃 작업 시 특히 유용합니다.
레거시 브라우저 호환성이 필요한 경우가 아니라면 Flexbox나 Grid 사용을 권장하지만, float 방식의 동작 원리를 이해해 두면 CSS 레이아웃의 기초를 탄탄히 다지는 데 큰 도움이 됩니다.