728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layout3</title>
</head>
<style>
* {margin: 0;padding: 0;}
body {background-color: #e3f2fd;}
#wrap {width: 1200px;margin: 0 auto;}
.header {width: 100%;height: 150px; background: #81d4fa;}
.aside {float: left; width: 30%;height: 300px; background: #4fc3f7;}
.article1 {float: left; width: 70%;height: 100px; background: #29b6f6;}
.article2 {float: left; width: 70%;height: 100px; background: #03a9f4;}
.article3 {float: left; width: 70%;height: 100px; background: #039be5;}
.footer {clear: both; width: 100%;height: 150px;background: #0288d1;}
/* 화면 너비 0 ~ 1180px */
@media (max-width: 1180px){
#wrap {width: 100%;}
.article1 {height: 150px;}
.article2 {height: 150px;}
.article3 {float: none; width: 100%;clear: both;}
}
/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
.aside {width: 100%;}
.article1 {width: 50%;}
.article2 {width: 50%;}
}
/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
.article1 {width: 100%;}
.article2 {width: 100%;}
}
</style>
<body>
<div id="wrap">
<header class="header"></header>
<aside class="aside"></aside>
<section class="article1"></section>
<section class="article2"></section>
<section class="article3"></section>
<footer class="footer"></footer>
</div>
</body>
</html>'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| 반응형 사이트 만들기 - 레이아웃5 (0) | 2022.04.08 |
|---|---|
| 반응형 사이트 만들기 - 레이아웃4 (0) | 2022.04.07 |
| 반응형 사이트 - 레이아웃2 (0) | 2022.04.07 |
| 반응형 사이트 - 레이아웃 유형 (0) | 2022.04.07 |
| 반응형 사이트 만들기 - 미디어쿼리 예제 (0) | 2022.04.07 |
