반응형
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. 미리보기
4. HTML / CSS 파일
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| [WMAP]Bitnami WMAP Setup(비트나미) (0) | 2020.03.01 |
|---|---|
| [Tistory-플러그인]기본 스킨 방문객 카운터 HTML Code (0) | 2019.10.29 |
| HTML5 - 190701 Basic Study 68(Cafe 페이지 제작) (0) | 2019.07.01 |
| HTML5 - 190701 Basic Study 67(그리드 시스템) (0) | 2019.07.01 |
| HTML5 - 190701 Basic Study 66(반응형 웹 기초 구성) (0) | 2019.07.01 |
