[Web/CSS] CSS - 미디어 쿼리

✏️ 미디어 쿼리(Media Queries)

사이트에 접속하는 장치에 따라서 특정한 CSS 스타일을 사용하는 방법 미디어 쿼리를 사용함으로써 접속하는 기기의 화면 크기에 따라서 레이아웃이 달라짐 / 즉, 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법을 뜻함

 

✏️ 미디어 쿼리 구문

@media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정

<style>과 </style>사이에 사용하며 대소문자 구분x, 미디어 유형을 지정해야 하며 and 연산자로 조건 적용
기본형  => @media [only | not ] 미디어 유형 [and 조건] * [and 조건]

only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음
not : not 다음에 지정하는 미디어 유형을 제외. 
and : 조건을 여러 개 연결해서 추가할 수 있음

 

✏️ 미디어 유형의 종류

종류	설명
all	모든 미디어 유형에서 사용할 CSS를 정의
print	인쇄 장치에서 사용할 CSS를 정의
screen	컴퓨터 스크린에서 사용할 CSS를 정의 스마트폰의 스크린도 포함
tv	음성과 영상이 동시에 출력되는 TV에서 사용할 CSS를 정의
aural	음성 합성 장치(주로 화면을 읽어 소리로 출력해주는 장치)에서 사용할 CSS를 정의
braille	점자 표시 장치에서 사용할 CSS를 정의
handheld	패드처럼 손에 들고 다니는 장치를 위한 CSS를 정의
projection	프로젝터를 위한 CSS를 정의
tty	디스플레이 기능이 제한된 장치에 맞는 CSS를 정의 / 이런 장치에서는 픽셀 단위 사용 불가
embossed	점자 프린터에서 사용할 CSS를 정의

 

✏️ 웹 문서의 가로 너비와 세로 높이 속성

뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있음, 높잇값은 미디어에 따라 달라지므로 주의

종류	설명
width, height	웹 페이지의 가로 너비, 세로 높이를 지정
min-width, min-height	웹 페이지의 최소 너비, 최소 높이를 지정
max-width, max-height	웹 페이지의 최대 너비, 최대 높이를 지정

 

ex) 너비가 1440px 이상일 때 미디어 쿼리 적용하기

@media screen and(min-width:1440px){}

 

✏️ 단말기의 가로 너비와 세로 높이 속성

대부분의 단말기(device)의 해상도와 실제 브라우저의 너비가 다르므로 단말기 너비와 높이를 고려해 미디어 쿼리 작성

종류	설명
device-width, device-height	단말기의 가로 너비, 세로 높이를 지정
min-device-width, min-device-height	단말기의 최소 너비, 최소 높이를 지정
max-device-width, max-device-height	단말기의 최대 너비, 최대 높이를 지정

 

✏️ 화면 회전 속성

스마트폰이나 태블릿에서는 화면을 세로로 보거나 가로로 돌려서 볼 수 있는데, 미디어 쿼리의 orientation 속성을 사용하면 기기의 방향을 확인할 수 있고, 그에 따라서 웹 사이트의 레이아웃을 바꿀 수 있음

종류	설명
orientation: portrait	단말기의 세로 모드를 지정
orientation: landscape	단말기의 가로 모드를 지정

 

ex) 단말기를 가로로 돌릴 경우에 미디어 쿼리 작성

@media screen and(min-device-width: 812px) and (orientation: landscape){}

 

✏️ 미디어 쿼리의 중단점

미디어 쿼리를 작성할 때 화면 크기에 따라 서로 다른 CSS를 적용할 분기점을 중단점이라고 함 중단점을 어떻게 지정하느냐에 따라 CSS가 달라지고 레이아웃이 바뀌는데, 대부분 기기의 화면 크기를 기준으로 함 그리고 처리 속도나 화면 크기 등에서 다른 기기보다 모바일의 제약조건이 많아 모바일의 레이아웃을 기본으로 하여 CSS를 만든 후 사양이 좀 더 좋고 화면이 큰 태블릿이나 데스크톱에 맞추는데 이를 모바일 퍼스트 기법이라고 함

장치
스마트폰	모바일 페이지는 미디어 쿼리를 사용하지 않고 기본 CSS로 작성 / 스마트폰의 방향까지 고려한다면 min-width의 세로와 가로를 각각 portrait 320px, landscape 480px로 제작
태블릿	세로 크기가 780px이상이면 태블릿으로 지정 / 가로 크기는 1024px 이상으로 지정
데스크톱	화면 크기가 1024px 이상이면 데스크톱으로 지정

 

✏️ 미디어 쿼리 적용하기

1. 외부 CSS 파일 연결하기

=> 각 조건별로 CSS 파일을 따로 저장한 뒤 <link> 태그나 @import 문을 사용해서 연결

기본형  => <link rel = "stylesheet" media="미디어 쿼리 조건" href="CSS 파일 경로">

기본형 => @import url(CSS 파일 경로) 미디어 쿼리 조건

 

2. 웹 문서에 직접 정의하기

=> 내부 스타일 시트 작성 방식이라고 생각하면 됨

기본형 => <style media="<조건>" { <스타일 규칙> } </style>

기본형 => <style> @media <조건> { <스타일 규칙> } </style>

 

 

✏️ 알아두면 좋을 것들

모바일 기기의 뷰포트 크기를 찾아볼 수 있는 곳 + 여러 상황에 맞는 미디어 쿼리 소스도 제공해줌

https://yesviz.com/devices.php#google_vignette

Viewport Size, Resolution, Screen Sizes, CSS PPI and CSS media queries for popular Devices | YesViz

 

<link> 태그와 @import 문은 모두 외부에서 CSS 파일을 가져와 사용하는 방법이다. CSS 파일이 한두개밖에 없다면 속도나 처리 면에서 큰 차이가 없지만, 인터넷 익스플로러의 경우 @import 문과 자바스크립트가 함께 있을 경우 자바스크립트를 먼저 내려받은 후에 @import 문에 있는 CSS를 다운로드 하게 됨. 그래서 자바스크립트에서 스타일과 관련된 정보를 처리해야 할 경우 오류가 날 수도 있기 때문에 CSS 파일이 많고 규모가 큰 사이트를 개발한다면 @import 문보다 <link> 태그를 주로 사용한다