🟢 반응형 - Media Query (1)

CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용 시키는게 가능했습니다.
하지만 미디어 타입만으로는 해당 기기의 특성을 적확히 판단하기가 어려워 많이 사용되지 않았습니다.
CSS3은 위 미디어 타입을 개선하여, 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장하였는데 이를 미디어 쿼리라고 합니다.

미디어 쿼리 문법
@media [only | not][미디어유형] and | or {Code}

@media

미디어 쿼리 문법의 시작을 알리는 부분입니다.

[only | not]

only(default) 키워드는 다음에 오는 조건만 만족하거나 미디어쿼리를 지원하는 브라우저에서만 미디어쿼리를 해석하게해주는 키워드입니다.
not키워드는 다음에 오는 조건을 부정하는 키워드입니다.
예를 들어 다음 조건이 tv라면 not tv 조건식이 만들어지며 이 경우엔 tv를 제외한 모든 미디어 유형에만 적용합니다.

[미디어유형]

미디어유형은 미디어쿼리가 적용되는 미디어의 유형을 결정하는 키워드로 앞의 only 또는 not 키워드와 함께 작용합니다.
all(default) : 모든 미디어장치
print : CMKY와 같은 잉크출력장치
screen : RGB와 같은 영상출력장치
tv : 영상과 음성이 동시에 출력되는 장치
projection : 프로젝터장치
handheld : 손에 들고 다니는 소형 장치
speech : 음성출력장치
aural : 음성합성장치(화면을 읽어 소리로 출력)
embossed : 점자인쇄장치(화면을 읽어 점자로 출력)
braille : 점자표시장치
tty : 디스플레이 기능이 제한되 장치

[and | or]

연산자의 앞뒤 조건의 사실여부에 따라 실행여부를 판단합니다.
@media A and B {code}
조건 A 그리고 B를 둘 다 만족하면 code를 실행합니다.
@media A or B {code}
조건 A또는 B를 둘 중 하나만 만족해도 code를 실행합니다.

(속성조건)

속성행태의 조건식을 작성하여 코드의 실행여부를 판단합니다.

(max-,min-)width width속성에서 사용가능한 모든값
(max-,min-)height height속성에서 사용가능한 모든값
(max-,min-)device-width width속성에서 사용가능한 모든값
(max-,min-)device-height height속성에서 사용가능한 모든값
(max-,min-)aspect-ratio 브라우저 화면비율, 종횡비
(max-,min-)device-aspect-ratio 기기 화면비율, 종횡비
(max-,min-)pixel-ratio 브라우저 해상도 비율
(max-,min-)device-pixel-ratio 기기 해상도 비율
(max-,min-)color 기기의 색상비트
(max-,min-)color-index 기기의 색상수
(max-,min-)monochrome 기기가 흑백일 때 픽셀당 비트수
(max-,min-)resolution 기기의 해상력
orientation portrait | landscape
scan prgressive | interlace
grid 0(비트맵방식) | 1(그리드방식)