# 미디어쿼리
■ 미디어쿼리
각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것
@media(at media)
@media mediaqueries { /* style rules */ }미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있음
□ 미디어 타입
- all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
□ 미디어 특성
- width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
width는 뷰포트의 너비, 즉 브라우저 창의 너비를 말함(스크린의 크기 x)
orientation은 미디어가 세로모드인지 가로모드인지를 구분
■ 미디어 쿼리 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 둘 중에 하나를 선택합니다.
"|"는 파이프 라인 기호로 키보드의 역슬래시(\) 키를 Shift 키를 누른 채로 누르면 나옵니다. - a? : a가 0번 나오거나 1번만 나올 수 있음
- a* : a가 0번 나오거나 그 이상 계속 나올 수 있음
- media_type : all, screen, print 등 명세에 정의된 미디어 타입
- media_feature : width, orientation 등 명세에 정의된 미디어 특성
media_query_list
: 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분
media_query
: A 형태 - 미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있음
미디어 타잎 앞에는 only 또는 not 키워드가 올 수 있음
미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있음
: 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)에는 영향이 없음.
미디어 쿼리 선언 방법
참고로 @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문 뒤에 미디어 쿼리를 선언
■ 뷰포트 설정
뷰포트를 설정하는 태그는 <meta> 태그로 <head> 태그에 위치해야함
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">
