📌Flexbox 란?
공식적으로는 Flexible Box Layout이라고 불리며, 주로 1차원 레이아웃을 위해 설계되었습니다.
즉, 행이나 열 한 방향으로의 요소 배치에 최적화되어 있습니다.
1️⃣ 장점
- 유연성: 요소들이 컨테이너 공간에 맞게 유연하게 확장 또는 축소됩니다.
- 간단한 중앙 정렬: 수평 및 수직 정렬이 매우 간단하게 구현됩니다.
- 반응형 디자인 용이: 다양한 화면 크기에 따라 요소를 쉽게 조정할 수 있어 반응형 웹 디자인에 적합합니다.
2️⃣ 사용사례
- 항목들을 일렬로 나열할 때 (예: 메뉴 바, 항목 리스트)
- 요소를 수직 또는 수평 중앙에 배치할 때
- 동적으로 크기가 변하는 컨테이너 내 요소 배치
📌Grid 란?
Grid Layout은 2차원 레이아웃을 위해 설계되었습니다.
행과 열을 동시에 제어할 수 있어 복잡한 레이아웃을 구현하는 데 매우 강력합니다.
1️⃣ 장점
- 2차원 레이아웃: 행과 열을 기반으로 복잡한 레이아웃을 쉽게 구성할 수 있습니다.
- 레이아웃 정밀 제어: 그리드 선, 영역, 간격 등을 통해 요소의 정확한 배치를 제어할 수 있습니다.
- 복잡한 레이아웃 구현: 다양한 크기와 배치를 가진 요소들을 포함하는 복잡한 구조도 구현 가능합니다.
2️⃣ 사용 사례
- 복잡한 페이지 레이아웃 (예: 신문 레이아웃, 매거진 레이아웃)
- 격자 형태의 UI 구성 (예: 이미지 갤러리, 카드 레이아웃)
- 정밀한 위치 조정이 필요한 인터페이스 요소 배치
💡 Flexbox vs Grid: 언제 어떤 것을 사용해야 할까?
Flexbox 사용: 요소를 한 방향(수평 또는 수직)으로 배치하려는 경우, 또는 간단한 레이아웃에서 요소들 사이의 공간을 동적으로 조절하고 싶을 때 적합합니다.
Grid 사용: 더 복잡하고 다차원적인 레이아웃을 구현하고 싶거나, 행과 열을 모두 제어해야 할 때 유리합니다. 또한, 디자인이 그리드 기반으로 명확하게 정의되어 있을 때 선택하는 것이 좋습니다.
