[media_query.html 파일 ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>미디어 쿼리 예제</title>
<link href = "mobile.css" rel="stylesheet" type = "text/css" media ="screen and (max-width:799px)">
<link href = "desktop_pc.css" rel="stylesheet" type = "text/css" media ="screen and (min-width:800px)">
</head>
<body>
<h1> 미디어 쿼리 연습 </h1>
<div id="pc_view">
<h2> 데스크톱 pc 화면 </h2>
<p>브라우저의 너비를 800px보다 작게 줄여보세요 </p>
<p>배경이 검정색에 글자가 흰색으로 바뀔겁니다.</p>
</div>
<div id="mobile_view">
<h2> 모바일 화면 </h2>
<p>브라우저의 너비를 800px보다 크게 늘려보세요 </p>
<p>배경이 검정색에 글자가 검정색으로 바뀔겁니다.</p>
</div>
</body>
</html>
[mobile.css 파일]
@charset "utf-8";
body
{
color:#FFF;
background-color:#000;
}
#mobile_view{
display:none;
}
[desktop_pc.css 파일]
@charset "utf-8";
body
{
background-color:#fff;
}
#pc_view{
display:none;
}
[실행 화면]
'프로그래밍 > HTML' 카테고리의 다른 글
| PHP 출생년도 select option 반복분 (0) | 2015.12.26 |
|---|---|
| HTML에 CSS를 적용하는 방식(3가지) (0) | 2015.08.04 |
| 반응형 웹(Responsive Web) 개념 및 예제 (0) | 2015.08.04 |
| [HTML] 텍스트 입력박스, 비밀번호 입력박스, 라디오 버튼, 콤보 박스, 체크 박스, 여러행 텍스트 (0) | 2014.05.12 |
