미디어쿼리_CSS

정의

• 미디어쿼리는 반응형 CSS로 화면의 크기에 따라 이미지가 변경된다

사용법

@media screen and (max-width: 800px){ 
      flex-direction: column;
}

• "@media"키워드 다음에 "screen"을 사용하여 쿼리를 호출하여 작업중인 "미디어 유형"을 지정
• 괄호 안에 요소의 CSS 속성을 조건부로 변경하는 데 사용할 매개 변수를 지정
• 매개 변수는 "max-width"다음에 원래 CSS를 표시 할 가장 큰 크기의 화면이 나옵니다. 중괄호 안에는 작은 화면에 적용 할 CSS 속성을 작성

속성

• srcset
  "이미지와 vw(viewport width)를 이용하여 vw별로 이미지를 지정할 수 있다.
• sizes
  이미지의 사이즈를 결정
  640미만 (max-width: 640px)
  640초과 (min-width: 640px)
  60vw, 100vw는 vw가 min-width : 640px 가 true라면 60vw,아니라면 100vw를 설정하라는 의미이다.
• media
  @media 와 동일하다.
• type
  type="image/webp"를 통해 지원 가능한 브라우저라면 webp를 사용할 수 있게 해준다.
• img 태그는 항상 마지막에 있어야 한다