728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layout5</title>
</head>
<style>
* {margin: 0; padding: 0;}
body {background-color: #e3f2fd;}
#wrap {width: 1200px;margin: 0 auto;}
#header {width: 100%;height: 100px;background-color: #b2defe;}
#banner {width: 100%;height: 300px;background-color: #7ecbfd;}
#content1 {overflow: hidden;}
#content1 .nav {float: left;width: 30%;height: 300px; background-color: #43b5fc;}
#content1 .article_right1 {float: left;width: 70%;height: 150px; background-color: #00a5fb;}
#content1 .article_right2 {float: left;width: 70%;height: 150px; background-color: #0096fa;}
#content2 {overflow: hidden;}
#content2 .article_box1 {float: left; width: 33.3333%; height: 300px; background-color: #0088ec;}
#content2 .article_box2 {float: left; width: 33.3333%; height: 300px; background-color: #0076d9;}
#content2 .article_box3 {float: left; width: 33.3333%; height: 300px; background-color: #0064c6;}
#content3 {overflow: hidden; padding: 5%;background-color: #00a6fc;}
#content3 .article_square1 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#content3 .article_square2 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#content3 .article_square3 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#content3 .article_square4 {float: left; width: 23%; height: 200px; margin: 1%; border-radius: 5px; background-color: #0076d9;}
#footer {width: 100%; height: 100px; background-color: #43b5fc;}
/* 화면 너비 0 ~ 1180px */
@media (max-width: 1180px){
#wrap {width: 100%;}
#content2 .article_box1 {width: 50%;}
#content2 .article_box2 {width: 50%;}
#content2 .article_box3 {display: none;}
#content3 .article_square1 {width: 31.3333%;}
#content3 .article_square2 {width: 31.3333%;}
#content3 .article_square3 {width: 31.3333%;}
#content3 .article_square4 {display: none;}
}
/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
#content2 .article_box1 {width: 100%;}
#content2 .article_box2 {width: 100%;}
}
/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
#content1 .nav {width: 100%; height: 200px;}
#content1 .article_right1 {width: 100%; height: 200px;}
#content1 .article_right2 {width: 100%; height: 200px;}
#content3 .article_square1 {width: 98%; border-radius: 5px;}
#content3 .article_square2 {width: 98%; border-radius: 5px;}
#content3 .article_square3 {width: 98%; border-radius: 5px;}
}
</style>
<body>
<div id="wrap">
<header id="header"></header>
<section id="banner"></section>
<section id="content1">
<nav class="nav"></nav>
<article class="article_right1"></article>
<article class="article_right2"></article>
</section>
<section id="content2">
<article class="article_box1"></article>
<article class="article_box2"></article>
<article class="article_box3"></article>
</section>
<section id="content3">
<article class="article_square1"></article>
<article class="article_square2"></article>
<article class="article_square3"></article>
<article class="article_square4"></article>
</section>
<footer id="footer"></footer>
</div>
</body>
</html>'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| background url (0) | 2022.04.09 |
|---|---|
| HTML5 아웃라이너(틀잡기) (0) | 2022.04.09 |
| 반응형 사이트 만들기 - 레이아웃4 (0) | 2022.04.07 |
| 반응형 사이트 - 레이아웃3 (0) | 2022.04.07 |
| 반응형 사이트 - 레이아웃2 (0) | 2022.04.07 |
