미디어쿼리
- 각 미디어 매체(모니터와 같은 스크린 매체, 프린트, 스크린 리더기 등)에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것
미디어 쿼리 선언문
@media (at media)
미디어 타입
- all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
- 화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속하기 때문에 현실적으로 고려해야하는 미디어들은 전부 여기에 해당됨
미디어 특성
- width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
- width: 뷰포트의 너비, 즉 브라우저 창의 너비
- orientation: 미디어가 세로모드인지 가로모드인지 구분 (세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭)
Syntax
- media_query_list
- 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분한다
- media_query
- A 형태 - 미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있습니다. 미디어 타잎 앞에는 only 또는 not 키워드가 올 수 있다 미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있음
- B 형태 - 미디어 타입 없이 미디어 표현식이 바로 나올 수 있다 (미디어 타입이 명시되지 않으면 all로 간주). 미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있다
- expression
- 미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어진다. 이름과 값은 : 기호로 연결한다. 또, 값이 없이 특성 이름만으로도 작성할 수 있다.
자주 쓰이는 기호
[ 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 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문 뒤에 미디어 쿼리를 선언하면 된다.
예제 코드
@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)에는 영향이 없다
