본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

미디어 쿼리

미디어 쿼리란?

• PC뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해
• 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문

미디어 쿼리 media

@media (min-width: 320px) and (max-width: 800px) {
  .media {
    width: 300px;
    height: 300px;
    background-color: yellow;
  }
}

• 화면의 크기와 방향등에 따라 다른 CSS 스타일을 적용
• 가로폭이 320px ~ 800px일 때 중괄호 안의 속성 적용

유동그리드(Grid)

.container {
  display: grid;
  grid-template-columns: repeat(auto-fix, minmax(200px, 1fr));
  grid-gap: 10px;
}

• 화면크기에 맞춰서 요소의 크기와 위치를 유연하게 조정
• grid-template-columns 열의 개수와 너비 정의
• grid-gap 요소간의 간격 조정

뷰포트(Viewport)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 사용자가 웹 사이트를 볼 때 실제로 보이는 영역
• 미디어쿼리 사용 시 반드시 입력
• width=device-width 너비를 기기의 너비와 같게
• initial-scale=1.0 초기화면 배율 1