<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, maxinum-scale=1, initial-scale=1.0">
<title>Document</title>
<!-- 데스크톱, 스마트폰, 태블릿PC에 반응형 적용 -->
<style>
/* 미디어 쿼리 작성 순서 : 브라우저 기본 */
* {
margin: 0;
padding: 0;
}
body {
background-color: skyblue;
width: 960px;
margin: 0 auto;
overflow: hidden;
}
/*
#menu {
float: left;
width: 260px;
}
#section {
with: 700px;
float: right;
}
*/
#menu li {
list-style: none;
float: left;
width: 200px;
height: 40px;
background: black;
color: white;
text-align: center;
line-height: 40px;
}
#section {
clear: both;
}
/* 스마트 폰 */
@media screen and (max-width: 767px) {
body {
background-color: pink;
width: auto;
}
/*
#menu {
float: none;
width: auto;
}
#section {
with: auto;
float: none;
}
*/
#menu li {
list-style: none;
float: none;
width: 100%;
height: 40px;
background: red;
color: white;
text-align: center;
line-height: 40px;
}
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>MenuA</li>
<li>MenuB</li>
<li>MenuC</li>
<li>MenuD</li>
</ul>
</div>
<div id="section">
<h1>반응형 구현 홈페이지</h1>
<h3>What are CSS Animations?</h3>
<p>
An animation lets an element gradually change from one style to another.<br/>
You can change as many CSS properties you want, as many times as you want.<br/>
To use CSS animation, you must first specify some keyframes for the animation.<br/>
Keyframes hold what styles the element will have at certain times.<br/>
</p>
</div>
</body>
</html>