[CSS] @media (미디어 쿼리, Media Query)

* 사용 예
@media screen {  * { color: red;  }    }  //화면 글자 색은 red
@media print  {  * { color: blue; }    }  //프린트 글자 색은 blue



//===========================
* 화면 크기가 작아지면 일부 요소 감추기

    - 화면 크기가 800 이하가 되면 id="menu" 를 감춘다
@media (max-width: 800px) {
    #menu {  display: none;   }
        /* visibility: hidden; 공간 유지하고 숨김 */
}


    - 화면이 가로 방향이 되면
@media screen
      /* 디바이스가 모바일일때(device-width 0 ~ 768px) */
      and (max-device-width: 760px)
      /* 가로 */
      and (orientation: landscape) {
      * { color: blue; }
}

//==========================

//참고

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries
https://poiemaweb.com/css3-responsive-web-design#12-media


* 미디어 유형
all - 모든 장치
print - 프린트
screen - 화면
speech - 음성 합성기(speech synthesizer)
tv | projection | aural | braille | handheld | tty | embossed


//=========================
* 미디어 특성 (Media Feature)
    - scan , grid 외에는 모두  min, max 속성이 있음

width -    뷰포트 너비
    min-width | max-width

height     뷰포트 높이      

aspect-ratio - 가로세로(종횡)비      

orientation - 뷰포트의 방향      
resolution - 출력 장치의 픽셀 밀도



//
device-width     디바이스의 물리적 너비(px)
device-height     디바이스의 물리적 높이(px)
device-aspect-ratio     디바이스의 물리적 width/height 비율

display-mode - 응용 프로그램의 디스플레이 모드
overflow-block - 출력 장치는 블록 축(axis)을 따라 뷰포트를 넘치는(overflow) 콘텐츠를 어떻게 처리하는가?

color - 출력 장치의 컬러 컴포넌트 당 비트 수, 그렇지 않으면 0(장치가 컬러가 아닌 경우).      
color-index - 출력 장치의 컬러 검색 표 내 항목 수, 그렇지 않으면 0(장치가 그런 표를 사용하지 않는 경우).      
monochrome - 출력 장치의 흑백 프레임 버퍼 내 픽셀 당 비트, 그렇지 않으면 0(장치가 흑백이 아닌 경우).      
inverted-colors - 사용자 에이전트 또는 기본 OS가 색이 반전 중인가요?

scan - 출력 장치의 주사(scanning) 방법      
grid - 장치가 격자(grid) 또는 비트맵인가요?      
update-frequency - 얼마나 빠르게 (적어도) 출력 장치가 콘텐츠의 겉모양을 바꿀 수 있는가?
overflow-inline - 인라인 축을 따라 뷰포트를 넘치는 콘텐츠가 스크롤될 수 있는가?
pointer - 주 입력 장치가 포인팅 장치인가요? 그렇다면 얼마나 정확한가요?
hover - 주 입력 장치가 사용자가 요소 위에 마우스를 올릴 수 있게 하나요?
any-pointer - 이용 가능한 입력 장치가 포인팅 장치인가요? 그렇다면 얼마나 정확한가요?      
any-hover - 이용 가능한 입력 장치가 사용자가 요소 위에 마우스를 올릴 수 있게 하나요?      
light-level - 현재 주변광(ambient light) 레벨
scripting - 스크립팅(가령 JavaScript)이 이용 가능하나요?