CSS로 동일한 높이의 열(컬럼) 만드는 방법 완벽 가이드

웹 페이지 레이아웃을 만들다 보면 여러 개의 열(column)이 내용의 길이와 상관없이 항상 같은 높이를 유지하도록 만들어야 하는 경우가 자주 있습니다. CSS에서는 display: table 속성을 활용하면 간단하게 이를 구현할 수 있습니다.

CSS로 동일한 높이의 열 만들기

핵심 원리는 다음과 같습니다.

부모 컨테이너에 display: table을 적용합니다.
각 열에 display: table-cell을 적용합니다.

테이블 셀은 기본적으로 같은 행 안에서 서로 높이가 맞춰지는 특성이 있기 때문에, 별도의 JavaScript 없이도 순수 CSS만으로 동일한 높이의 열을 만들 수 있습니다.

예제 코드

<!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;
    }
    .container {
        display: table;
        width: 100%;
    }
    .column {
        display: table-cell;
        padding: 16px;
        background-color: greenyellow;
    }
    .column:nth-of-type(2n-1) {
        color: red;
        background-color: yellow;
    }
</style>
</head>
<body>
<h1>Equal Height Columns Example</h1>
<div class="container">
<div class="column">
<h2>Column 1</h2>
<h2>Column 1</h2>
<h2>Column 1</h2>
</div>
<div class="column">
<h2>Column 2</h2>
<h2>Column 2</h2>
<h2>Column 2</h2>
</div>
<div class="column">
<h2>Column 3</h2>
<h2>Column 3</h2>
<h2>Column 3</h2>
</div>
</div>
</body>
</html>

코드 설명

.container: display: table과 width: 100%를 설정해 전체 너비를 차지하는 테이블 형태의 컨테이너 역할을 합니다.
.column: display: table-cell을 적용해 테이블 셀처럼 동작하게 하며, padding: 16px로 내부 여백을 주고 배경색을 지정합니다.
.column:nth-of-type(2n-1): 홀수 번째 열에만 빨간색 글자와 노란색 배경을 적용해 시각적으로 구분되도록 합니다.

실행 결과

위 코드를 실행하면 세 개의 열이 각각의 내용 길이와 관계없이 모두 같은 높이로 정렬되어 표시됩니다.

CSS로 동일한 높이의 열(컬럼) 만드는 방법 완벽 가이드

참고: Flexbox를 활용한 대안

최신 브라우저 환경에서는 display: table 대신 Flexbox를 사용하는 방법도 널리 권장됩니다. 부모 요소에 display: flex를 적용하기만 해도 자식 열들이 자동으로 늘어나 같은 높이를 유지합니다.

.container {
    display: flex;
}
.column {
    flex: 1;
}

Flexbox 방식은 반응형 레이아웃 구성이 더 유연하고 코드도 간결하므로, 별도의 브라우저 호환성 이슈가 없다면 Flexbox 사용을 추천합니다.