[css] 미디어 쿼리

미디어 쿼리

화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술

기본 문법

/*조건에 해당하면 스타일 적용*/
@media [미디어유형] [논리연산자] (조건문) {
	스타일
}

📌 @media : 미디어 쿼리가 시작됨을 표시합니다.

📌 only : 미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능)

📌 미디어 유형(Media Type) - 단말기 유형 (생략가능)

• all : 모든 장치
• print : 인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서
• screen : 스크린 화면
• speech : 음성 합성장치
  • 그 외 Media Query 3 모듈에서는 tty, tv, projection, handheld, braille, embossed, aural을 정의하였지만 Media Query 4에서 제거되었습니다.

📌 논리 연산자 (생략가능)

• and : 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용(and 연산자와 같은 동작)
• not : 쿼리가 거짓일 때만 참을 반환, Level 3 모듈에서는 not 키워드 사용시 단일 미디어 쿼리에 not 연산은 불가능하며, 전체 쿼리만 not 연산이 가능합니다.
• only : 전체 쿼리가 일치할 경우에만 스타일 적용
• ,(쉼표) : 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참(or 연산자와 같은 )

📌 (조건문) : 해당 조건을 설정 할 수 있습니다.

• 미디어 특성
  미디어 특성은 출력 장치, 환경 등의 특징을 정의할 수 있습니다. 미디어 특성 표현식을 사용하여 특성의 존재 여부와 값을 판별하여 조건을 정의할 수 있습니다.

  • 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.
    width : 스크롤바를 포함한 뷰포트 너비
    max-width : 뷰포트의 최대 가로너비
    min-width : 뷰포트의 최소 가로너비
    height : 뷰포트의 높이
    max-height : 뷰포트의 최대 높이
    min-height : 뷰포트의 최소 높이
    orientation : 뷰포트의 방향
    grid : 장치가 그리드와 비트맵 스크린 중 어느 것을 사용하는지
    hover : 사용자가 요소 위에 마우스를 올릴 수 있는 환경인지

📌 (실행문) : 조건에 따른 실행을 설정합니다.

💡 예시

1. 480px 이상의 미디어 타입

@media (min-width:480px) { ... }
   또는
@media screen and (max-width:480px) { ... }

2. all 과 and가 생략 가능한 경우

@media (min-width:480px) { ... }
   또는
@ media all (mix-width:480px) { ... }

3. and 를 사용해서 모든 조건을 필요로 하는 미디어 타입

@media screen and (min-height:640px) and (min-width:480px) { ... }

4. 컴마를 사용해서 어느 한쪽만 만족하는 미디어 타입

@media screen and (min-width: 320px) and (min-width: 480px), screen and (min-width: 480px), print { ... }

참고
https://www.daleseo.com/css-media-queries/
https://log.designichthus.com/11
https://blog.naver.com/PostView.naver?blogId=hj_kim97&logNo=222440081148&redirect=Dlog&widgetTypeCall=true&directAccess=false
https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries
https://skydoor2019.tistory.com/8