9-1. 미디어쿼리 : 정의 및 미디어 타입&미디어 특성( @media screen / print / all / width / orientation{스타일규칙} )

9-1. 미디어쿼리(Media Queries) : 정의 및 미디어 타입&미디어 특성

 

 가. 미디어쿼리(Media Queries) 정의

 

  - 미디어쿼리는 각 미디어 매체에 따라 다른 스타일(CSS Style)을 적용할 수 있게 만드는 것

  - 여기서 미디어 매체란, 모니터와 같은 스크린 매체, 프린트, 스크린 리더기를 의미함

  - 이에, 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공

  - 따라서, 미디어쿼리로 인하여 정적인 고정 레이아웃 웹사이트에서 동적인 반응형 웹사이트로 변화함

 

 나. 미디어쿼리(Media Queries) 구성

 

1  @media 미디어쿼리구문(미디어타입 or 미디어특성) {스타일규칙}

 

 - 미디어쿼리 선언 방법 및 그 순서는,

 

  ① @media : 이제부터 미디어 쿼리를 시작한다는 의미

  ② 미디어쿼리구문 : 미디어타입(media type)과 미디어특성(media features)로 이루어짐

                                 : 이 구문이 '참'이면 '스타일규칙'은 적용되고, '거짓'이면 '스타일규칙'은 무시됨

  ③ 스타일규칙 : 스타일규칙은 위 미디어쿼리구문 다음으로 나오고, 중괄호( { } ) 안에 규칙을 작성함

 

 다. 미디어 타입(media type) 및 미디어 특성(media features)의 종류

 

 ■ 미디어 타입(media type)

종류	내용
screen	ㆍ화면을 출력하는 디스플레이가 있는 미디어인 경우 사용 ㆍ실무에서 대부분 이 미디어타입을 사용함
print	ㆍ인쇄와 관련하여 해당하는 미디어인 경우 사용 ㆍ실무에서 간혹 사용함
all	ㆍ모든 미디어에 적용되는 타입 ㆍ미디어를 구분하는 용도가 아니기에 유용하게 사용치 않음

 

 ■ 미디어 특성(media features)

종류	내용
width	ㆍ뷰포트의 너비, 즉 브라우저 창의 너비를 의미함(모니터스크린 크기가 아님) ㆍ실무에서 많이 사용됨
orientation	ㆍ해당 미디어가 세로모드인지 가로모드인지 구분하는 특성 ㆍwidth값 > height값 : 가로모드 ㆍwidth값 < height값 : 세로모드 ㆍ가로모드 관련 키워드 : landscape ㆍ세로모드 관련 키워드 : portrait