• 목록

웹 레이아웃의 핵심: Flexbox vs CSS Grid

과거에는 float나 table 속성을 이용해 어렵게 화면을 배치했지만, CSS3에 들어서며 혁신적인 두 가지 레이아웃 시스템이 등장했습니다. 

바로 Flexbox와 Grid입니다. 

1. 각각의 특징

플렉스는 '줄(Line)' 중심이고, 그리드는 '면(Area)' 중심입니다.

2. 플렉스박스 (Flexbox) 핵심: "유연한 한 줄 정렬"

플렉스는 요소를 가로 또는 세로 중 한 방향으로 나열하고 정렬하는 데 특화되어 있습니다.

• 방향 제어: 주축(Main Axis)과 교차축(Cross Axis)을 기준으로 요소를 배치합니다.

• 유연한 크기: 부모 컨테이너의 크기에 맞춰 자식 요소들이 유연하게 늘어나거나 줄어듭니다.

• 주요 활용: 상단 메뉴바의 항목 나열, 카드 내부의 아이콘과 텍스트 정렬 등.

3. CSS 그리드 (Grid) 핵심: "정교한 공간 설계"

그리드는 가로(행)와 세로(열)를 동시에 사용하여 전체적인 틀을 만드는 2차원 시스템입니다.

① 유연한 수치 제어

• fr(fraction) 단위: 유연한 비율을 의미합니다. (예: 2fr 1fr은 2:1 비율로 공간 배분)

• repeat() 함수: 반복되는 크기를 간편하게 작성합니다. (예: repeat(3, 1fr)은 1fr을 3번 반복)

• minmax() 함수: 행의 높이를 최솟값과 최댓값으로 지정하여 내용이 많아져도 가려지지 않게 합니다.

② 그리드 라인 배치 속성

아이템을 특정 위치에 배치할 때는 칸을 나누는 '경계선(Line)' 번호를 사용합니다.

4. 핵심 요약: 무엇을 선택할까?

1. Grid로 집의 전체적인 구조(방 배치)를 먼저 잡으세요.

2. Flexbox로 각 구역 안의 가구(세부 요소)들을 정렬하세요.

결론: 두 기술은 경쟁 관계가 아니며, 큰 틀은 Grid, 세부 정렬은 Flexbox를 혼합하여 사용하는 것이 가장 효율적입니다.

"레이아웃은 곧 그리드 설계다"

• Grid: 집의 튼튼한 뼈대와 방 배치(레이아웃/왁구)를 만드는 도구

• Flexbox: 방 안에 가구와 소품을 예쁘게 정렬하는 도구

• 목록