Programming/HTML CSS
[반응형] 미디어 쿼리(Media Queries) &뷰포트(Viewport)
dev?
2020. 4. 28. 10:40
반응형
미디어 쿼리(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 |
모든 장치 |
인쇄 장치 | |
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! 반응형 웹 만들기 / 이지스 퍼블리싱
반응형