CSS 고급 자료구조

CSS 그리드 및 플렉스박스의 결합

CSS 그리드 및 플렉스박스의 결합 — 고급

그리드 및 플렉스박스의 결합

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

웹 디자인에서 그리드와 플렉스박스는 각각 독립적인 레이아웃 시스템으로, 다양한 화면 크기와 해상도에 맞춰 유연하게 디자인할 수 있는 기능을 제공합니다. 이 두 시스템을 결합하면 더욱 복잡하고 매력적인 레이아웃을 구성할 수 있습니다. 실무에서는 다양한 기기와 화면 크기를 지원해야 하므로, 이 두 가지 방식의 조합을 잘 이해하고 활용하는 것이 필수적입니다.

만약 이 두 가지 레이아웃 시스템을 모른다면, 반응형 웹 디자인을 구현하는 데 많은 어려움을 겪을 것이며, 웹사이트의 사용성 및 접근성이 저하될 수 있습니다. 결국 고객의 이탈로 이어질 수 있습니다.

2. 핵심 개념 설명

그리드(Grid)

그리드는 행과 열을 사용하여 요소들을 정렬하는 레이아웃 시스템입니다. 마치 건축 설계도처럼, 요소들을 정해진 칸에 배치하여 일관된 구조를 만듭니다.

플렉스박스(Flexbox)

플렉스박스는 요소를 한 줄 또는 한 열에 배치할 수 있는 시스템으로, 공간을 효율적으로 사용할 수 있게 설계되었습니다. 이는 마치 공원에서 사람들을 배치하는 것과 같아, 각 요소가 자율적으로 공간을 차지하도록 조정할 수 있습니다.

용어	설명
그리드	행과 열로 요소를 정렬하여 레이아웃을 구성하는 시스템
플렉스박스	요소를 유연하게 배치하여 공간을 최적화하는 시스템

3. 기본 코드 예제

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

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

실행 결과: 3개의 열로 구성된 박스들이 수평 및 수직 중앙에 정렬됨
코드 설명:

- .container: 그리드 레이아웃을 설정하고 3개의 동일한 너비의 열을 생성합니다. - gap: 요소 간의 간격을 10px로 설정합니다. - .item: 각 아이템에 플렉스박스를 적용하여 콘텐츠를 중앙에 위치시킵니다. - background-color: 각 아이템의 배경색을 연한 파란색으로 설정합니다. - height: 아이템의 높이를 100px로 설정합니다.

4. 실전 활용 예제

쇼핑몰에서 장바구니를 구현할 때

.cart-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.cart-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
}

상황 설명: 사용자는 장바구니에서 여러 상품을 볼 수 있어야 하며, 각 상품은 세부 정보를 수직으로 정렬해야 합니다.

대시보드 레이아웃 구성

.dashboard {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 200px 1fr;
}

.sidebar {
    grid-row: 1 / span 2; / 사이드바가 두 개의 행을 차지 /
    background-color: #fff;
}

.content {
    display: flex;
    flex-wrap: wrap; / 아이템이 줄을 넘어가면 다음 줄로 이동 /
}

상황 설명: 대시보드에서 사이드바와 콘텐츠 영역을 나누고, 콘텐츠는 플렉스박스를 사용하여 여러 아이템을 유연하게 배치합니다.

5. 흔한 실수와 주의사항

실수 1: 그리드와 플렉스박스 혼합 사용 시 부모 요소 설정

잘못된 코드:

.item {
    display: grid; / 플렉스박스가 아닌 그리드로 설정 /
    justify-items: center; / 작동하지 않음 /
}

올바른 코드:

.item {
    display: flex; / 올바르게 플렉스박스로 설정 /
    justify-content: center; / 수평 중앙 정렬 /
}

실수 2: 그리드에서 gap 속성 미사용

잘못된 코드:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    / gap 속성 누락 /
}

올바른 코드:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; / 요소 간의 간격 추가 /
}

6. 정리

그리드와 플렉스박스는 각각 독립적인 레이아웃 시스템으로, 조합하여 사용하면 강력한 레이아웃을 생성할 수 있습니다.
그리드는 행과 열 기반의 레이아웃을 제공하고, 플렉스박스는 요소 간의 공간 분배를 유연하게 합니다.
실전에서는 쇼핑몰의 장바구니나 대시보드 같은 복잡한 레이아웃을 만들 때 유용하게 활용됩니다.
부모 요소에 적절한 display 속성을 설정하는 것이 중요합니다.
다음에는 CSS 애니메이션이나 트랜지션을 학습하여 레이아웃에 생동감을 추가해보는 것을 추천합니다.

학습