728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>layout2</title>
</head>
<style>
* {margin: 0; padding: 0;}
#wrap {width: 100%;}
header {width: 100%;height: 150px;background: #81c784;}
aside {float: left;width: 30%;height: 700px; background: #66bb6a;}
section {float: left;width: 40%;height: 700px; background: #4caf50;}
article {float: left;width: 30%;height: 700px; background: #43a047;}
footer {clear: both; width: 100%;height: 150px; background: #388e3c;}
/* 화면 너비 0 ~ 1180px */
@media (max-width: 1180px){
aside {width: 40%;}
section {width: 60%;}
article {float: none;clear: both; width: 100%;height: 300px;}
}
/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
aside {width: 100%; height: 300px;}
section {width: 100%; height: 300px;clear: both;}
}
/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
header {height: 300px;}
aside {height: 200px;}
section {height: 200px;}
}
</style>
<body>
<div id="wrap">
<header></header>
<aside></aside>
<section></section>
<article></article>
<footer></footer>
</div>
</body>
</html>'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| 반응형 사이트 만들기 - 레이아웃4 (0) | 2022.04.07 |
|---|---|
| 반응형 사이트 - 레이아웃3 (0) | 2022.04.07 |
| 반응형 사이트 - 레이아웃 유형 (0) | 2022.04.07 |
| 반응형 사이트 만들기 - 미디어쿼리 예제 (0) | 2022.04.07 |
| 반응형 사이트 만들기 - 시맨틱 태크 (0) | 2022.04.07 |
