- grid : flex에서 차원 1개가 더 추가된 것
- grid-template-rows(columns) : 한 행(열)에 몇개를 넣을지 설정
px로 폭 넓이를 지정 가능, fr은 폭을 어느 비율로 줄일지 결정해줌. 1fr 2fr 이면 1:2로 나누고 1fr만 적으면 동일하게 나눔 - grid-auto-columns(rows) : 열(행) 길이를 자동으로 맞춰줌
- grid-column(row) : 특정한 값을 특정한 열(행)에 위치해주거나 열(행) 합치기 n/m(n부터m까지), 위에 설정한 template-columns(rows)값보다 넘으면 열(행)이 새로 생성이 된다.
- grid-template-rows(columns) : 한 행(열)에 몇개를 넣을지 설정
- 미디어 쿼리 : @media 규칙을 통해 서로 다른 매체 유형을 위한 맞춤식 스타일 시트
- all:
- print:프린터 매체에 사용
- screen:컴퓨터나 태블릿,스마트폰 등 매체에 사용
- speech:
- @media 조건부 (여러개 쓸 경우 and 추가) {적용할 스타일}
- 속성 : width,height,device-width,device-height,device-aspect-ratio,orientation,color,color-index,monochrome,resolution 등
- 뷰포트(viewport) : 실제 내용이 표시되는 영역
- 많이 쓰이는 단위 : %-전체 디바이스의 넓이=100%,vw,vh-뷰포트를 기준으로 한 너비와 높이의 단위(1vw=1%, 1vh=1%) px도 쓰이긴한다
- 분기점 : 크게 4단위가 된다(단위 : px)
- 모바일 : ~480
- 모바일 가로, 태블릿 세로 : 480~767
- 태블릿 가로 : 768~1023
- PC : 1024~