CSS 태그 정리 - 2

CSS 태그 정리

 

미디어 쿼리의 속성

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

​

​

​

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

종류	설명	속성값
display	플렉스 컨테이너를 지정	flex, lnlin-flex
flex-direction	플렉스 항목에서 주축과 방향을 지정	row, row-reverse, column, column-reverse
flex-wrap	컨테이너 너비보다 항목이 많을 경우 줄바꿈 여부를 지정	nowrap, wrap, wrap-reverse
flex-flow	배치 방향과 줄 바꿈을 한번에 지정	flex-direction 속성값과 flex-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
align-content	여러 줄일 때 교차북 적렬 방법을 지정	flex-start, flex-end, center, space-between, space-around, stretch
flex	플렉스 항목의 너비를 줄이거나 늘릴때	1개에서 3개까지의 값, auto, initial

​

 

​

 

​

​

​

​

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

​

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

​

​

 

​