CSS에서 레이아웃을 구성할 때 주로 사용하는 두 가지 기법은 Flexbox와 Grid입니다. 이들은 각각 고유한 특성과 장점을 가지고 있으며, 상황에 따라 적절히 선택하여 사용해야 합니다.

Flexbox의 활용 예시

Flexbox는 주로 한 방향(수평 또는 수직)으로 요소들을 배치할 때 유용합니다.

네비게이션 바 구성

웹사이트의 상단에 위치하는 메뉴를 Flexbox로 구현하면 간단하게 정렬할 수 있습니다.

<div class="navbar">
  <span class="menu-item">홈</span>
  <span class="menu-item">소식</span>
  <span class="menu-item">제품</span>
  <span class="menu-item">문의</span>
</div>

<style>
.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}
.menu-item {
  cursor: pointer;
}
</style>

동일한 레이아웃을 Grid로 표현하려면 다음과 같이 작성할 수 있습니다:

<div class="navbar-grid">
  <span class="menu">홈</span>
  <span class="menu">소식</span>
  <span class="menu">제품</span>
  <span class="menu">문의</span>
</div>

<style>
.navbar-grid {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
}
</style>

제목과 링크가 있는 섹션 헤더

콘텐츠 영역의 제목과 '더보기' 링크를 양쪽 끝에 배치할 때도 Flexbox가 효과적입니다.

<header class="section-header">
  <h2>최신 소식</h2>
  <a href="#">더보기</a>
</header>

<style>
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style>

Grid를 사용하면 아래와 같습니다:

<header class="section-header-grid">
  <h2>최신 소식</h2>
  <a href="#">더보기</a>
</header>

<style>
.section-header-grid {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  align-items: center;
}
</style>

Grid의 활용 예시

Grid는 복잡한 2차원 레이아웃을 구성할 때 강력한 도구입니다.

전체 페이지 레이아웃

관리자 대시보드와 같은 복합적인 레이아웃은 Grid를 통해 직관적으로 구성할 수 있습니다.

<div class="dashboard">
  <header class="top-bar">상단 바</header>
  <nav class="side-menu">사이드바</nav>
  <main class="content">메인 콘텐츠</main>
  <footer class="bottom-bar">하단 바</footer>
</div>

<style>
.dashboard {
  display: grid;
  grid-template-areas: 
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 60px;
  height: 100vh;
}

.top-bar { grid-area: header; background: #e0e0e0; }
.side-menu { grid-area: sidebar; background: #f0f0f0; }
.content { grid-area: main; background: #fafafa; }
.bottom-bar { grid-area: footer; background: #e0e0e0; }
</style>

이와 동일한 레이아웃을 Flexbox로 구현하려면 중첩된 컨테이너가 필요하며 코드가 더 복잡해집니다:

<div class="dashboard-flex">
  <aside class="left-panel">
    <nav>사이드바</nav>
  </aside>
  <div class="right-section">
    <header>상단 바</header>
    <main>메인 콘텐츠</main>
    <footer>하단 바</footer>
  </div>
</div>

<style>
.dashboard-flex {
  display: flex;
  height: 100vh;
}

.left-panel {
  flex: 0 0 200px;
  background: #f0f0f0;
}

.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-section > header {
  flex: 0 0 60px;
  background: #e0e0e0;
}

.right-section > main {
  flex: 1;
  background: #fafafa;
}

.right-section > footer {
  flex: 0 0 60px;
  background: #e0e0e0;
}
</style>

카드형 목록

여러 개의 카드를 격자 형태로 배치할 때 Grid는 매우 효율적입니다.

<div class="card-container">
  <div class="card">카드 1</div>
  <div class="card">카드 2</div>
  <div class="card">카드 3</div>
  <div class="card">카드 4</div>
</div>

<style>
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  text-align: center;
}
</style>

Flexbox로 동일한 레이아웃을 만들려면 너비 계산이 필요하며 반응성이 떨어질 수 있습니다:

<div class="card-list">
  <div class="card-item">카드 1</div>
  <div class="card-item">카드 2</div>
  <div class="card-item">카드 3</div>
  <div class="card-item">카드 4</div>
</div>

<style>
.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.card-item {
  flex: 1 1 calc(25% - 20px);
  min-width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 20px;
  text-align: center;
}
</style>

결론

Flexbox는 단일 축을 중심으로 요소들을 유연하게 배열하는 데 최적화되어 있으며, Grid는 전체적인 레이아웃 구조를 명확하게 설계하고 싶을 때 적합합니다. 프로젝트 요구사항과 지원해야 하는 브라우저 버전에 따라 적절한 방법을 선택하는 것이 중요합니다.