CSS Grid와 Flexbox 혼합 사용

1. 도입 (왜 배워야 하는가)

CSS Grid와 Flexbox는 현대 웹 디자인에서 레이아웃을 구성하는 데 필수적인 도구입니다. 두 기술 모두 각기 다른 상황에서 강력한 장점을 제공하며, 실제 프로젝트에서는 이 두 가지를 혼합하여 사용하는 경우가 많습니다.

예를 들어, 쇼핑몰 웹사이트에서 제품 목록을 보여줄 때, Flexbox를 사용하여 각 제품의 카드가 수평으로 나열되도록 하고, Grid를 사용하여 전체 레이아웃을 구성하는 방식입니다. 이 조합을 이해하지 못하면 복잡한 레이아웃을 구현하기 어려워지며, 결과적으로 사용자 경험이 떨어질 수 있습니다.

2. 핵심 개념 설명

CSS Grid

CSS Grid는 2차원 레이아웃 시스템으로, 행과 열을 기반으로 요소를 배치할 수 있도록 합니다. 마치 건축에서 정해진 틀에 따라 방을 배치하는 것과 같습니다.

Flexbox

Flexbox는 1차원 레이아웃 시스템으로, 주로 한 방향(수평 또는 수직)에서 아이템을 효율적으로 정렬하고 배치하는 데 사용됩니다. 예를 들어, 선반에 책을 정리하는 것처럼 생각할 수 있습니다.

3. 기본 코드 예제

아래는 기본적인 Grid와 Flexbox 혼합 사용 예제입니다.

.container {
    display: grid; / Grid 레이아웃 사용 /
    grid-template-columns: repeat(3, 1fr); / 3개의 열 생성 /
    gap: 10px; / 요소 간 간격 설정 /
}

.item {
    display: flex; / Flexbox 레이아웃 사용 /
    justify-content: center; / 수평 중앙 정렬 /
    align-items: center; / 수직 중앙 정렬 /
    height: 100px; / 높이 설정 /
    background-color: lightblue; / 배경색 설정 /
}

• .container 클래스는 Grid 레이아웃을 사용하여 3개의 열로 구성합니다.
• gap 속성은 각 아이템 사이의 간격을 설정합니다.
• .item 클래스는 각 아이템에 Flexbox 레이아웃을 적용하여 중앙 정렬합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰 제품 목록

쇼핑몰에서 제품 카드를 나열할 때 Grid를 사용하여 전체 레이아웃을 구성하고, Flexbox로 각 카드 내의 내용을 정렬할 수 있습니다.

.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
}

예제 2: 대시보드 레이아웃

대시보드에서 다양한 위젯을 나열할 때 Grid로 전체 영역을 나누고, 각 위젯 내부에서는 Flexbox로 내용을 배치합니다.

.dashboard {
    display: grid;
    grid-template-areas: "header header header" "sidebar content content";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
}

.content {
    grid-area: content;
}

5. 흔한 실수와 주의사항

잘못된 코드

.container {
    display: flex; / Flexbox 사용, Grid 필요 /
}

올바른 코드

.container {
    display: grid; / Grid 사용 /
}

• 설명: Grid 레이아웃이 필요한 경우 Flexbox로 설정하면 레이아웃이 제대로 작동하지 않습니다.

잘못된 코드

.item {
    display: grid; / Flexbox로 변경해야 함 /
}

올바른 코드

.item {
    display: flex; / Flexbox 사용 /
}

• 설명: 개별 아이템에서 Flexbox를 사용해야 하는데 Grid로 설정하면 내부 정렬이 제대로 이루어지지 않습니다.

6. 정리

• CSS Grid는 2차원 레이아웃을, Flexbox는 1차원 레이아웃을 구성하는 데 유용합니다.
• 두 기술을 혼합하여 복잡한 레이아웃을 쉽게 구성할 수 있습니다.
• 실무에서는 상황에 따라 적절한 레이아웃 기법을 선택하는 것이 중요합니다.

다음에 학습하면 좋은 주제는 CSS 애니메이션이나 반응형 디자인입니다. 이 기술들은 보다 동적인 사용자 경험을 제공하는 데 필수적입니다.