CSS 미디어쿼리

미디어쿼리

• 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것
• 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줌
• 이전의 정적인 고정 레이아웃 웹 사이트에서 동적으로 반응하는 반응형 웹 사이트로 패러다임이 새롭게 변화

@media(at media)

@media mediaqueries { /* style rules  */ }

미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고, 거짓이면 무시.

미디어 타입

• 우리가 알아야 할 타입은 all, print, screen 정도. 그 중에서도 screen이 거의 대부분
• 화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속하기 때문에
• print 타입도 간혹 사용
• all 타입은 모든 미디어에 적용되는 타입. 미디어를 구분하는 용도가 아니기 때문에 유용하게 사용되지는 않음

미디어 특성

• 알아야 할 특성은 width와 orientation 정도.
• width는 뷰포트의 너비, 즉 브라우저 창의 너비.(스크린의 크기 x)
• orientation은 미디어가 세로모드인지 가로모드인지를 구분
• 미디어 쿼리에서는 이 구분을 width와 height 특성의 값을 비교해서 height가 width보다 같거나 크면 세로모드 반대인 경우에는 가로모드라고 해석
• 세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭

미디어 쿼리 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*
 ;
 
위 Syntax를 요약하면
media_query_list
    : 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분

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

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

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

• 참고로 Syntax는 전부 이해할 필요는 없지만 일부 기호는 알아두면 좋음.

[ a ] : a가 나올 수도 있고 나오지 않을 수도 있습니다.
a | b : a 또는 b 둘 중에 하나를 선택합니다.
"|"는 파이프 라인 기호로 키보드의 역슬래시(\) 키를 Shift 키를 누른 채로 누르면 나옴.
a? :  a가 0번 나오거나 1번만 나올 수 있음
a* : a가 0번 나오거나 그 이상 계속 나올 수 있음
media_type : all, screen, print 등 명세에 정의된 미디어 타입
media_feature : width, orientation 등 명세에 정의된 미디어 특성

min-/max- 접두사

• 미디어 특성은 이름 앞에 min- 또는 max- 접두사를 붙일 수 있음.
• 실제로 반응형 사이트를 제작할 때는 보통 접두사를 붙여서 사용
• 접두사를 붙이지 않고 사용하는 경우 대부분 효율적이지 못하기 때문
• 예를 들어 대부분의 반응형 사이트는 width 특성을 이용하는데, 접두사 없이 width: 00px 이라고 하게 선언하면 정확히 뷰포트의 크기가 00px 에서만 적용되기 때문에, 다양한 기기들을 대응하기 힘듬.

예제 코드

@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를 이용한 방법을 가장 많이 사용하며 나머지 2가지 방법은 거의 쓰이지 않음

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

<link rel="stylesheet" media="screen and (color)" href="example.css">
   : <link> 태그의 media 속성에 미디어 쿼리를 선언. 미디어 쿼리가 참이면 뒤에 css 파일 규칙이 적용.

@import url(example.css) screen and (color);
    : CSS 파일 내부에 또는 <style> 태그 내부에 사용가능. @import문 뒤에 미디어 쿼리를 선언

1. 디스플레이 크기에 따른 body요소의 background-color 변경

모바일 중심의 사이트라면(모바일 first) 모바일에 해당하는 조건의 배경 색상을 기본으로 선언하면 되고,
데스크탑 중심의 사이트라면(데스크탑 first) 데스크탑에 해당하는 조건의 배경 색상을 기본으로 선언해놓으면 됨

/* mobile first*/
body { background-color: gold; }
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (min-width: 1025px) {
	body { background-color: lightpink; }
}

/* desktop first*/
body { background-color: lightpink; }
@media (min-width: 768px) and (max-width: 1024px) {
	body { background-color: lightblue; }
}
@media (max-width: 767px) {
	body { background-color: gold; }
}

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

세부 조건

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

미디어 타입 print를 이용하면, 인쇄될 경우에 적용되는 스타일을 추가할 수 있음
먼저 앵커 요소의 url을 텍스트 뒤에 붙여서 나타나게 하고, 링크임을 표시해주는 밑줄도 제거
웹 페이지를 인쇄할 경우에는 앵커 요소가 가리키는 url을 문서에 같이 출력해주는게 내용을 이해하는데 훨씬 좋음
실제 인쇄를 하지 않더라도 브라우저에서 제공하는 인쇄 미리보기 기능을 이용하면 화면으로 확인이 가능

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

Viewport의 이해

• 스마트폰 이전 시대에는 대부분의 웹 페이지가 데스크탑 모니터 사이즈를 고려해서 제작되었기 때문에 모바일 기기처럼 작은 화면에서는 모두 보이지 않아 좌우로 스크롤을 해야만 내용을 볼 수가 있었음
• 그래서 모바일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작했음. (기기마다 다르지만 대부분 일반적인 데스크탑 모니터 사이즈와 비슷하게 대부분 980px 입니다.)
• 여기에서 실제 우리가 보는 스마트폰의 스크린 사이즈(device-width/height)와 브라우저가 화면을 나타내는 가상의 화면 사이즈(viewport)의 차이가 생기게 됨.
• 기본 뷰포트의 크기가 980px이기 때문에 width가 980px 정도인 웹 페이지를 모바일 브라우저로 보게 되면 가로 스크롤 없이 딱 화면에 맞춰 나오게 됨 그렇게 되면 스크롤 하지 않아도 내용이 다 보여지는 장점이 있지만 글자나 그림들이 그 폭에 맞춰서 작아지기 때문에 가독성이 매우 떨어짐.
• 그래서 모바일 safari에서 뷰포트를 설정할 수 있는 태그를 도입해서 뷰포트의 크기와 스케일을 조정할 수 있게 했음.

뷰포트 설정

• 뷰포트를 설정하는 태그는 태그로 태그에 위치해야 함
• name 속성에 "viewport"라고 선언하며 content 속성에 뷰포트를 설정하는 내용이 들어감.

<meta name="viewport" content=" 뷰포트의 설정 값" >
content에는 몇 가지 설정을 할 수 있습니다.

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

대부분의 모바일 웹 사이트의 뷰포트 설정은 아래와 같음. 기타 다른 설정은 필요에 따라 하시면 됨.
<meta name="viewport" content="width=device-width, initial-scale=1.0">