(반응형 웹)@media 미디어 쿼리

@media 란 ? 

  출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리함으로써 하나의 HTML 소스가 여러가지 뷰를

  갖도록 구현할 수 있는 명세이다. 일반적으로 뷰포트 해상도(width, height)에 따라 CSS 코드를 분기한다.

 

@media 규칙

@media only all and (조건문) {실행문}

• @media: 미디어 쿼리가 시작됨을 선언한다. @media, only, all, and, (조건문) 사이에 포함되어 있는 공백은 필수적이다.
• only: only 키워드는 미디어 쿼리를 지원하는 사용자 에이전트만 미디어 쿼리 구문을 해석하라는 명령이며 생략 가능하다. 생략했을 때 기본 값은 only로 처리 된다. 생략해도 무방하므로 이 키워드는 일반적으로 작성하지 않는다. 이 자리에는 not 키워드를 사용할 수 있는데 뒤에 오는 모든 조건을 부정하는 연산을 한다.
• all: all 키워드는 미디어 쿼리를 해석해야 할 대상 미디어를 선언한 것이다. all 이면 모든 미디어가 이 구문을 해석해야 한다. all 키워드 대신 screen 또는 print와 같은 특정 미디어를 구체적으로 언급할 수도 있다. all 키워드는 생략 가능하고 생략했을 때 기본 값은 all 으로 처리된다. 이 밖에도 다양한 미디어 타입(all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv)이 있다. all, screen, print를 가장 널리 쓴다.
• and: and 키워드는 논리적으로 ‘AND’ 연산을 수행하여 앞과 뒤의 조건을 모두 만족해야 한다는 것을 의미한다. 조건이 유일하거나 또는 only, all과 같은 선행 키워드가 생략되면 and 키워드는 사용하지 말아야 한다. and 대신 콤마 , 기호를 사용하면 ‘OR’ 연산을 수행한다. ‘OR’ 연산은 나열된 조건 중에서 하나만 참이어도 {실행문}을 해석한다.
• (조건문): 브라우저는 조건문이 참일때{실행문}을 처리하고 거짓일 때 무시한다. 조건문은 두 가지 이상 등장할 수 있다. 둘 이상의 조건문은 and 키워드 또는 콤마 , 기호로 연결해야 한다.
• {실행문}: 일반적인 CSS 코드를 이 괄호 안에 작성한다. 브라우저는 (조건문)이 참일때 실행문 안쪽에 있는 CSS 코드를 해석한다.

내가 작성한 media 쿼리 

@media all and (min-width: 721px) { /*720px 이상 일때*/
      nav {
        height: 40px;
        border-bottom:2px solid #34495e;
      }
      nav ul {
        display:block;
        width: 720px;
        height: 40px;
        padding: 0;
        margin: 0 auto;
      } 
      nav ul li {
        display:inline-block; /* nav 가로 배열을 위해 */
        width: 120px;
        border-bottom:0;
        border-right: 1px solid #576979;
        margin-right:-6px;
      }
    }

nav 세로 배열을 가로로 바꿔주는 쿼리

 

 

개인적으로 @media all and(조건식) -> 이렇게 써서 1시간동안 media 쿼리가 왜 적용 안되는지..삽질 끝에 

띄어쓰기가 필수라는걸 알게 되었습니다.. @media all and (조건식) 으로 공백은 필수!