# 속성을 암기하지 않고 동작을 보며 CSS 레이아웃 구축
CSS Grid와 Flexbox는 고정 좌표 대신 레이아웃 관계를 설명하기 때문에 강력합니다. 어려운 점은 gap, justify-content, align-items, 방향, 줄바꿈, 트랙 및 사용 가능한 공간이 어떻게 상호작용하는지 예측하는 것입니다. 이 생성기는 추상적인 속성을 프리셋과 실시간 CSS가 있는 살아있는 놀이터로 변환합니다. 5 빠른 시작 프리셋
실시간 변경 시 CSS 업데이트
0 CSS의 프레임워크 의존성
# Flexbox vs Grid: 정렬을 다듬기 전에 모델 선택
Flexbox
아이템이 행이나 열에 정렬되고 자연스럽게 줄바꿈되는 1차원 흐름에 가장 적합.
- 내비게이션 바
- 버튼 그룹
- 줄바꿈 카드
- 중앙 정렬 콘텐츠
CSS Grid
행과 열이 컴포지션의 형태를 정의하는 2차원 구조에 가장 적합.
- 대시보드
- 갤러리
- 폼
- 편집 섹션
# 각 컨트롤이 가르치는 것
| 컨트롤 | CSS 속성 | 주목할 점 |
|---|---|---|
| 방향 | flex-direction | 주축이 어떻게 흐르는지 - 행에서 열로 전환하면 전체 레이아웃 로직이 변경됩니다. |
| 줄바꿈 | flex-wrap | 아이템이 한 줄에 머무는지 공간이 부족하면 새 줄로 넘어가는지. |
| 간격 | gap | 가장자리에서 깨지지 않는 아이템 간 공간. |
| 정렬 | justify-content | 빈 공간이 주축을 따라 어떻게 분배되는지. |
| 정렬 | align-items | 아이템이 교차축에서 어떻게 배치되는지. |
| 콘텐츠 정렬 | align-content | 줄바꿈된 flex 행 또는 grid 행이 추가 교차축 공간을 어떻게 분배하는지. |
| 열 | grid-template-columns | 아이템이 다음 행으로 이동하기 전에 grid가 생성하는 동일 트랙의 수. |
| 컨테이너 크기 | width 및 min-height | 사용 가능한 공간이 변경될 때 동일한 CSS가 어떻게 반응하는지. |
먼저 스케일, 그 다음 최적화
먼저 캔버스를 현실적인 크기로 스케일하세요. 그런 다음 간격과 정렬을 조정하세요. 이렇게 하면 생성된 CSS가 실제 조건에서 작동합니다.# 적응 가능한 깨끗한 CSS
.layout-playground {display: flex;flex-direction: row;flex-wrap: wrap;gap: 24px;justify-content: center;align-items: center;}
비주얼 스케일링이 중요한 이유
많은 레이아웃 버그는 컨테이너가 더 좁거나, 더 높거나, 다른 수의 아이템으로 채워질 때만 나타납니다. CSS가 실시간으로 업데이트되는 동안 스케일링하면 어색한 줄바꿈과 취약한 정렬 선택을 발견하는 데 도움이 됩니다.
권장 워크플로우
1차원 흐름에는 프리셋 또는 Flexbox, 2차원 구조에는 Grid를 선택하세요.
CSS를 복사하기 전에 캔버스를 스케일하여 레이아웃이 현실적인 제약을 견딜 수 있도록 하세요.
각 자식에 마진을 추가하는 대신 아이템 간 간격에 gap을 사용하세요.
생성된 CSS를 시작점으로 복사한 다음 프로젝트별 선택자와 미디어 쿼리를 추가하세요.