©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>CSS3 Media Query</title>
	<style>
		body { background-color: darkorange; }
		@media screen and (min-width: 480px) {
			body {
				background-color: lightblue;
			}
		}
	</style>
</head>

<body>

	<h1>미디어 쿼리를 이용한 뷰포트별 배경색 설정</h1>
	<p>뷰포트의 너비가 480픽셀이거나 그 이하일 경우에는 배경색을 darkorange로 표현해 줍니다.<br>
		하지만 뷰포트의 너비가 그 초과일 경우에는 배경색을 lightblue로 바꿔서 표현해 줍니다.
	</p>
	<p>웹 브라우저의 크기를 줄여서 확인해 보세요!</p>

</body>

</html>