Media Query   미디어 쿼리

1. 미디어 쿼리

  ㅇ 미디어 쿼리 이란? 
     - 개발자가, 반응형 웹 디자인을, CSS 만으로 구현하기 위해,
     - 사용자의 현재 사용 중인, 입출력 미디어의 유형,특성에 대한 쿼리 및 그에따른 스타일 지정

  ㅇ 적용 방법 종류
     - CSS 파일 내
        . @media 규칙  :  例) @media screen and (max-width: 768px) { 스타일 설정 내용 }
        . @import 규칙 :  例) @import url(스타일 설정된 파일명) screen and (max-width: 768px);
     - link 이용 방법
        . 例) <link rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" href="스타일 설정된 파일명">


2. @media 규칙

  ㅇ 형식) @media (특정 미디어 조건) { 스타일 설정 내용 }
     - @media : 미디어 종별(특정 조건)에 따라, 다른 스타일 설정을 줄 수 있음
     - `특정 미디어 조건`  =  `미디어 유형`  and  `미디어 특성`
     - `미디어 유형 (media type)`
        . 종별 : print, screen, handheld, braille, projection, tty, tv
        . 모든 미디어 유형 : all
     - `미디어 특성 (media feature)`
        . 종별 : device-width, height, orientaion, color, resolution 등
        . min-,max- 접두사 : 이를 이용하여 최대값,최소값 이하/이상인지를 확인 가능

  ㅇ 例) @media screen and (max-width: 768px) { 스타일 설정 내용 }
     - 만일, @media (min-width: 768px) { 스타일 설정 내용 } 이면, 
        . all인 경우로써, 모든 미디어 유형(screen,print,handheld 등)에 해당
     - 스크린 미디어 유형으로, 최대 768 픽셀 이하이면 (즉, 모바일), { } 안의 설정 내용을 적용
        . 통상적으로,
        . 스마트폰 : 768px 미만
        . 테블릿   : 768px ~ 1720px 사이
        . 데스크톱 : 1720px 이상