[CSS] 미디어쿼리

1. 미디어 쿼리

@media mediaqueries { /* style rules  */ }

/* @media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻
그 뒤에 미디어 쿼리 구문(위 코드의 mediaqueries) 이 나오고 이어서 중괄호( { } )를 이용해서 스타일 규칙이 들어감.*/

- 미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 구성

• 미디어 타입 : all, print, screen 
• 미디어 특성 : width는 뷰포트의 너비, 즉 브라우저 창의 너비.(스크린의 크기 x) // orientation은 미디어가 세로모드인지 가로모드인지를 구분

 

2. syntax

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;

• [ a ] : a가 나올 수도 있고 나오지 않을 수도 있음
• a | b : a 또는 b 둘 중에 하나를 선택
• a? :  a가 0번 나오거나 1번만 나올 수 있음
• a* : a가 0번 나오거나 그 이상 계속 나올 수 있음
• media_type : all, screen, print 등 명세에 정의된 미디어 타입
• media_feature : width, orientation 등 명세에 정의된 미디어 특성
• S : 공백 표시 (해석 안하고 넘어가도 됨)
• ' ' : 홀따옴표 안에 내용이 그대로 화면에 나와야 함

media_query_list
    : 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분

media_query
    : A 형태 - 미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있음
                    미디어 타잎 앞에는 only 또는 not 키워드가 올 수 있음 (B형태인 표현식은 불가)
                    미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있음.

    : B 형태 - 미디어 타입 없이 미디어 표현식이 바로 나올 수 있습니다.(미디어 타입이 명시되지 않으면 all로 간주)
                   미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있습니다.

expression
    : 미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어짐. 이름과 값은 : 기호로 연결.
      또, 값이 없이 특성 이름만으로도 작성할 수 있음.

 

 

@media screen { ... }
    : 미디어 타입이 screen이면 적용

@media screen and (min-width: 768px) { ... }
    : 미디어 타입이 screen이고 width가 768px 이상이면 적용. 두 개 중 하나라도 만족하지 않으면 거짓.

@media (min-width: 768px) and (max-width: 1024px) { ... }
    : and는 연결된 모든 표현식이 참이면 적용.(and 키워드는 연결된 부분이 모두 참이어야 적용.)

@media (color-index)
    : 미디어 장치가 color-index를 지원하면 적용.

@media screen and (min-width: 768px), screen and (orientation: portrait), ...
    : 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용.( and 키워드와 반대.)

@media not screen and (min-width: 768px)
    : not 키워드는 하나의 media_query 전체를 부정.
    : (not screen) and (min-width: 768px) 잘못된 해석!
    : not (screen and (min-width: 768px)) 올바른 해석!
    : @media not screen and (min-width: 768px), print
       첫 번째 미디어 쿼리에만 not 키워드가 적용되며, 두 번째 미디어 쿼리(print)에는 영향이 없음.

 

 

3. 미디어 쿼리 선언 방법

@media screen and (color)
    : CSS 파일 내부에 또는 <style> 태그 내부에 사용가능 합니다. 대부분의 경우 이렇게 사용.

 

4. 실습

웹 페이지를 인쇄하는 경우의 스타일 추가

• 앵커 요소의 url  출력
• 앵커 요소의 밑줄 제거

@media print {
	a { text-decoration: none; }
	a:after { display: inline; content: '(' attr(href) ')'; }
}

 

5. 실무에서 많이 사용되는 분기 포인트

 

6. 참고 사이트 

미디어쿼리로 작성된 사이트 모아놓은 곳 : https://mediaquery.es 

mediaquery.es

 

 

7. 뷰포트

• 모바일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작
• 단점 : 기본 뷰포트의 크기가 980px이기 때문에 width가 980px 정도인 웹 페이지를 모바일 브라우저로 보게 되면 가로 스크롤 없이 딱 화면에 맞춰 나와 스크롤 하지 않아도 내용이 다 보여지는 장점이 있지만 글자나 그림들이 그 폭에 맞춰서 작아지기 때문에 가독성이 매우 떨어짐 => 뷰포트 설정할 수 있는 태그 나옴

<meta name="viewport" content=" 뷰포트의 설정 값" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">

content

• width(height) : 뷰포트의 가로(세로) 크기를 지정. px단위의 수치가 들어갈 수 있지만, 대부분 특수 키워드인 "device-width(height)"를 사용.(뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정.)
• initial-scale : 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정.(소수값)
• user-scalable : 사용자의 확대/축소 기능을 설정.