CSS 레이아웃의 진화: Float에서 Grid, 그리고 그 너머로

웹사이트를 10년 넘게 만들어오신 분이라면 CSS 레이아웃의 "암흑기"를 기억하실 겁니다.

div를 수직 중앙 정렬하는 것이 면접 단골 질문이던 시절이 있었죠. 우리는 레이아웃을 위해 <table>을 사용했고, float를 남발했으며, clearfix 같은 핵(hack)에 의존해야 했습니다.

오늘날 우리에게는 Flexbox와 Grid라는 강력한 도구가 있습니다. 하지만 우리는 어떻게 여기까지 왔을까요? 그리고 다음은 무엇일까요?

CSS 레이아웃의 진화 과정을 함께 살펴보겠습니다.

1. 테이블 시대 (90년대 후반)

초창기에는 레이아웃 시스템이라는 것이 없었습니다. CSS는 단지 폰트와 색상을 위한 것이었죠.

개발자들은 HTML <table> 요소를 사용하여 페이지 구조를 잡을 수 있다는 것을 발견했습니다.

<table>
  <tr>
    <td width="200">사이드바</td>
    <td>메인 콘텐츠</td>
  </tr>
</table>

문제점:

의미론적으로 올바르지 않습니다 (테이블은 데이터용이지 레이아웃용이 아닙니다).
코드가 매우 장황하고 유지보수가 어렵습니다.
렌더링 성능이 좋지 않았습니다 (브라우저가 닫는 </table> 태그를 기다려야 했습니다).

2. Float 시대와 Clearfix 핵 (2000년대)

그 다음 float가 등장했습니다. 원래는 신문처럼 이미지 주위로 텍스트를 흐르게 하기 위해 설계되었지만, 개발자들은 이를 사용하여 블록 요소를 가로로 배치할 수 있다는 것을 깨달았습니다.

.sidebar {
  float: left;
  width: 30%;
}
.content {
  float: right;
  width: 70%;
}

문제점:
Float된 요소는 일반적인 문서 흐름에서 벗어나기 때문에 부모 컨테이너의 높이가 0이 되는 현상이 발생했습니다. 이로 인해 악명 높은 Clearfix 핵이 탄생했습니다:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

우리는 이 불안정한 핵 위에 전체 그리드 시스템(Bootstrap 2/3 같은)을 구축했습니다.

3. Flexbox 혁명 (2010년대)

**Flexbox (Flexible Box Layout)**는 레이아웃을 위해 특별히 설계된 최초의 CSS 모듈이었습니다.

가장 큰 고통들을 해결해주었죠:

수직 중앙 정렬 (align-items: center).
동일한 높이의 컬럼.
HTML 변경 없는 요소 순서 재배치.

.container {
  display: flex;
  justify-content: center; /* 가로 중앙 */
  align-items: center;     /* 세로 중앙 - 드디어! */
  gap: 1rem;               /* 이제 Flexbox에서도 gap을 쓸 수 있습니다! */
}

Flexbox는 1차원입니다. 한 행 또는 한 열에 아이템을 배치하는 데 탁월합니다.

4. CSS Grid: 2차원의 강자 (2017+)

Flexbox가 1차원 세상을 정복하는 동안, CSS Grid가 2차원 세상을 지배하기 위해 등장했습니다.

Grid를 사용하면 행과 열을 동시에 정의할 수 있습니다.

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 사이드바 고정, 콘텐츠 유연하게 */
  grid-template-rows: auto 1fr auto; /* 헤더, 본문, 푸터 */
  gap: 20px;
}

Grid를 사용하면 프레임워크 없이도 단 몇 줄의 CSS만으로 복잡한 잡지 스타일의 레이아웃을 만들 수 있습니다.

Flexbox vs Grid: 무엇을 써야 할까요?

Flexbox 사용: 컴포넌트 (네비게이션 바, 카드 내부, 폼 그룹).
Grid 사용: 전체 페이지 레이아웃 (헤더, 사이드바, 메인 콘텐츠, 푸터).

5. 미래: Subgrid와 Container Queries

진화는 멈추지 않았습니다.

Subgrid

subgrid는 자식 요소가 부모의 그리드 트랙을 상속받을 수 있게 해줍니다. 이는 서로 다른 카드 내의 중첩된 컴포넌트들을 정렬할 때 게임 체인저가 됩니다.

.card {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid; /* 부모 그리드와 내부를 정렬! */
}

Container Queries (`@container`)

미디어 쿼리(@media)는 뷰포트 크기에 따라 스타일을 지정합니다. 하지만 컴포넌트 기반 디자인은 컨테이너 크기에 따른 스타일이 필요합니다.

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex; /* 컨테이너가 충분히 넓으면 가로 레이아웃으로 전환 */
  }
}

결론

CSS는 먼 길을 왔습니다. 더 이상 기본적인 것을 하기 위해 핵(hack)이 필요하지 않습니다.

역사를 이해하면 우리가 가진 도구의 소중함을 알게 됩니다. 아직도 레이아웃을 위해 float를 사용하고 있다면, 이제 놓아줄 때입니다. Flexbox와 Grid를 받아들이세요. 그것이 현대 웹의 표준입니다.