<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>반응형 웹 페이지와 @media</title>
<style>
div {
background: #ffe;
border: 1px solid #9cc;
padding: 10px 30px;
}
.flex_font{ font-size: 20px }
@media (max-width: 700px) {
.flex_font{ font-size: 16px }
}
@media (max-width: 600px) {
.flex_font{ font-size: 12px }
}
</style>
</head>
<body>
<div><b>@media 미사용:</b>
웹 브라우저 창을 좌우로 늘이거나 줄여도
폰트의 크기가 변하지 않음</div>
<div class="flex_font"><b>@media 사용: </b>
웹 브라우저 창을 좌우로 늘이거나 줄이면
창 크기에 따라 폰트의 크기가 변함</div>
</body>
</html>
]]>