[반응형 웹 스터디] 미디어 쿼리 기본 문법

 

미디어 쿼리

화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3 속성 중 하나.

 

기본 문법

@media [only 또는 not] [미디어유형] [and 또는 , 콤마] (조건문) { 실행문 }

 

@media 미디어 쿼리 문법 시작

 

[only 또는 not]

 

Only : 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석

not : ‘not tv’ 일 경우 tv를 제외한 모든 미디어 유형

* 익스플로러 6,7,8의 경우 지원하지 않기 때문에 only 키워드는 대부분 생략.

 

미디어 유형 : 생략 가능

all, print, screen, tv, projection, handheld, speech, aural, embossed, tty, Braille

미디어 유형은 생략 가능하며 생략 시 all 처럼 작동.

* 스마트 기기는 screen을 사용. ( screen : 컴퓨터 화면 장치 또는 스마트 기기 화면 )

 

[and 또는 ,콤마] : 생략 가능

조건의 사실여부를 판단하는 논리 연산자.

And 는 앞뒤 조건이 모두 사실일 때 뒤를 해석.

, 콤마는 앞뒤 조건 중 하나만 사실이더라도 뒤를 해석.

@media A and B{실행문} /  @media A, B{실행문}

 

(조건문) : 조건문이 사실일 경우 뒤에 따라오는 것을 해석하라는 의미.

@media (min-width:320px) { 실행문 } : 너비가 320px 이상일 때 실행문 실행.

@media (min-width:320px) and (max-width:768px) { 실행문 }

 : 320 <= 너비 <= 768 인 경우 실행문 실행.

++종류++

Width, height, device-width, device-height

Orientation : 기기의 화면 방향 portrait(세로), landscape(가로)

Aspect-ratio: 화면 비율, device-aspect-ratio: 단말기 화면 비율

Color: 기기의 비트 수, color-index: 기기의 색상 수, monochrome: 기기가 흑백일 때 픽셀당 비트수, resolution: 기기의 해상력, scan: tv의 스캔방식, grid: 기기의 그리드/비트맵

 

{실행문} 일반적으로 사용하는 CSS코드 작성

 

 [ " Do it! 반응형 웹디자인 - 김운아 - " 학습 내용을 중심으로 정리 ]