• 코드:
​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
        @media screen {
9
            body {
10
                background-color: black;
11
                color: white;
12
            }
13
        }
14
        @media print {
15
            body {
16
                background-color: white;
17
                color: black;
18
            }
19
        }
20
    </style>
21
</head>
22
​
23
<body>
24
​
25
    <h1>미디어 쿼리를 이용한 기기별 배경색 설정</h1>
26
    <p>웹 브라우저에서 실행하면 배경색을 black으로, 글자색을 white로 표현해 줍니다.<br>
27
        하지만 프린트를 하게 되면 배경색을 white로, 글자색을 black으로 바꿔서 표현해 줍니다.
28
    </p>
29
    <p>웹 브라우저를 프린트해서 확인해 보세요!</p>
30
​
31
</body>
32
​
33
</html>