🔥오늘의 목표🔥
미디어 쿼리란 각 미디어 매체에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것이다.📕 미디어 쿼리(Media Queries)
- 각 미디어 매에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것 (반응형 사이트)
- 한 웹페이지는 다양한 미디어 매체로 보여질 수 있다. ex)스크린리더기, 프린터기, 모니터 등 다양한 매체가 있다.
👉 특정 미디어 매체따라서 특정한 디자인을 적용할 수 있어야한다.
📕 미디어 쿼리 구문 @ media(미디어쿼리문)
@media mediaqueries { }mediaqueries(쿼리문)이 참일때 적용, 거짓이면 적용되지 않음.
📖 mediaqueries (쿼리문)의 종류
-
미디어 타입
: 미디어 매체를 말함.
ex) all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
이 중all,print,screen만 알아두기. -
미디어 특성
: 미디어 매체를 조금 더 자세하게 적용할 수 있음.
ex) width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
이 중width와orientation정도만 알아두기.
📒 미디어 타입 : screen
- 화면을 출력하는 디스플레이가 있는 미디어
📒 미디어 타입 : print
- 실제 프린터나 인쇄미리보기시 잉크 폰트 조정할 때 쓰임.
📒 미디어 특성 : width
- 브라우저 vw의 가로 크기
📒 미디어 특성 : orientation
- 미디어가 가로모드인지, 세로 모드인지
📕미디어 쿼리 구문
📖 기호들 설명
s*: 공백[]: 안의 내용이 있을 수도 있고, 없을 수도 있다는 뜻a|b: a나b 둘 중에 하나는 나와야 한다.a?: a가 0번 나오거나 1번만 나올 수 있음a*: a가 0번 나오거나 그 이상 계속 나올 수 있음media_type: all, screen, print 등 명세에 정의된 미디어 타입media_feature: width, orientation 등 명세에 정의된 미디어 특성
📖 구문 설명
media_query_list
- 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분합니다.
- 없을 수도 있다.
media_query_list
: S* [media_query [ ',' S* media_query ]* ]?media_query
-
A 형태
미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있습니다.
미디어 타잎 앞에는 only 또는 not 키워드가 올 수 있습니다.
미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있습니다. -
B 형태
미디어 타입 없이 미디어 표현식이 바로 나올 수 있습니다.
(미디어 타입이 명시되지 않으면 all로 간주합니다.)
미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있습니다.
media_query
: [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
| expression [ AND S* expression ]*
;expression
- 미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어집니다.
이름과 값은 : 기호로 연결합니다.
또, 값이 없이 특성 이름만으로도 작성할 수 있다.
expression
: '(' S* media_feature S* [ ':' S* expr ]? ')' S*
;📖 미디어 쿼리 구문 예시
@media screen { ... }
- 미디어 타입이 screen이면 적용됩니다.
@media screen and (min-width: 768px) { ... }
- 미디어 타입이 screen이고 width가 768px 이상이면 적용됩니다. 두 개 중 하나라도 만족하지 않으면 거짓이 됩니다.
@media (min-width: 768px)
- 미디어 타입에 관계없이 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)에는 영향이 없습니다.
📖 추가 규칙들
미디어 특성은 이름 앞에 min- 또는 max- 접두사를 붙일 수 있다.
➕ min- : 최소
➕ max- : 최대
숫자의 형태에 들어가는 특성에는 모두 사용이 가능하다.
orientation,grid,scan은 불가능하다orientation : portrait(세로모드) | landscape (가로모드)
width : length📕 미디어 쿼리 선언 방법
@media screen and (color)
- CSS 파일 내부에 또는 html의
<style>태그 내부에 사용가능 합니다.
가장 많이 쓰인다.
<link rel="stylesheet" media="screen and (color)" href="example.css">
<link>태그의 media 속성에 미디어 쿼리를 선언합니다. 미디어 쿼리가 참이면 뒤에 css 파일 규칙이 적용됩니다.
@import url(example.css) screen and (color);
- CSS 파일 내부에 또는
<style>태그 내부에 사용가능 합니다.
@import문 뒤에 미디어 쿼리를 선언하면 됩니다.
🔥오늘의 느낀점🔥
머가 이렇게 복잡하냥