[반응형 웹] 4.실습:TechCrunch
in Web on Responsive_Web
TechCrunch
/* TechCrunch.css */
* {box-sizing: border-box;}
body{width:100%; background: #ffffe5; font-size: 75%;}
.wrap-bg{width:92%; background: #ffece5; margin:20px 5%;
padding: 0 2.307692307692%; overflow:hidden;
font-family: "Lucida Grande", "Myriad Pro", sans-serif;}
/* wrap */
.wrap{width:73.2%; float:left; }
/*header */
.header{background: #e5ecff; color:#000; font-weight: bold;}
.header h1{font-size: 3.57142857142857em; }
.header p{font-size: 0.22em;}
/* nav */
.nav{text-align:center; }
#nav1{background: #0000cc; }
#nav2{background: #0000cc;}
#nav2 li{display:inline-block; margin: 0 1.869158878505%;}
#nav1 a,#nav2 a{display:block; color:#fff; padding:10px 5px;
text-decoration:none;}
/*content*/
.content{overflow:hidden; background: #e5ecff;}
#date{font-style: italic;}
/* con1-bg */
.con1-bg{width: 58%; background: #fff;float:left;}
.con1{padding-left: 2.395209580838%;
padding-right: 3.592814371257%; padding: 6.666666666667%; }
.con1 h2{font-size: 2em; color: #fff;background-color: #000;
padding: 0.53571428571429em 3.846153846154%;
display: inline-block;}
.con1 img{width:100%; }
.con1 a{color:blue;}
.con1 a:hover{color:skyblue;}
/* con2-bg */
.con2-bg{width: 42%; float:left; }
.con2{ padding: 6.666666666667%;
padding-right: 2.395209580838%;
padding-left:3.592814371257%}
.con2 a{color:blue;}
.con2 a:hover{color:skyblue;}
.con2 h3{font-size: 1.17em;}
/* wrap2 */
.wrap2{width:24.12%; background: #fff; float:right;}
.con3{padding: 7.272727272727%;}
.con3 h2{font-size: 1.17em;}
.con3 ul li a{color: blue;}
.con3 ul li a:hover{color:skyblue;}
.con3 figure{margin:0; padding: 6.666666666667%;}
.con3 img{width:100%;}
@media only screen and (max-width: 768px){
.wrap-bg{margin:0;}
.wrap-bg{width:100%; padding:0;}
.wrap{width:100%;}
#nav2{display:none;}
#nav1{width:100%; }
#nav1 a{padding:0.71428571428571em 0; display:block;}
.wrap,.wrap2,.con1-bg,.con2-bg{width:100%; float:none;}
}
@media only screen and (min-width: 768px)and (max-width:1200px){
#nav1{display:none;}
.wrap{width:63%;}
.wrap2{width:32%;}
.con1-bg,.con2-bg{width:100%; float:none;}
}
@media only screen and (min-width: 1200px){
#nav1{display:none;}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="TechCrunch.css">
<title>꾸리블로그</title>
</head>
<body>
<div class="wrap-bg">
<div class="wrap">
<div class="header">
<h1>꾸리블로그</h1>
<p>반응형웹페이지 테스트</p>
</div>
<div class="nav">
<p id="nav1"><a href="kookyungmin.github.io">Menu</a></p>
<ul id="nav2">
<li><a href="https://kookyungmin.github.io/">Home</a></li>
<li><a href="https://kookyungmin.github.io/tag/iot-curriculum-html5/">Html</a></li>
<li><a href="https://kookyungmin.github.io/tag/iot-curriculum-css/">CSS</a></li>
<li><a href="https://kookyungmin.github.io/tag/iot-curriculum-responsive-web/">반응형웹</a></li>
<li><a href="https://kookyungmin.github.io/tag/iot-curriculum-oracle/">Oracle</a></li>
<li><a href="https://kookyungmin.github.io/tag/iot-curriculum-java/">java</a></li>
</ul>
</div>
<div class="content">
<div class="con1-bg">
<div class="con1">
<h2>반응형웹페이지</h2>
<p id="date">2018 Jul 12</p>
<h3>반응형 웹 페이지 만들기 테스트</h3>
<p>반응형 웹 페이지란 사용자에게 화면 비율에 따라서 다양한 환경을 제공하는 것입니다.
편리합니다~</p>
<img src="temp-video.jpg" alt="">
<p>반응형 웹페이지 및 다른 개발언어를 배우고 싶은 분들은 저의 블로그 <a href="kookyungmin.github.io">꾸리블로그</a>를 참고하세요!</p>
</div>
</div>
<div class="con2-bg">
<div class="con2">
<h3>작성자:구경민</h3>
<p id="date">2018 July 12</p>
<h3>개인 블로그: <a href="kookyungmin.github.io">kookyungmin.github.io</a></h3>
<p></p>
</div>
</div>
</div>
</div>
<div class="wrap2">
<div class="con3">
<h2>목록</h2>
<ul>
<li><a href="https://kookyungmin.github.io/tag/iot-curriculum-html5/">-HTML5 </a></li>
<li><a href="https://kookyungmin.github.io/tag/iot-curriculum-css/">- CSS</a></li>
<li><a href="https://kookyungmin.github.io/tag/iot-curriculum-java/">- Java</a></li>
<li><a href="https://kookyungmin.github.io/tag/iot-curriculum-responsive-web/">- 반응형웹</a></li>
</ul>
<figure>
<a href=""><img src="banner.jpg" alt=""></a>
<a href=""><img src="banner.jpg" alt=""></a>
</figure>
</div>
</div>
</div>
</body>
</html>
실행결과 입니다.