[CSS] #5-1 미디어쿼리(Media Queries)

1. 미디어쿼리?

 

 다양한 디바이스들이 웹브라우징을 지원하면서 어느 때는 데스크톱 화면, 어느 때는 테블릿 화면, 어느 때는 핸드폰 화면에 페이지를 출력해야하는 경우가 늘었다.

 그러면서 반응형 웹디자인이라는 개념이 생겼다. 어느 화면에서도 반응하여 디자인의 구성을 적용하는 것 말이다.

 이것의 가장 기본이 되는 것이 바로 CSS의 미디어 쿼리(Media Query)이다.

 

 쿼리, 구글에 검색해보니 '질문'이라는 뜻이라고 알려준다.

 

 즉, 미디어 쿼리는 미디어에 대한 무언가를 요청하는 것이다.

 어느 때?

 화면 크기가 달라졌을 때 그에 맞춰서 미디어도 표현해달라고 하는 요청 말이다.

 보통은 스마트폰, 태블릿, PC 화면 이렇게 3개의 화면으로 구분해주며 화면 크기가 변할 때 스타일을 바뀌도록 해서 반응형 웹을 구현할 수 있게 해주는 방식이다.

 

반응형 웹 디자인(Responsive Web Design ; RWD)?
 - 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.
 - 디바이스 별로 각각 레이아웃(grid)이 달라지는 웹이다.

 

2. 미디어 쿼리의 기본 문법

 

 미디어 쿼리의 문법 구조는 @media 키워드로 시작한다.

 즉 @media가 적히면 지금부터 미디어 쿼리를 시작하겠다는 뜻이다.

@media (조건) {
  스타일
}

 여기서 스타일 부분에는 CSS의 코드가 들어가는데 조건 부분이 만족될 때만 스타일에 적힌 CSS 코드가 적용되는 방식이다.

 

 아래의 코드를 살펴보자.

<style>
    @media screen {
        div{
        width: 100%;
        height: 200px;
        font-size: 12px;
        border: 2px solid green;
        }
    }

    @media print {
        div{
            width: 100%;
            height: 200px;
            font-size: 12px;
            border: 2px solid yellow;
        }
    }
</style>

 

 @media를 통해 미디어 쿼리를 구현했는데 이 코드 안에서는 screen | print 두 가지 경우를 구현했다.

 

 1) @media screen 은 컴퓨터, 태블릿, 핸드폰에서 보는 경우에 출력할 화면을 다음과 같이 적용하라는 의미이다.

 2) @media print 는 인쇄할 시에 출력할 화면을 다음과 같이 적용하라는 의미이다.

 

 이처럼 미디어쿼리는 조건을 먼저 표기하고, 그 조건에 부합할 시 아래의 스타일을 적용하는 방식으로 적용이 된다.