<!-- 반응형 웹
1.Layout
1)float
2)flexbox
3)css grid x
2.반응형 웹
-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>float 과 미디어 쿼리를 이용한 반응형 웹</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{padding:0;
margin:0;}
body{
background-color: pink
}
#wrapper{
border:1px solid gray;
width:80%;
margin:0 auto;
font-size: 2vw; /*뷰포트 너비가 1000픽셀일 때 font-size: 2vw;를 적용하면 폰트 크기는 20픽셀 */
}
nav li{
list-style: none;
float: left;
border:1px solid gray;
width: 20%;
box-sizing: border-box;
text-align: center;
}
nav ul{
overflow: hidden; /* 경계를 넘어 가면 숨기는 옵션 */
}
header h1{
text-align: center;
margin-bottom: 20px
}
header{
padding:20px 0 0 0;
border:1px solid gray;
}
.content{
padding:10px;
}
footer{
border:1px solid gray;
height:100px;
line-height: 100px;
text-align: center;
}
@media (max-width: 767px) {
body{
background-color: purple
}
#wrapper{
width:100%;
font-size: 2em;
/* 부모 요소의 폰트 크기가 16픽셀일 때 font-size: 2em;를 적용하면 해당 요소의 폰트 크기는 32픽셀
계층 구조에 사용시 일관성 유지
*/
}
nav li{
width:100%;
}
}
@media (min-width:768px) {
body{
background-color: orange;
}
#wrapper{
width:100%;
}
}
@media (min-width: 992px) {
body{
background-color: lightblue;
}
#wrapper{
width:80%;
}
}
@media (min-width: 1200px) {
body{
background-color: #4BF8B7;
}
}
</style>
</head>
<!-- #wrapper>(header>h1+nav>ul>li*4)+div+footer>h1
-->
<body>
<div id="wrapper">
<header>
<h1>Java Web Spring Project</h1>
<nav>
<ul>
<li>Java</li>
<li>Android</li>
<li>Spring</li>
<li>Python</li>
<li>C</li>
</ul>
</nav>
</header>
<div class="content">
<h4>이거 못하면 오늘 집에 못감 !!!</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam perferendis eos distinctio dolore modi vitae quas quia illum culpa consequuntur dolorum, minima rerum sapiente aspernatur nisi voluptas deleniti quam repellendus.</p>
</div>
<footer>
<h6>designed by YunSofEdu</h6>
</footer>
</div>
</body>
</html>