[반응형] 미디어 쿼리(Media Queries) ＆뷰포트(Viewport)

미디어 쿼리(Media Queries)

- 컴퓨터나 기기의 환경 또는 종류를 감지하여 웹사이트를 변경하는 기술 

- 기기의 종류뿐만 아니라 해상도, 비트 수, 가로, 세로 여부 등을 감지할 수 있는 기술 (CSS3의 속성)

@media [only 또는 not] [미디어 유형] [and 또는 콤마(,)] (조건문) {실행문}

/*

@media : 미디어 쿼리 문법의 시작 

[only 또는 not]  : not 다음에 오는 조건 부정
ex) not tv = tv를 제외한 모든 미디어 유형

[and 또는 콤마(,)] 
and: 앞뒤 조건이 모두 참일때
콤마(,): 두 조건중 하나라도 참일때

(조건문): 조건문이 참일때 뒤의 실행문 실행 

{실행문} :앞의 조건들이 참일때 실행되는 실행문

*/

/*사용 예시*/
<link rel="stylesheet" href="mediaqueries.css">
<link rel="stylesheet" media="all and (min-width:320px)" href="mediaqueries.css">

@import url("mediaqueries.css") all and (min-width:320px);

<style>
@media all and (min-width:320px){실행문}
</style>

 

*미디어 유형

기기명	설명
all	모든 장치
print	인쇄 장치
screen	컴퓨터 화면 장치 또는 스마트 기기의 화면
tv	영상과 음성이 동시에 출력되는 장치
projection	프로젝터 장치
handheld	손에 들고 다니는 소형 장치
speech	음성 출력 장치
aural	음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)
embossed	점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내는 장치)
tty	디스플레이 기능이 제한된 장치
braille	점자 표시 장치

 

 

뷰포트(Viewport)

: 화면에 보이는 영역을 제어하는 기술

 

<meta name="viewport" 
content="width=device-width, 
initial-scale=1, 
minimum-scale=1, 
maximum-scale=1, 
user-scalable=no">

/* 

width : 뷰포트의 너비 설정
initial-scale : 초기 배율 설정하는
minimum-scale : 최소 축소 비율 설정
maximum-scale : 최대 확대 비율 설정
user-scalable : 확대/축소 여부 설정

*/

 

출처 : Do it! 반응형 웹 만들기 / 이지스 퍼블리싱