✅ 레이아웃 구성
<float>,<flex>,<grid>에 대해 알아보겠습니다.
1️⃣ float
요소가 플로우로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정 합니다.
문법
div {float: left;}
div {float: right;}
div {float: none;}
div {float: inline-start;}
div {float: inline-end;}
2️⃣ flex
Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법으로 레이아웃 구성을 할 수 있습니다.
flex의 개념 2가지
- 첫 번째는 Container
- 두 번째는 Items
Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다.
| 속성 | 의미 |
|---|---|
| display | Flex Container를 정의 |
| flex-flow | flex-direction와 flex-wrap의 단축 속성 |
| flex-direction | Flex Items의 주 축(main-axis)을 설정 |
| flex-wrap | Flex Items의 여러 줄 묶음(줄 바꿈) 설정 |
| justify-content | 주 축(main-axis)의 정렬 방법을 설정 |
| align-content | 교차 축(cross-axis)의 정렬 방법을 설정(2줄 이상) |
| align-items | 교차 축(cross-axis)에서 Items의 정렬 방법을 설정(1줄) |
2️⃣ grid
Flex와 Grid의 큰 차이점
Flex는 한 방향 레이아웃 시스템(1차원)
Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)
부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고,
자식 요소인 div.item는 Grid Item(그리드 아이템)이라고 부릅니다.
그리드 컨테이너는 grid 의 영향을 받는 부분이며,
그리드 아이템은 container에 설정된 속성에 따라 배치됩니다.
| 속성 | 의미 |
|---|---|
| display | grid를 정의 |
| grid-template-rows | 행(가로)의 크기들을 지정해주는 속성 |
| grid-template-columns | 열(세로)의 크기들을 지정해주는 속성 |
| row-gap, column-gap, gap | 셀 사이의 간격을 설정을 해주는 속성 |
| grid-template-areas | 각 영역에 이름을 붙이고, 그 이름을 이용해서 배치할 수 있게 도와주는 속성 |
코드보기
grid-template-areas 로 나눈 대로 그리드가 잡혀있는 모습
#UXUI #코린이