2/23-1

Posted by:

|

On:

|

  • 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)값보다 넘으면 열(행)이 새로 생성이 된다.
  • 미디어 쿼리 : @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~