CSS 웹 레이아웃의 핵심: Flexbox vs CSS Grid (플렉스박스 vs 그리드라인)
페이지 정보
조회 61회
본문
웹 레이아웃의 핵심: Flexbox vs CSS Grid
과거에는 float나 table 속성을 이용해 어렵게 화면을 배치했지만, CSS3에 들어서며 혁신적인 두 가지 레이아웃 시스템이 등장했습니다.
바로 Flexbox와 Grid입니다.
1. 각각의 특징
플렉스는 '줄(Line)' 중심이고, 그리드는 '면(Area)' 중심입니다.
| 구분 | 플렉스박스 (Flexbox) | CSS 그리드 (Grid) |
| 차원 | 1차원 (행 또는 열 중 하나) | 2차원 (행과 열 동시 제어) |
| 핵심 개념 | 콘텐츠 중심 (안에서 밖으로) | 레이아웃 중심 (밖에서 안으로) |
| 비유 | 기차 놀이 (순서대로 나열) | 바둑판 배치 (정해진 칸에 넣기) |
| 주 용도 | 메뉴 바, 내비게이션, 작은 요소의 정렬 | 웹페이지의 전체 틀, 신문/잡지 레이아웃 |
2. 플렉스박스 (Flexbox) 핵심: "유연한 한 줄 정렬"
플렉스는 요소를 가로 또는 세로 중 한 방향으로 나열하고 정렬하는 데 특화되어 있습니다.
방향 제어: 주축(Main Axis)과 교차축(Cross Axis)을 기준으로 요소를 배치합니다.
유연한 크기: 부모 컨테이너의 크기에 맞춰 자식 요소들이 유연하게 늘어나거나 줄어듭니다.
주요 활용: 상단 메뉴바의 항목 나열, 카드 내부의 아이콘과 텍스트 정렬 등.
3. CSS 그리드 (Grid) 핵심: "정교한 공간 설계"
그리드는 가로(행)와 세로(열)를 동시에 사용하여 전체적인 틀을 만드는 2차원 시스템입니다.
① 유연한 수치 제어
fr(fraction) 단위: 유연한 비율을 의미합니다. (예:
2fr 1fr은 2:1 비율로 공간 배분)repeat() 함수: 반복되는 크기를 간편하게 작성합니다. (예:
repeat(3, 1fr)은 1fr을 3번 반복)minmax() 함수: 행의 높이를 최솟값과 최댓값으로 지정하여 내용이 많아져도 가려지지 않게 합니다.
② 그리드 라인 배치 속성
아이템을 특정 위치에 배치할 때는 칸을 나누는 '경계선(Line)' 번호를 사용합니다.
| 속성 | 설명 | 예시 |
| grid-column | 열의 시작과 끝 번호를 슬래시(/)로 구분하여 지정합니다. | grid-column: 1 / 4; |
| grid-row | 행의 시작과 끝 번호를 슬래시(/)로 구분하여 지정합니다. | grid-row: 2 / 4; |
4. 핵심 요약: 무엇을 선택할까?
Grid로 집의 전체적인 구조(방 배치)를 먼저 잡으세요.
Flexbox로 각 구역 안의 가구(세부 요소)들을 정렬하세요.
결론: 두 기술은 경쟁 관계가 아니며, 큰 틀은 Grid, 세부 정렬은 Flexbox를 혼합하여 사용하는 것이 가장 효율적입니다.
"레이아웃은 곧 그리드 설계다"
Grid: 집의 튼튼한 뼈대와 방 배치(레이아웃/왁구)를 만드는 도구
Flexbox: 방 안에 가구와 소품을 예쁘게 정렬하는 도구
쇼핑몰로 보는 실무 적용 예시
1. 그리드(Grid)로 '큰 왁구' 잡기 (Layout-first)
먼저 쇼핑몰의 전체적인 구역(틀)을 설계합니다.
헤더: 로고와 검색창이 들어갈 상단 영역.
사이드바: 카테고리 메뉴가 위치할 왼쪽 영역.
메인 영역: 상품들이 진열될 중앙의 넓은 구역.
푸터: 하단 정보 영역.
작업 포인트:
grid-template-columns로 단을 나누고,grid-template-areas등으로 큰 방들을 먼저 만듭니다.
2. 플렉스(Flexbox)로 '상품 진열'하기 (Content-first)
그리드로 만든 '메인 영역' 안에 개별 상품들을 예쁘게 정렬합니다.
상품 카드: 이미지, 상품명, 가격을 한 줄로 정렬하거나 수직으로 쌓을 때 사용합니다.
상태 표시: 상품 이미지 위에 'SALE'이나 'BEST' 배지를 특정 위치에 띄울 때 유용합니다.
간격 조절: 상품들 사이의 간격을 균등하게 배분하거나(Justify-content), 좌우 정렬을 맞출 때 사용합니다.
작업 포인트: 상품의 개수가 유동적이어도 한 줄에 몇 개씩 자연스럽게 흐르도록(Flex-wrap) 정렬합니다.
3. Layer(Position)를 써서 상품 이미지 오른쪽 상단에 '무료배송' 아이콘을 띄워서 겹칩니다.
- 이전글CSS Grid: 라인(Line)과 영역(Area) 배치 가이드 26.02.27
- 다음글CSS 그리드 라인 (Grid Line) 기초설명 26.02.27