미디어 쿼리

미디어 쿼리

1. 미디어 쿼리

  - 화면의 크기나 환경에 따라 웹사이트를 변경하는 기술

 

2. 기본 문법

 - 미디어 쿼리를 작성할 때는 기본적인 순서와 규칙을 따라야 함

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

 - @media : 미디어 쿼리 문법의 시작을 알리는 부분

 - [only 또는 not]

    - only 키워드 : 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석하게 해주는 키워드

    - not 키워드 : not 다음에 오는 조건을 부정하는 키워드

 - 미디어 유형 : 미디어별로 적용할 CSS를 따로 작성함. 미디어 유형은 다음과 같음

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

 

 - [and 또는 , 콤마 ] : and는 앞뒤 조건이 참일 때, ', 콤마'는 앞뒤 조건 중 하나라도 참일 때를 의미 (논리연산자같은 역할)

 - (조건문) : 조건문이 사실일 때, 실행하라는 의미. and나 콤마 기호를 사용하여 두 가지 이상 작성 가능

조건문	설명
width	웹 페이지의 가로 너빗값
height	웹 페이지의 세로 높잇값
device-width	기기의 가로 너빗값
device-height	기기의 세로 높잇값
orientation	기기의 화면 방향
aspect-ratio	화면 비율
device-aspect-ratio	단말기의 화면 비율
color	기기의 비트 수
color-index	기기의 색상 수
monochrome	기기가 흑백일 때, 픽셀 당 비트 수
resolution	기기의 해상력
scan	TV의 스캔 방식
grid	기기의 그리드/비트맵

 

 - {실행문} : 앞의 조건들이 사실일 때, 실행되는 부분 (일반적으로 CSS 코드를 작성)

 

3. 미디어 쿼리 적용

    ※ 미디어 쿼리를 <link> 태그로 연결하면 속도 및 관리면에서 효율적임

See the Pen Tistory_Front-End Study_반응형 웹_미디어 쿼리_2. 미디어 쿼리 적용 by NewBean0312 (@newbean6775) on CodePen.

 

4. 미디어 쿼리로 웹사이트 구조 변경

See the Pen Untitled by NewBean0312 (@newbean0312) on CodePen.