미디어 쿼리는 오래전 미디어 타입이라는 이름으로 등장했었습니다. 미디어 타입은 말 그대로 미디어의 종류만 감지했기 때문에 세부적인 사항까지는 알지 못했습니다. 또, 옛날에는 기기의 종류가 많지도 않아 사용성에 의구심을 갖는 사람들이 많아 거의 사용하지 않았던 기술입니다.
하지만, CSS3가 등장하면서 이 미디어 타입이라는 기술이 ‘미디어 쿼리’라는 이름과 함께 기기의 종류뿐 아니라 해상도, 비트 수, 가로, 세로 여부 등 세부사항까지 감지할 수 있는 기술로 탈바꿈을 하게 됩니다. 기기의 세밀한 부분까지 감지할 수 있어져 반응형 웹의 시작과 함께 웹 개발의 새로운 지평을 열었다는 찬사도 받습니다.
미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나입니다. 반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환할 수 있습니다.
기본 문법
미디어 쿼리를 작성할 때는 기본적인 순서와 규칙을 따라야 합니다. 필요에 따라 미디어 유형과 and 또는 , 콤마 논리 연산자로 조건을 적용할 수 있습니다.
@media [only 또는 not] [미디어 유형] [and 또는 ,] (조건문) {실행문}
[only 또는 not]
only 키워드는 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드입니다. not 키워드는 not 다음에 따라오는 조건을 부정하는 키워드입니다. 예를 들어 ‘not tv’ 일 경우 tv를 제외한 모든 미디어 유형에만 적용합니다.
[미디어 유형]
미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하는 것이므로 @media 속성 다음에 미디어 유형을 알려줘야 합니다. 미디어 유형은 생략이 가능하며 생략 시에는 all키워드처럼 작동합니다.
| 기기명 | 설명 |
| all | 모든장치 |
| 인쇄 장치 | |
| screen | 컴퓨터 화면 장치 또는 스마트 기기의 화면 |
| tv | 영상과 음성이 동시에 출력되는 장치 |
| projection | 프로젝터 장치 |
| handheld | 손에 들고다니는 소형 장치 |
| speech | 음성 출력 장치 |
| aural | 음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치) |
| embossed | 점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내는 장치) |
| tty | 디스플레이 기능이 제한된 장치 |
| braille | 점자 표시 장치 |
[and 또는 ,]
and는 앞뒤 조건이 모두 사실일 때 뒤에 따라오는 것을, “ , ”는 앞뒤 조건 중 하나만 사실이더라도 뒤에 따라오는 것을 해석하라는 의미입니다. 이 역시 생략 가능합니다.
@media A and B {실행문}
@media A , B {실행문}
(조건문)
(조건문)은 조건문이 사실일 때 뒤에 따라오는 것을 해서 하라는 의미입니다. (조건문)은 and나 콤마 기호를 이용하여 두 가지 이상 작성할 수 있으며 생략도 가능합니다.
@media (min-width:320px){실행문}
@media (min-width:320px) and (max-width:768px){실행문}
| 조건문 | 설명 | 조건값 | Min/max 사용 여부 |
| width | 웹페이지의 가로 너빗값 | Width 속성에서 사용할 수 있는 모든 속성값 | O |
| height | 웹 페이지의 세로 높잇값 | ||
| Device-width | 기기의 가로 너빗값 | ||
| Device-height | 기기의 세로 높잇값 | ||
| orientation | 기기의 화면 방향 | Portrait(세로) Landscape(가로) |
X |
| Aspect-ratio | 화면 비율 | 브라우저 화면 비율 (1) 브라우저 종횡비 (16/9) 기기 해상도 (640/320) |
O |
| Device-aspect-ratio | 단말기의 화면 비율 | 기기 화면 비율 (1) 기기 종횡비 (16/9) 기기 해상도(640/320) |
|
| color | 기기의 비트 수 | 8(bit 단위) | |
| Color-index | 기기의 색상 수 | 128(색상 수 단위) | |
| monochrome | 기기가 흑백일 때 픽셀당 비트 수 | 1(bit 단위) | |
| resolution | 기기의 해상도 | 300dpi/dpcm | |
| scan | TV의 스캔 방식 | Progressive/interlace | X |
| grid | 기기의 그리드/비트맵 | 0(비트맵 방식)/1(그리드 방식) |
{실행문}
{실행문}은 앞의 조건들이 모두 사실일 때 실행되는 실행문입니다. {실행문}에는 일반적으로 사용하는 CSS 코드를 작성합니다.
미디어 쿼리 적용 방법
1. 링크 방식
미디어 쿼리를 적용하려면 CSS파일 내에 미디어 쿼리를 작성해서 <link></link> 태그로 CSS파일을 연결하여 적용해야 합니다. 이 방식은 HTML 파일과 CSS 파일을 별도로 관리하므로 불러오는 속도도 빠르고 관리 면에서 효율적입니다.
<link rel="stylesheet" href="mediaqueries.css">
2. 링크 방식 2
링크 방식 2는 <link></link> 태그에 직접 미디어의 종류와 조건문 등을 작성하고 적용할 CSS파일을 연결하는 방식입니다. 조건이 여러 개로 나눠지게 되면 그만큼 CSSCSS 파일의 개수도 늘어나게 되어 CSS 파일을 여러 번 불러와 웹사이트 속도가 느려질 수 있습니다.
<link rel="stylesheet" media="all and (min-width:320px)" href="mediaqueries.css">
3. 문서 내에서 작성하는 방식
문서 내에 작성하는 방식은 HTML 문서 내에 미디어 쿼리를 작성하는 방식입니다. CSS 코드를 문서 내에 작성하게 되면 문서의 용량이 커지고, 커진 용량으로 인하여 속도가 느려집니다. 처음 웹사이트를 개발할 때는 구조를 확인하면서 어디에 스타일을 적용할지를 동시에 보면서 작성할 수 있기 때문에 작업 효율이 높아집니다.
<head>
<style>
@media all and (min-width:320px){실행문}
</style>
</head>
<body>
</body>
4. 임포트 방식
임포트 방식은 CSS 파일 내에서 CSS 파일을 불러오는 방식이다. 조건이 늘어나게 되면 여러 개의 CSS 파일을 불러와야 해 웹사이트의 속도가 저하된다.
@import url("mediaqueries.css") all and (min-width:320px);
주의사항
띄어쓰기
논리 연산자 중 하나인 and 구문을 사용할 때 and 구문 뒤에는 항상 공백을 한 칸 띄어줘야 합니다. 만약, 공백을 한 칸 띄어주지 않고 미디어 쿼리를 작성하면 정상적으로 작동하지 않습니다.
@media all and (min-width:320px){실행문}
/*올바르게 띄어쓰기 한 구문*/
@media all and(min-width:320px){실행문}
/*올바르지 않게 띄어쓰기 한 구문*/
min/max 사용 시 작성 순서
min을 사용할 때는 반드시 크기가 작은 순서대로 작성해야 하고, max를 사용할 때는 반드시 크기가 큰 순서대로 작성해야 합니다. min을 사용할 때 크기(width)가 작은 순서대로 작성해야 하는 이유는 min은 최소 또는 그 이상이라는 뜻으로, 점차 커지는 것을 의미하기 때문에 반드시 작은 순서부터 큰 순서로 작성해야 합니다. 반대로 max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에 max를 사용할 때는 반드시 큰 순서부터 작은 순서로 작성해야 합니다.
@media all and (min-width:320px){실행문}
@media all and (min-width:768px){실행문}
@media all and (min-width:1024px){실행문}'프로그램 > web' 카테고리의 다른 글
| HTTP, HTTPS란? (0) | 2021.08.13 |
|---|---|
| 뷰포트 (viewport) (0) | 2021.08.04 |
| 반응형 웹의 장단점 (0) | 2021.07.29 |
| 반응형 웹이란? (0) | 2021.07.28 |
| Front-end(프론트엔드)란? (0) | 2021.07.27 |
댓글