나란히 배치된 두 개의 <div> 요소의 높이를 항상 동일하게 유지하면, 한쪽에 콘텐츠가 더 추가되더라도 양쪽 컬럼이 자동으로 같은 높이에 맞춰집니다. 이렇게 하면 컬럼 높이가 들쭉날쭉하지 않은 일관성 있고 전문적인 레이아웃을 만들 수 있습니다.
컬럼 높이를 동일하게 만드는 방법은 여러 가지가 있습니다. 가장 효과적인 대표적인 기법들을 하나씩 살펴보겠습니다.
- CSS 테이블 디스플레이 —
display: table-cell을 활용한 자동 높이 매칭 - CSS Flexbox —
display: flex를 사용하는 모던한 접근 방식 - CSS Grid — 그리드 레이아웃으로 구현하는 동일 높이 컬럼
- JavaScript — 프로그래밍 방식으로 높이를 계산하여 맞추는 방법
문제 상황부터 간단히 확인해 보겠습니다. 왼쪽 Div에는 내용이 많고 오른쪽 Div에는 내용이 적으면, 아무 처리도 하지 않은 상태에서는 두 컬럼의 높이가 서로 달라집니다. 반면 아래에서 소개할 기법을 적용하면 콘텐츠 양과 관계없이 두 컬럼의 높이가 자동으로 일치합니다.
CSS 테이블 디스플레이(display: table-cell) 사용하기
display: table-cell 속성을 사용하면 같은 테이블 행에 있는 요소들의 높이가 자동으로 동일해집니다. 오래된 브라우저까지 폭넓게 지원하는, 가장 안정적인 크로스브라우저 방법 중 하나입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>동일 높이 Div - 테이블 방식</title>
<style>
.container {
display: table;
width: 100%;
border-spacing: 10px;
}
.box1, .box2 {
display: table-cell;
padding: 20px;
vertical-align: top;
}
.box1 {
background: #e74c3c;
color: white;
width: 50%;
}
.box2 {
background: #f39c12;
color: white;
width: 50%;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>테이블 디스플레이로 만드는 동일 높이 컬럼</h2>
<div class="container">
<div class="box1">
<h3>컬럼 1</h3>
<p>두 컬럼이 자동으로 같은 높이에 맞춰지는 것을
보여주기 위해 이 컬럼에는 더 많은 내용을 넣었습니다.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
</div>
<div class="box2">
<h3>컬럼 2</h3>
<p>내용이 적지만 첫 번째 컬럼과 높이가 동일하게 유지됩니다.</p>
</div>
</div>
</body>
</html>
실행 결과를 보면 콘텐츠 분량이 다름에도 불구하고 두 컬럼의 높이가 동일하게 출력됩니다. 테이블 셀은 행 단위로 높이를 공유하기 때문입니다.
테이블 디스플레이로 만드는 동일 높이 컬럼 컬럼 1 컬럼 2 두 컬럼이 자동으로 같은 내용이 적지만 첫 번째 높이에 맞춰지는 것을 컬럼과 높이가 동일하게 보여주기 위해 더 많은 유지됩니다. 내용을 넣었습니다. Lorem ipsum dolor sit amet... (두 컬럼 모두 동일한 높이)
CSS Flexbox 사용하기
Flexbox는 동일 높이 컬럼을 만드는 가장 현대적인 방법입니다. 기본값인 align-items: stretch 덕분에 별도 설정 없이도 모든 플렉스 아이템의 높이가 가장 큰 아이템에 맞춰 늘어납니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>동일 높이 Div - Flexbox 방식</title>
<style>
.flex-container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.flex-box {
flex: 1;
padding: 20px;
color: white;
}
.flex-box1 { background: #3498db; }
.flex-box2 { background: #2ecc71; }
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>Flexbox로 만드는 동일 높이 컬럼</h2>
<div class="flex-container">
<div class="flex-box flex-box1">
<h3>플렉스 컬럼 1</h3>
<p>Flexbox는 두 컬럼을 자동으로 늘려
가장 높은 컬럼에 맞춥니다.</p>
<p>테이블 디스플레이보다 현대적이고 유연합니다.</p>
<p>반응형 디자인에도 손쉽게 대응할 수 있습니다.</p>
<p>컬럼을 더 길게 만들기 위한 추가 내용입니다.</p>
</div>
<div class="flex-box flex-box2">
<h3>플렉스 컬럼 2</h3>
<p>이 컬럼은 컬럼 1의 높이에 자동으로 맞춰집니다.</p>
</div>
</div>
</body>
</html>
Flexbox 방식은 반응형 웹에서도 잘 동작하는 동일 높이 컬럼을 만들어 줍니다. 미디어 쿼리와 함께 사용하면 화면 폭이 좁아질 때 flex-direction: column으로 전환해 세로 배치도 간단히 구현할 수 있습니다.
Flexbox로 만드는 동일 높이 컬럼 플렉스 컬럼 1 플렉스 컬럼 2 Flexbox는 두 컬럼을 이 컬럼은 컬럼 1의 자동으로 늘려 가장 높이에 자동으로 높은 컬럼에 맞춥니다. 맞춰집니다. 테이블 디스플레이보다 현대적이고 유연합니다. (두 컬럼이 같은 높이로 늘어남)
CSS Grid 사용하기
CSS Grid 역시 모던한 해결책 중 하나입니다. grid-template-columns와 fr(fraction) 단위를 조합하면, 같은 행(row)에 있는 그리드 아이템들이 자동으로 가장 높은 아이템의 높이에 맞춰집니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>동일 높이 Div - Grid 방식</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}
.grid-box {
padding: 20px;
color: white;
}
.grid-box1 { background: #9b59b6; }
.grid-box2 { background: #e67e22; }
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>CSS Grid로 만드는 동일 높이 컬럼</h2>
<div class="grid-container">
<div class="grid-box grid-box1">
<h3>그리드 컬럼 1</h3>
<p>CSS Grid는 fr 단위를 사용하면
기본적으로 동일 높이 컬럼을 만듭니다.</p>
<p>레이아웃을 정교하게 제어할 수 있습니다.</p>
<p>여러 행과 열이 섞인 복잡한 레이아웃에 적합합니다.</p>
</div>
<div class="grid-box grid-box2">
<h3>그리드 컬럼 2</h3>
<p>같은 행에서 가장 높은 그리드 아이템의
높이에 자동으로 맞춰집니다.</p>
</div>
</div>
</body>
</html>
Grid는 2차원 레이아웃을 다루기 때문에, 단순한 두 컬럼 정렬을 넘어 카드 목록처럼 여러 행·열이 얽힌 UI에서도 각 행의 높이를 일관되게 유지할 때 특히 강력합니다.
JavaScript(jQuery) 사용하기
JavaScript를 사용하면 페이지 로드 이후 콘텐츠가 동적으로 변경되는 상황에서도 높이를 맞출 수 있습니다. 아래 예제는 jQuery로 각 박스의 높이를 읽어와 가장 큰 값을 계산한 뒤, 모든 박스에 그 높이를 일괄 적용하는 방식입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>동일 높이 Div - JavaScript 방식</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.js-container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.js-box {
flex: 1;
padding: 20px;
color: white;
}
.js-box1 { background: #34495e; }
.js-box2 { background: #16a085; }
</style>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px;">
<h2>JavaScript로 높이 맞추기</h2>
<div class="js-container">
<div class="js-box js-box1" id="box1">
<h3>JavaScript 컬럼 1</h3>
<p>스크립트가 높이를 계산해 자동으로 맞춰줍니다.</p>
<p>페이지 로드 후 콘텐츠가 동적으로 추가되는 경우에 유용합니다.</p>
<p>가장 높은 요소를 찾아 그 높이를 나머지에 적용합니다.</p>
</div>
<div class="js-box js-box2" id="box2">
<h3>JavaScript 컬럼 2</h3>
<p>높이는 JavaScript가 컬럼 1에 맞춰 설정합니다.</p>
</div>
</div>
<button onclick="addContent()"
style="padding: 10px; margin: 10px;">
컬럼 2에 내용 추가
</button>
<script>
function equalizeHeights() {
var box1Height = $('#box1').height();
var box2Height = $('#box2').height();
var maxHeight = Math.max(box1Height, box2Height);
$('#box1, #box2').height(maxHeight);
}
function addContent() {
$('#box2').append('<p>새로 추가된 문단입니다. 높이가 다시 계산됩니다.</p>');
equalizeHeights();
}
$(function () {
equalizeHeights();
// 창 크기 변경 시에도 높이 재계산
$(window).on('resize', function () {
$('#box1, #box2').height('auto');
equalizeHeights();
});
});
</script>
</body>
</html>
버튼을 클릭해 컬럼 2에 새 문단을 추가하면, equalizeHeights() 함수가 즉시 실행되어 두 박스의 최대 높이를 다시 계산하고 양쪽 모두에 적용합니다. 이 방식은 AJAX로 콘텐츠를 불러오거나 사용자 입력에 따라 DOM이 변하는 페이지에서 특히 유용합니다.
정리 — 어떤 방법을 선택해야 할까?
- 구형 브라우저 지원이 필요하다면 →
display: table-cell방식 - 대부분의 일반적인 경우 → Flexbox (
align-items: stretch기본값 활용) - 행·열이 섞인 복잡한 레이아웃 → CSS Grid
- 동적으로 DOM이 변경되는 페이지 → JavaScript(jQuery) 방식
요즘은 Flexbox나 Grid만으로 대부분의 동일 높이 컬럼 요구 사항을 충족할 수 있습니다. 다만 프로젝트 환경과 브라우저 지원 범위에 따라 가장 적합한 방법을 선택하는 것이 좋습니다.