CSS를 활용하면 HTML의 div 요소 두 개를 손쉽게 나란히 배치할 수 있습니다. 이 글에서는 가장 많이 사용되는 세 가지 방법을 코드 예제와 함께 자세히 살펴보겠습니다.
- Float(플로트) 방식
- Flexbox(플렉스박스) 방식
- CSS Grid(CSS 그리드) 방식
1. Float 방식
Float 방식에서는 아래와 같은 HTML 마크업을 사용합니다.
<div class="float-container">
<div class="float-child">
<div class="green">Float Column 1</div>
</div>
<div class="float-child">
<div class="blue">Float Column 2</div>
</div>
</div>여기서 .float-container는 두 개의 .float-child 요소를 감싸는 부모 요소입니다.
두 div를 나란히 배치하기 위해 다음과 같은 CSS 규칙을 적용합니다.
.float-container {
border: 3px solid #fff;
padding: 20px;
}
.float-child {
width: 50%;
float: left;
padding: 20px;
border: 2px solid red;
} 위 코드를 실행하면 결과는 다음과 같습니다.
구조를 한눈에 파악하기 쉽도록 div에 테두리와 패딩을 추가했습니다. 바깥쪽 굵은 흰색 테두리가 .float-container div이며, 20px의 패딩을 가지고 있습니다.
그리고 각 .float-child 요소는 더 얇은 빨간색 테두리와 패딩을 가지며, 실제 색상 블록은 이 .float-child의 자식 요소입니다. 그 이유는 잠시 후 설명하겠습니다.
두 div를 나란히 배치하는 핵심은 float 속성입니다. 각 .float-child 요소를 왼쪽으로 띄우면(float), 공간이 충분할 경우 두 요소가 나란히 표시됩니다. 두 div의 너비가 각각 50%이므로 정확히 화면에 들어갈 수 있는 것입니다.
또한 div 사이의 여백은 각 .float-child에 패딩을 추가하고, 그 안에 색상 블록을 넣는 방식으로 만들어집니다.
외부 div로 감싸서 열 사이 여백 만들기
색상 블록에 여백을 추가하면서도 두 블록이 나란히 들어가게 하려면, 반드시 외부 div(.float-child)로 감싸야 합니다.
만약 패딩 없이 .float-child div만 사용하고, 대신 첫 번째 블록에 margin-right 값을 줘서 여백을 만들려고 하면 어떻게 될까요?
HTML:
<div class="float-container">
<div class="float-child green">
Float Column 1
</div>
<div class="float-child blue">
Float Column 2
</div>
</div>
CSS:
.float-child.green {
margin-right: 20px;
}이 경우 두 .float-child 요소는 전체 너비의 50%씩 차지하지만, 첫 번째 초록색 요소에는 추가로 20px의 마진이 붙습니다.
결국 전체 너비는 50% + 20px + 50%가 되어 100%를 초과하게 되고, 두 블록을 나란히 배치할 공간이 부족해집니다.
그 결과 두 번째 파란색 블록은 첫 번째 블록 아래 행으로 내려가서 왼쪽으로 띄워지게 됩니다.
너비를 48% 등 50%보다 작은 값으로 조정해서 맞추는 방법도 있지만, 어디까지나 근사치일 뿐 정확하지 않습니다.
그래서 저는 개인적으로 블록을 너비 50%의 외부 div로 감싸고, 패딩으로 여백을 주는 방식을 선호합니다.
요즘은 float보다 더 새롭고 편리한 CSS 기법으로 div를 나란히 배치할 수 있습니다. 그중 하나인 flexbox 방식을 살펴보겠습니다.
2. Flexbox 방식
Flexbox를 사용하면 훨씬 직관적인 방식으로 두 div를 정렬할 수 있습니다.
HTML:
<div class="flex-container">
<div class="flex-child magenta">
Flex Column 1
</div>
<div class="flex-child green">
Flex Column 2
</div>
</div>
CSS:
.flex-container {
display: flex;
}
.flex-child {
flex: 1;
border: 2px solid yellow;
}
.flex-child:first-child {
margin-right: 20px;
} Flexbox에서는 먼저 부모 요소인 .flex-container에 display: flex를 설정하여 플렉스박스를 활성화합니다.
그다음 각 .flex-child 요소에 flex: 1을 지정합니다. 이 숫자는 부모 플렉스 요소 안에서 각 자식의 너비 비율을 의미합니다.
두 값이 같으므로 남은 공간이 동등하게 나누어지고, 자식 요소가 두 개이므로 각각 50%씩 차지하게 됩니다.
결과는 다음과 같습니다.
마진으로 여백을 추가해도 레이아웃이 유지됩니다!
주목할 점은 첫 번째 .flex-child 요소에만 margin-right: 20px를 추가했다는 것입니다. 하지만 flexbox는 충분히 똑똑해서, 나머지 가용 너비를 나눌 때 이 20px까지 고려해 줍니다.
즉, 픽셀을 일일이 계산하지 않고도 마진으로 여백을 추가할 수 있으며, flexbox가 알아서 콘텐츠 크기를 맞춰 줍니다.
이것이 제가 flexbox를 좋아하는 큰 이유 중 하나입니다.
다만 반응형 그리드처럼 여러 요소를 배치할 때는, 어느 지점에 여백을 추가해야 하는지 항상 알 수 있는 것은 아닙니다.
예를 들어 모바일 화면에서 두 div를 위아래로 쌓으려면, 모바일 너비 구간에서 margin-right 속성을 제거해야 합니다.
혹은 float 방식에서 했던 것처럼 각 .flex-child를 외부 요소로 감싸고 패딩을 추가하는 방법도 있습니다.
100% 직관적이진 않지만 여전히 잘 작동합니다. flexbox로 더 복잡한 반응형 레이아웃을 만들 때는 이 점을 염두에 두어야 합니다.
이제 div를 나란히 배치하는 가장 최신 방법인 CSS Grid를 살펴보겠습니다.
3. CSS Grid 방식
CSS Grid를 사용하면 다음과 같이 두 div를 나란히 배치할 수 있습니다.
HTML:
<div class="grid-container">
<div class="grid-child purple">
Grid Column 1
</div>
<div class="grid-child green">
Grid Column 2
</div>
</div>CSS:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}결과는 다음과 같습니다.
Grid의 가장 큰 변화는 레이아웃 작성 전에 먼저 그리드 템플릿, 즉 몇 개의 열과 행을 사용할지 결정한다는 점입니다.
여기서는 너비가 같은 두 개의 열이 필요합니다. 따라서 부모 요소인 .grid-container에 display: grid로 그리드를 활성화한 뒤, grid-template-columns 속성으로 원하는 열 수를 지정합니다.
너비가 같은 두 개의 열을 원하므로 1fr 1fr로 설정했습니다. 이는 브라우저에게 두 개의 열 레이아웃을 만들고, 각 열이 1fr(fr = 분수 단위)의 공간을 차지하도록 지시하는 것입니다.
fr 단위는 열 간의 비율을 나타내며, flexbox 방식에서 사용한 flex: 1과 비슷한 개념입니다. 열을 1fr 1fr로 설정하면 각 열이 동일한 공간을 차지하게 됩니다.
grid-gap 속성으로 그리드 항목 사이 여백 추가하기
CSS Grid의 큰 장점 중 하나는 그리드 항목 사이에 여백을 만들 때 패딩이나 마진을 사용할 필요가 없다는 점입니다.
grid-gap(최신 브라우저에서는 gap) 속성을 사용하면 그리드 템플릿에 자동으로 여백을 추가할 수 있습니다.
여기서는 grid-gap을 20px로 설정했기 때문에, 브라우저는 항목들이 나란히 배치되든 위아래로 쌓이든 상관없이 모든 항목 사이에 20px의 여백을 추가합니다.
그리고 눈치채셨겠지만, 그리드 관련 CSS 속성은 모두 부모 요소인 .grid-container에 설정했습니다. 자식 요소인 .grid-child에는 단 하나의 CSS도 작성할 필요가 없었던 것입니다.