FLEX?
하나의 컨테이너와 그 하위에 있는 아이템들로 1차원 페이지를 구성
flex - container(부모요소)
1. Flex Axis
(1) justify-content
주축을 기준으로, 좌우 여백을 활용하여 요소 배치
(2) align-items
주축의 수직축을 기준으로, 상하 여백을 활용하여 요소 배치
(3) align-content
주축의 수직축을 기준으로, flex-wrap:wrap 상태에서 여러 줄의 요소를 배치
2. Flex Wrap
: 컨테이너의 아이템들을 한 줄에 담기에 공간이 초과될 경우, 줄바꿈을 결정하는 속성
(1) no-wrap
(2) wrap
(3) wrap-reverse
flex - item(자식요소)
-
flex-basis
: item의 기본 크기 -
flex-grow
: item이 basis 값보다 얼마나 커질 수 있는지 -
flex-shrink
: item이 basis 값보다 얼마나 작아질 수 있는지
GRID?
페이지를 2차원 두 방향으로 나눌 수 있는 레이아웃 시스템
gird - container
1. 전체적인 레이아웃 배치 틀 결정
(1) grid-template-columns
: 보통은 fr 단위로 지정함
: 1fr 1fr 2fr → 페이지의 column을 3개로 나누고 그 차지하는 비율을 1 1 2 로 지정한다는 의미
(2) grid-template-rows
: 위와 동일하게 row 지정
2. 정렬
(1) justify-content
: 메인축을 기준으로, container 전체 정렬
(2) align-content
: 메인축의 수직축을 기준으로, container 전체 정렬
gird - item
1. 영역 정의
: grid container를 표라고 생각하고, 그어지는 선을 기준으로 영역을 나눔
: 3열이라면 4개의 선이 그어짐
2. 영역 지정
: 3열 중 첫번째 열 선택 → 1/2
: 3열 전체 선택 → 1/4
: 2-3열 병합 선택 → 2/4
