order: flex-item의 순서를 지정함, 기본값은 0, 클 수록 순서가 뒤로 밀려남, 음수도 가능
align-self: 기본값 auto, 보통 align-items를 상속받음, align-items 같은 교차축 정렬을 개별적으로 따로 지정할 수 있음
grid
2차원의 레이아웃(x, y축)
gird-container
행축 정의 : grid-template-rows, 개수와 높이 지정 가능
열축 정의 : grid-template-columns, 개수와 너비 지정 가능
fraction 단위 사용 가능, 1fr, .. 공간의 비율을 의미, 너비/높이 값이 지정되어 있지 않다면 기본값 auto가 적용되어 최대한 줄어들게 됨
repect(반복 횟수, 길이) 함수 사용 가능
span : 확장이란 의미를 갖고 있음, span 2 > 아이템의 초기 위치에서 2개의 라인을 확장해서 늘려라 라는 뜻
grid-auto-rows, grid-auto-columns: 명시적으로 만들어놓은 틀(grid-template-rows/columns) 안에서 다 못들어가게 된다면 암시적으로 행과 열의 크기 지정
grid-auto-flow: 아이템이 정렬될 때 빈 공간이 있으면 메워가며 정렬시키는 속성이 있음(dense), 기본값은 row, row/column 뒤에 dense를 붙이면 빈 공간이 만들어 진 경우 빈 공간을 메우는 정렬 기준을 정할 수 있음(row dense할 때는 row 생략 가능)
justify-content, align-content: 컨테이너를 축에 따라 정렬
justify-items, align-items: 한 셀 안에 빈 공간을 갖고 있을 때 셀 안에 아이템을 행/열축으로 정렬
grid-template-areas: 그리드 내에서 사용할 아이템에 grid-area 프로퍼티에 영역의 이름을 설정하여 ""를 이용하여 행과 열 위치에 맞는 이름을 넣어 위치 지정 가능, 내용을 채워넣지 않으려면 마침표 혹은 none으로 지정
grid-gap: 그리드 아이템 사이사이에 여백 추가, line(gutter)이라고 부름, 첫 번째 값은 행 사이(grid-row-gap)를, 두 번째 값은 열 사이 간격(grid-column-gap)을 줄 수 있음
grid-items
grid-row, grid-column: 셀(아이템)이 몇 개까지 확장되도록 지정, line을 기준
line > 그리드에는 셀을 만드는 행/열마다 각 라인이 생김, 각 라인은 양수/음수 값을 둘 다 갖고 있음
해당 학습 부분 목차
7주차 · 파트 05 [DAY 34] CSS 심화 (1)
학습 내용
float
overflow: hidden방법도 존재하지만 레이아웃에 필요한 속성이 아니라면 문제를 끼치게 되기 때문에 근본적인 해결책이 될 수 없음::after,::before)을 통해 clear 프로퍼티를 통해 float 속성을 해제하여 해결position
쌓임 맥락(stacking context)
BEM 방식
display flex
grid