[CSS] Flexbox와 Grid 레이아웃

Flexbox와 Grid 레이아웃은 CSS3에서 도입된 레이아웃 기술로, 웹 페이지의 요소들을 간편하고 유연하게 배치할 수 있도록 해주는 기능입니다. 각각의 특징과 사용 방법에 대해 설명하겠습니다.

---

1. Flexbox 레이아웃

Flexbox(Flexible Box)는 1차원 레이아웃을 지원하는 기술로, 요소들을 행 또는 열로 정렬하여 배치합니다. 주로 수평 또는 수직 중 하나의 방향으로만 정렬하는 데 사용됩니다. Flexbox를 사용하면 요소들의 크기, 간격, 정렬 등을 유연하게 조절할 수 있습니다.

주요 속성

• display: flex: Flex 컨테이너를 생성합니다.
• flex-direction: Flex 아이템들의 배치 방향을 설정합니다 (row, row-reverse, column, column-reverse).
• justify-content: Flex 아이템들의 주 축(main axis) 정렬 방식을 설정합니다.
• align-items: Flex 아이템들의 교차 축(cross axis) 정렬 방식을 설정합니다.
• flex: Flex 아이템의 크기 비율을 설정합니다.

/* Flexbox 예제 */
.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.item {
    flex: 1;
}

---

2. Grid 레이아웃

Grid 레이아웃은 2차원 레이아웃을 지원하는 기술로, 요소들을 행과 열로 구성된 그리드 형태로 배치합니다. Flexbox와 달리 행과 열 모두에 대한 정렬과 배치를 다양하게 설정할 수 있습니다.

주요 속성

• display: grid: Grid 컨테이너를 생성합니다.
• grid-template-columns: 그리드의 열 크기를 설정합니다.
• grid-template-rows: 그리드의 행 크기를 설정합니다.
• grid-gap: 그리드 셀 사이의 간격을 설정합니다.

/* Grid 레이아웃 예제 */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

---

3. Flexbox와 Grid 레이아웃의 차이점

Flexbox와 Grid 레이아웃은 각각 다른 목적과 사용 사례를 가지고 있습니다.

• Flexbox: 1차원 레이아웃으로, 요소들을 행 또는 열로 배치합니다. 주로 플렉서블한 인터페이스 또는 아이템들을 가로/세로로 정렬하는데 사용됩니다.
• Grid: 2차원 레이아웃으로, 요소들을 행과 열로 배치합니다. 주로 복잡한 레이아웃을 구성하는데 사용되며, 그리드 형태로 요소들을 배치하고 정렬할 수 있습니다.

또한, 두 기술은 함께 사용할 수도 있습니다. Grid 컨테이너 내에서 Flexbox를 사용하여 그리드의 행 또는 열 내에서 요소들을 유연하게 배치할 수 있습니다.

/* Grid 내에서 Flexbox 사용 예제 */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
}

---

Flexbox와 Grid 레이아웃은 CSS3에서 도입된 강력한 레이아웃 기술로, 웹 페이지의 요소들을 유연하고 효과적으로 배치하는데 사용됩니다. Flexbox는 주로 1차원 레이아웃에서 요소들을 효율적으로 배치하는데 유용하며, Grid는 복잡한 2차원 레이아웃을 쉽게 구성하는데 활용됩니다. 디자인과 레이아웃에 따라 적절한 기술을 선택하여 웹 페이지를 개발하시기 바랍니다. 유연한 Flexbox와 강력한 Grid 레이아웃을 이용하여 멋진 웹 페이지를 만들어보세요!