• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS3 Media Query</title>
7
    <style>
8
        body { background-color: darkorange; }
9
        @media screen and (min-width: 480px) {
10
            body {
11
                background-color: lightblue;
12
            }
13
        }
14
    </style>
15
</head>
16
​
17
<body>
18
​
19
    <h1>미디어 쿼리를 이용한 뷰포트별 배경색 설정</h1>
20
    <p>뷰포트의 너비가 480픽셀이거나 그 이하일 경우에는 배경색을 darkorange로 표현해 줍니다.<br>
21
        하지만 뷰포트의 너비가 그 초과일 경우에는 배경색을 lightblue로 바꿔서 표현해 줍니다.
22
    </p>
23
    <p>웹 브라우저의 크기를 줄여서 확인해 보세요!</p>
24
​
25
</body>
26
​
27
</html>