[Web/CSS] CSS - 복습7

✏️ 미디어 쿼리의 속성

종류	설명
width, height	웹 페이지의 가로 너비, 세로 높이
min-width, min-height	웹 페이지의 최소 너비, 최소 높이
max-width, max-height	웹 페이지의 최대 너비, 최대 높이
device-width, device-height	단말기의 가로 너비, 세로 높이
min-device-width, min-device-height	단말기의 최소 너비, 최소 높이
max-device-width, max-device-height	단말기의 최대 너비, 최대 높이
orientation: landscape	단말기의 가로 모드
orientation: portrait	단말기의 세로 모드

✏️ 플렉스 박스 레이아웃의 속성

종류	설명	속성값
display	플렉스 컨테이너를 지정	flex, inline-flex
flex-direction	플렉스 항목에서 주축과 방향을 지정	row, row-reverse, column, column-reverse
flew-wrap	컨테이너 너비보다 항목이 많을 경우 줄 바꿈 여부 지정	wrap,nowrap, wrap-reverse
flew-flow	배치 방향과 줄 바꿈을 한번에 지정	flex-direction 속성값과 flex-wrap 속성값을 한 번에 사용
justify-content	주축에서 플렉스 항목 정렬 방법을 지정	flex-start,center, flex-end, space-between, space-around
align-items	교차축에서 플렉스 항목 정렬 방법을 지정	flex-start, flex-end, center, stretch, baseline
align-self	특정 플렉스 항목의 정렬 방법 지정	flex-start, flex-end, center, stretch, baseline
align-content	여러 줄일 때 교차축 정렬 방법을 지정	flew-start, flex-end, center, space-around, space-between, stretch
flex	플렉스 항목의 너비를 줄이거나 늘림	1개에서 3개까지의 값, auto, initial

✏️ CSS 그리드 레이아웃의 속성과 함수

종류	설명	속성값
display	그리드 컨테이너를 지정	grid, inline-grid
grid-template-column	칼럼을 지정	크깃값
grid-template-row	줄을 지정	크깃값
grid-column-gap	칼럼과 칼럼 사이의 간격을 지정	크깃값
grid-row-gap	줄과 줄 사이의 간격을 지정	크깃값
grid-gap	칼럼과 줄 사이의 간격을 한꺼번에 지정	크깃값
grid-column-start	칼럼 시작의 라인 번호를 지정	숫자
grid-column-end	칼럼 마지막의 라인 번호를 지정	숫자
grid-column	칼럼 시작 번호와 끝 번호 사이에 슬래시(/)를 넣어 사용	숫자
grid-row-start	줄 시작의 라인 번호를 지정	숫자
grid-row-end	칼럼 마지막의 라인 번호를 지정	숫자
grid-row	줄 시작 번호와 끝 번호 사이에 슬래시(/)를 넣어 사용	숫자
grid-area	템플릿 이름을 지정
grid-template-area	grid-area를 사용해 템플릿 그리드를 만듦
minmax()	최솟값과 최댓값을 지정하는 함수	크깃값, auto
repeat()	같은 값을 여러 번 반복할 때 사용하는 함수	크깃값, auto-fill, auto-fit