반응형
1. 미디어 쿼리의 속성
|
width, height
|
웹페이지의 가로 너비, 세로 높이
|
|
min-width, min-height
|
웹페이지의 최소 가로너비, 최소 높이
|
|
max-width, max-height
|
|
|
device-width, device-height
|
단말기의 가로 세로 너비 높이
|
|
min-device-width
|
|
|
max-device-width
|
|
|
orientation: portrait
|
단말기의 세로모드
|
|
orientation: landscape
|
단말기의 가로모드
|
2. 플렉스 박스 레이아웃의 속성
|
종류
|
설명
|
속성값
|
|
display
|
플렉스 컨테이너를 지정합니다.
|
flex, inline-flex
|
|
flex-direction
|
플렉스 항목에서 주축과 방향을 지정합니다.
|
row, row-reverse, column, column-reverse
|
|
flex-wrap
|
컨테이너 너비보다 항목이 많을 경우 줄바꿈 여부를 지정합니다.
|
nowrap(기본값), wrap, wrap-reverse
|
|
flex-flow
|
배치방향과 줄 바꿈을 한번에 지정합니다.
|
flex-direction 속성값과 flex-wrap 속성값을 한번에 지정
ex ) flex-flow: row wrap 이런식으로 |
|
justify-content
|
주축에서 플렉스 항목 정렬방법을 지정합니다.
|
flex-start, flex-end, center, space-between, space-around
|
|
align-items
|
교차축에서 플렉스 항목 정렬 방법을 지정합니다.
|
flex-start, flex-end, center, baseline, stretch
|
|
align-self
|
특정 플렉스 항목의 정렬 방법을 지정합니다.
|
flex-start, flex-end, center, baseline, stretch
|
|
aling-content
|
여러 줄일 때 교차축 정렬 방법을 지정합니다.
|
flex-start, flex-end, center, space-between, space-around, stretch
|
|
flex
|
플렉스 항목의 너비를 줄이거나 늘립니다
|
1개에서 3개까지의 값, auto, initial
|
3. css 그리드 레이아웃의 속성과 함수
|
종류
|
설명
|
속성 값
|
|
display
|
그리드 컨테이너를 지정합니다.
|
grid, inline-grid
|
|
grid-template-columns
|
칼럼을 지정합니다.
|
크깃값
|
|
grid-template-rows
|
줄 높이를 지정합니다.
|
크깃값
|
|
grid-column-gap
|
줄과 줄사이의 간격을 지정합니다.
|
크깃값
|
|
grid-row-gap
|
줄과 줄사이의 간격을 지정합니다.
|
크깃값
|
|
grid-gap
|
칼럼과 줄사이의 간격을 한꺼번에 지정합니다.
|
크깃값
|
|
grid-column-start
|
칼럼시작의 라인번호를 지정합니다.
|
숫자
|
|
grid-column-end
|
칼럼 마지막의 라인 번호를 지정합니다
|
숫자
|
|
grid-column
|
칼럼 시작 번호와 끝 번호 사이에 슬래시를 넣어 사용합니다
|
ex)
grid-column: 1/4 |
|
grid-row-start
|
줄 시작의 라인 번호를 지정합니다.
|
숫자
|
|
grid-row-end
|
줄 마지막의 라인 번호를 지정합니다.
|
숫자
|
|
grid-row
|
줄 시작과 마지막을 슬래시를 넣어 지정합니다.
|
grid-row: 1/4
|
|
grid-area
|
템플릿 이름을 지정합니다.
|
|
|
grid-template-areas
|
grid-area를 사용해 템플릿 그리드를 만듭니다.
|
|
|
minmax()
|
최솟값과 최댓값을 지정하는 함수
|
minmax(최솟값, 최댓값)
|
|
repeat()
|
같은 값을 여러번 반복할 때 사용하는 함수
|
repeat(몇번 반복할지, 크기)
몇번 반복할지에 들어갈 값은 auto-fill, auto-fit이 올수 있는 것입니다. |
반응형