본문 바로가기

Python_WEB/HTML

HTML5 - 190701 Basic Study 69(반응형 웹)

1. HTML Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>무제 문서</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<link href="css/ex05.css" rel="stylesheet">
</head>

<body>
<header>
   <nav>
    <ul>
     <li>메뉴1</li>
     <li>메뉴2</li>
     <li>메뉴3</li>
    </ul>
   </nav>
  </header>
  <div id="container">
   <section id="intro">
    <img src="img/pic1.jpg" alt="테디 베어">
    <img src="img/pic2.jpg" alt="민들레">
    <img src="img/pic3.jpg" alt="고양이">
   </section>
   <section id="desc" class="text">
    <p>있는 이것을 능히 보이는 투명하되 이상의 낙원을 칼이다. 위하여 같이 힘차게 오직 듣는다. 뭇 창공에 천지는 말이다. 같이, 있는 되는 열매를 말이다. 있는 이것을 능히 보이는 투명하되 이상의 낙원을 칼이다.</p>
   </section>
   <footer>
    <p>뭇 창공에 천지는 말이다. 같이, 있는 되는 열매를 말이다.</p>
   </footer>
  </div>
</body>
</html>

 

2. CSS Code

@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
header {
	width: 100%;
	background: #000;
}
nav ul {
	height: 50px;
	margin: 0;
	list-style: none;
	background: #000;
	color: white;
}
nav ul li {
	float: left;
	margin: 5px 15px;
	padding: 10px;
	font-size: 0.8rem;
}
#container, nav {
	width: 310px;
	margin-bottom: 20px;
}
#intro {
	text-align: center;
	margin-bottom: 20px;
}
#intro img {
	max-width: 100%;
}
#desc {
	width: 100%;
	padding: 10px;
}
footer {
	width: 100%;
	height: 60px;
	padding: 20px;
	background: #37001c;
	color: white;
}
footer p {
	text-align: center;
}
 @media all and (min-width:768px) {
#container, nav {
	width: 750px;
	margin: 0 auto;
}
#intro {
	width: 100%;
}
#intro img {
	float: left;
	width: 200px;
	margin: 20px;
}
#desc {
	clear: both;
	width: 100%;
	padding: 0px;
	margin: 10px auto;
}
footer {
	height: 150px;
	background: url(images/footer.jpg) no-repeat center;
	background-size: cover;
}
footer p {
	line-height: 150px;
}
}
 @media all and (min-width:1024px) {
#container, nav {
	width: 1000px;
	margin: 0 auto;
}
#intro img {
	float: left;
}
#desc {
	display: inline-block;
	width: 250px;
	height: 200px;
	padding: 5px;
	border: 1px dotted #ccc;
}
footer {
	clear: both;
	height: 200px;
	background: url(../img/footer.jpg) no-repeat center;
	background-size: cover;
}
footer p {
	line-height: 200px;
}
}

 

3. 미리보기

< PC >
< 태블릿 >
< 모바일 >

4. HTML / CSS 파일

ex05.html
0.00MB
ex05.css
0.00MB