반응형 웹 레이아웃 구조  media query
미디어 쿼리는 브라우져 사이즈에 따라 레이아웃을 작성하거나, 다른 미디어 종류에 따라 따른 CSS 코드를 작성하는 등, 반응형 웹페이지를 작성할 때
유용한 구문입니다.

http://relation.co.kr/images_board/board_system_publishing/82/index.html


미디어 쿼리 @media query

논리 연산자

and : 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용(and 연산자와 같은 동작)

not : 쿼리가 거짓일 때만 참을 반환, Level 3 모듈에서는 not 키워드 사용시 단일 미디어 쿼리에 not 연산은 불가능하며, 전체 쿼리만 not 연산이 가능합니다.

only​ : 전체 쿼리가 일치할 경우에만 스타일 적용

,(쉼표)​ : 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참(or 연산자와 같은

// 가로너비가 1025px 이상인 경우 적용 : PC
@media screen and (min-width: 1025px){ .. }
// 가로너비가 750px 이상 1024px 이하 : 
@media screen and (min-width: 750px) and (max-width: 1024){ .. }
// 뷰포트의 가로너비가 749px 이하인 경우 적용 : MO
@media screen and (min-width: 749px){ .. }
// 장치가 가로 방향인 경우 적용
@media (orientation: landscape){ .. }
// 장치가 세로 방향인 경우 적용
@media (orientation: portrait){ .. }
// 사용자가 요소 위에 마우스 커서를 올릴 수 있는 환경인지 : 터치 스크린 및 키보드 네비게이션은 불가능
@media (hover: hover){ .. }

// 논리곱 미디어 쿼리
// screen 유형 + (min-width: 400px) + (orientation: landscape)
// 모두 참이어야 적용
@media screen and (min-width: 400px) and (orientation: landscape){ .. }
// 논리합 미디어 쿼리
// screen and (min-width: 400px) 혹은 screen and (orientation: landscape)
// 둘중 하나라도 참이면 적용
@media screen and (min-width: 400px), screen and (orientation: landscape){ .. }
// 부정 논리 미디어 쿼리
// 보기 방향이 세로일 경우에만 적용
@media not all and (orientation: landscape){ .. }

* 미디어 쿼리 사용법
미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다.

css 내부에 삽입하기 

<style>
@media (max-width: 700px) {
  .container{
    margin:0px; padding: 0px;
  }
}
</style>

링크로 연결할 때

<link href="test.css" rel="stylesheet" media="(max-width: 700px)" />

연산자
and | not | only | ,
 - and 연산자 : 여러 미디어 특징들을 하나로 결합함 .
- , (or)연산자: 쉼표로 분리된 각 목록은 각각 개별 미디어 쿼리임.
- not 연산자 : 전체 미디어 쿼리를 부정하기 위해 사용 함.
- only 연산자 : 미디어 쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는 것을 방지

- not이나 only를 사용하려면 미디어 타입을 규정해야 함.
- 미디어 쿼리는 대소문자 구별하지 않는다

 
사용 예.
가장 단순한 형태의 미디어 쿼리
모든 유형의 장치이며 최소너비 700px 일 때 스타일을 적용하겠다는 의미

@media (min-width: 700px) {background-color: yellow;}
@media all and (min-width: 700px) {...}

* media type(미디어 종류)
all | print | speech| screen 
- all 기본값. 모든 미디어 장치에 사용 됨
- print 프린터에 사용
- screen 컴퓨터 스크린, 테블릿, 스마트폰 등
- speech 페이지를 읽어주는 화면 낭독기

 

* media feature(미디어 특징)
width | height | min-width | min-height | max-width | max-height
device-width | device-height | min-device-width | min-device-height  | max-device-width | max-device-height
aspect-ratio (min- / max- 접두어 사용가능)
device-aspect-ratio (min- / max- 접두어 사용가능)
color (min- / max- 접두어 사용가능)
color-index (min- / max- 접두어 사용가능)
monochrome (min- / max- 접두어 사용가능)
resolution (min- / max- 접두어 사용가능)
scan | grid

 

* width  화면 영역 너비(브라우저 창 같은)
- 예 1: @media (min-width: 20em) {...}
- 모든 장치에서 최소 너비 20em 이상이면 적용

- 예2 : <link rel="stylesheet" media="screen and  (min-width: 500px) and (max-width: 800px) 
    href="test.css" />
- 스크린 장치 최소 화면이 500px보다 크고 800px보다 작을 때  스타일 적용 
 


*  height  화면 영역 높이
- 예 : <link rel="stylesheet" media="screen and (max-device-width: 450px)" />
- 장치 너비가 450px보다 작을 때 적용