%단위 많이 씀
vw 잘 안씀
PX넣을 때도 범위 지정해서 넣으면 됨
~이상, ~ 이하 범위값을 잘 지정하면 그대로 상속받아서 반복작업을 줄일 수 있음
LOGO
1 2 3
---
더보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>0304_css3_media-예제</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-"/>
<meta name="author" content="-"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1"><!--head 안에만 들어가 있으면 됨/미디어 스크린 ? 할려면 꼭 있어야 함 -->
<style>
/* #1. reset*/
body, div, section, header, footer, nav, h1, aside, article, a, span, ul, li{margin:0; padding:0; box-sizing: border-box }
section, header, footer, nav, aside, article{display: block} /*block요소로 바꾸기*/
body{font-size: 2.5vw; color: #333; font-family: sans-serif }
ul{list-style: none}
a{color:#333; text-decoration: none}
/* [ #2. web 1025 이상 ] */
@media all and (min-width:1025px){
.wrap{width:100%; height: auto; background-color: antiquewhite; text-align: center}
/*header*/
.header{width: 100%; height: 100px; background-color: chocolate; position:relative; padding: 10px 0 0 0}
.header h1{font-size: 1.5vw; height: 40px;}
.header .gnb{background-color: aliceblue}
.header .gnb ul{ width: 80%; margin: 0 auto; overflow: hidden }
.header .gnb ul li{ float:left; font-size: 1vw; line-height: 60px; height:60px; width:20% }
.header .allMenu{display:none} /*보여줄 필요 없어서 display:none 한것임 */
/*container*/
.container{width: 100%; position:relative; height:auto; overflow:hidden}
/*section*/
.container .section{width: 70%; position:relative; height:400px; float:left;
background-color: cornflowerblue }
.section .article_1{height: 180px; width: 90%; margin: 10px auto; background-color: beige}
.section .article_2{height: 180px; width: 90%; margin: 10px auto; background-color: khaki}
/*aside*/
.container .aside{width: 30%; position:relative; height:400px; float:left;
background-color: hotpink}
.aside .banner_1{width: 80%; margin: 20px auto; height: 100px; background-color: darkblue}
.aside .banner_2{width: 80%; margin: 20px auto; height: 100px; background-color: darkgoldenrod}
.aside .banner_3{width: 80%; margin: 20px auto; height: 100px; background-color: darkcyan}
/*footer*/
.footer{height: 100px; width:100%; padding 20px 0 0 0; }
}
/* [ #3. 768이상, 1024이하 ]*/
@media all and (max-width:1024px) and (min-width:768px){
.wrap, .header, .container, .footer{width: 100%; text-align: center} /*100% = 1024px*/
/*header*/
.header{background-color: lightblue; height: 100px; }
.header h1{height: 100px; line-height: 100px;}
.header .gnb ul{display: none} /*menu1 ~ 4 없애기*/
.header .allMenu{
display: block; position: absolute; right: 3%; top: 40px; background-color: cyan;
width:3%;
}
.header .allMenu span{width: 100%; height: 5px; display: block; position: absolute;
background-color: oldlace; /*border: 2px solid red*/ ;
font-size:0; /*폰트 숨기기*/
/*부모에 width를 넣어줘야 반영됨 , 햄버거 메뉴 만들기 */
}
.header .allMenu span:nth-of-type(1){left:0; top:0;}
.header .allMenu span:nth-of-type(2){left:0; top:10px;}
.header .allMenu span:nth-of-type(3){left:0; top:20px;}
/*container*/
.container .section{width: 100%; float:none; background-color: lightcoral; padding: 10px 0; }/*윗 단계에서는 float했었음*/
/*section*/
.section .article_1{ width: 90%; margin: 10px auto; height:180px; background-color: lightgreen}
.section .article_2{ width: 90%; margin: 10px auto; height:180px; background-color: lightsalmon}
/*aside*/
.container .aside{width: 100%; float:none; background-color: lightgreen; padding: 10px 0;
overflow: hidden; /*float 했응게 overflow:hidden*/
}
.aside .banner_1{ width: 30%; height: 100px; float: left; background-color: aqua}
.aside .banner_2{ width: 40%; height: 100px; float: left; background-color: chocolate}
.aside .banner_3{ width: 30%; height: 100px; float: left; background-color: darkkhaki}
/*footer*/
.footer{background-color: lightcoral; height: 100px; }
}
/* [ #4. 320~767 ] */
@media all and (max-width:767px) and (min-width:320px){
.wrap, .header, .container, .footer{width: 100%; text-align: center;}/*조건 내의 값이 100%*/
.header{background-color: blueviolet; height: 100px;}
/* @여기부터*/
.header h1{height: 100px; line-height: 100px; }
.header .gnb ul{display: none} /*메뉴 123 없애기*/
.header .allMenu{
display: block; position: absolute; right: 3%; top: 40px; background-color: cyan;
width:3%;
}
.header .allMenu span{width: 100%; height: 5px; display: block; position: absolute;
background-color: oldlace; /*border: 2px solid red*/ ;
font-size:0; /*폰트 숨기기*/
/*부모에 width를 넣어줘야 반영됨*/
}
.header .allMenu span:nth-of-type(1){left:0; top:0;}
.header .allMenu span:nth-of-type(2){left:0; top:10px;}
.header .allMenu span:nth-of-type(3){left:0; top:20px;}
/* @여기까지 위에 #3.꺼랑 코드 같음*/
.container .section{ width: 100%; float:none; background-color: aqua; padding: 10px 0; }
.section .article_1{width: 90%; height: 180px; background-color: lightcyan; margin: 0 auto; }
.section .article_2{width: 90%; height: 180px; background-color: lightsteelblue; margin: 0 auto; }
.container .aside{width: 100%; float:none; background-color: lawngreen; padding: 10px 0; }
.aside .banner_1{width: 90%; height: 100px; background-color: lightgray; margin: 0 auto;}
.aside .banner_2{width: 90%; height: 100px; background-color: lightyellow; margin: 0 auto;}
.aside .banner_3{width: 90%; height: 100px; background-color: lightgray; margin: 0 auto;}
.footer{height: 100px; background-color: darkolivegreen}
}
</style>
</head>
<body>
<div class="wrap">
<!--header-->
<header class="header">
<h1>LOGO</h1>
<nav class="gnb">
<ul>
<li> <a href="#"> MENU1 </a></li>
<li> <a href="#"> MENU2 </a></li>
<li> <a href="#"> MENU3 </a></li>
<li> <a href="#"> MENU4 </a></li>
<li> <a href="#"> MENU5 </a></li>
</ul>
</nav>
<div class="allMenu">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</header>
<!--container-->
<div class="container">
<section class="section">
<article class="article_1">article_1</article>
<article class="article_2">article_2</article>
</section>
<aside class="aside">
<div class="banner_1" >banner_1</div>
<div class="banner_2" >banner_2</div>
<div class="banner_3" >banner_3</div>
</aside>
</div>
<!--footer-->
<footer class="footer">
footer
</footer>
</div>
</body>
</html>
EX_html5_0304_media-2.html
0.01MB