미디어 쿼리

화면 넓이가 600px 이하가 되면 배경 색상이 분홍색으로 변경됩니다.

"> 13-01_media-queries

미디어 쿼리

화면 넓이가 600px 이하가 되면 배경 색상이 분홍색으로 변경됩니다.

"> 13-01_media-queries

미디어 쿼리

화면 넓이가 600px 이하가 되면 배경 색상이 분홍색으로 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>13-01_media-queries</title>
<!--
	  # 반응형 웹
	  - 화면 해상도에 따라서 가로쪽이나 배치를 변경하여 디자인하는 방법
	  
	  # 미디어 쿼리
	  - 사용하는 기기에 따라서 style을 지정. 
-->
<style type="text/css">
body {
	background-color: skyblue;
}
@media only screen and (max-width: 1023px){
	body {
		background-color: blue;
	}
}

@media only screen and (max-width: 600px){
	body {
		background-color: pink;
	}
}

</style>
</head>
<body>
	<h1>미디어 쿼리</h1>
	<br>
	<p>화면 넓이가 600px 이하가 되면 배경 색상이 분홍색으로 변경됩니다.</p>
</body>
</html>