3. 플렉스 박스 레이아웃의 정렬 속성
|
속성 |
설명 |
|
justify-content |
플렉스 아이템을 모두 주축 방향으로 정렬합니다. |
|
align-items |
플렉스 아이템을 모두 교차축 방향으로 정렬합니다. |
|
align-self |
각각의 플렉스 아이템을 교차축 방향으로 정렬합니다. |
|
align-content |
플렉스 아이템이 두 줄 이상일 때 교차축 방향으로 정렬합니다. |
4. 그리드 레이아웃
그리드 레이아웃은 2차원 레이아웃 설계를 위해 CSS3에서 추가된 개념입니다. 그리드 레이아웃의 구성 요소는 다음과 같습니다.
|
구성 요소 |
설명 |
|
행(row) |
그리드 레이아웃에서 가로줄을 의미합니다. |
|
열(column) |
그리드 레이아웃에서 세로줄을 의미합니다. |
|
그리드 셀(grid cell) |
행과 열이 만나서 이루어지는 하나의 공간을 의미합니다. |
|
그리드 갭(grid gap) |
그리드 셀과 그리드 셀 사이의 간격을 나타냅니다. |
|
그리드 아이템(grid item) |
그리드 셀 안에 포함되는 콘텐츠를 의미합니다. |
|
그리드 라인(grid line) |
그리드 행과 열을 그리는 선을 의미합니다. |
|
그리드 넘버(grid number) |
그리드 라인에 붙는 번호를 의미합니다. |
|
그리드 컨테이너(grid container) |
그리드 아이템을 묶는 부모 요소입니다. |