미디어 쿼리

1. 미디어 쿼리란?

 

미디어 쿼리는 사용자가 사이트에 접속하는 미디어 유형에 따라 적용하는 CSS 를 별도로 주기 위하여 사용하는 모듈이다.

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

1️⃣ and : 조건을 두 가지 이상을 작성할 때에 구분자로 사용하는 키워드이다.
2️⃣ , 쉼표 : 동일한 스타일 유형을 사용할 미디어 유형 또는 조건이 있다면 쉼표로 추가한다.
3️⃣ only : 미디어 쿼리를 지원하는 브라우저에서만 조건을 인식하게 한다.
4️⃣ not : not 다음에 지정된 미디어 유형은 제외한다.

📌미디어 유형의 종류

자주 사용하는 미디어 유형은 다음과 같다.

1️⃣ print : 인쇄 장치 : [ctrl + p] 화면에서 볼 수 있는 화면의 CSS를 지원한다.
2️⃣ screen : 컴퓨터 스크린(스마트폰 스크린 포함)

 

 

2. 미디어 쿼리의 조건

 

1️⃣ 웹 문서의 너비

 

웹 문서의 내용이 화면에 보이는 영역을 뷰포트라고 하며 이 너비를 미디어 쿼리의 조건으로 활용할 수 있다.

1️⃣ width : 웹 페이지의 너비
2️⃣ min-width : 웹 페이지 최소 너비
3️⃣ max-width : 웹 페이지 최대 너비

📌 height 설정

screen 이 아닌 미디어 유형에서는 스크롤을 포함한 높이를 지정할 수 있지만,

print 유형에서는 한 페이지 높이를 기준으로 한다.

 

예를 들어 뷰포트의 너비가 300px 이상이고 600px 이하일 때의 CSS 를 적용하고자 하면 다음과 같이 작성할 수 있다.

@media all (min-width:300px) and (max-width:600px) {
}

    <style>
        body {
            background: url(images/bg0.jpg) no-repeat fixed;
            background-size: cover;
        }
        @media screen and (max-width:1024px) {
            body {
            background: url(images/bg1.jpg);
            }
        }
        @media screen and (max-width:768px) {
            body {
            background: url(images/bg2.jpg);
            }
        }
        @media screen and (max-width:320px) {
            body {
            background: url(images/bg3.jpg);
            }
        }
    </style>

기본 이미지

최대 1024px 이미지

최대 768px 이미지

최대 320px 이미지

 

2️⃣ 단말기 너비

 

웹 문서와 단말기는 해상도의 차이가 있기 때문에 따로 작성하는 것이 좋다.

📌 단말기 크기와 뷰포트 크기를 통일해 사용하기 위하여 뷰포트 지정시 width=device-width 로 지정하여 사용한다.

단말기에서는 너비 값 조정을 위하여 다음과 같은 속성을 사용할 수 있다.

1️⃣ device-width : 단말기의 가로 너비
2️⃣ min-device-width : 단말기의 최소 너비
3️⃣ max-device-width : 단말기의 최대 너비

예를 들어 320px 너비 일 때 적용 가능한 CSS 는 다음과 같이 작성한다.

@media all and (min-device-width:320px) {
}

 

 

3️⃣ 화면 회전

 

스마트폰 또는 태블릿의 경우 단말기의 방향에 따라 가로, 세로 회전을 하게 된다.

1️⃣ orientation:portrait : 단말기 세로 방향
2️⃣ orientation:landscape : 단말기 가로 방향

화면이 가로 방향일 때에는 주황색, 세로 방향일 떄에는 노란색으로 배경색이 되는 코드를 작성해보자.

가로 방향

세로 방향

단말기 방향이 가로 세로로 바뀌는 것은 화면의 너비가 달라진다는 것이다. 

너비가 높이에 비하여 클 경우 가로 방향이 되는 것이고,

너비가 높이에 비하여 작은 경우 세로 방향이 되는 것이다.