responsive/layout07.html at main · kjh9852/responsive · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>layout07</title>
	<style>
		*{margin: 0; padding: 0;}
		#wrap {width: 1200px; margin: 0 auto;}
		header {width: 100%; height: 100px; background: #b3d8fa;}
		nav {width: 100%; height: 400px; background: #84c4fb;}
		aside {float: left; width: 34%; height: 500px; background: #57acf5;}
		.article1 {float: left; width: 66%; height: 250px; background: #389cf5;}
		.article2 {float: left; width: 66%; height: 250px; background: #168df3;}
		.section1 {float: left; width: 34%; height: 300px; background: #157fe1; }
		.section2 {float: left; width: 33%; height: 300px; background: #166cc9;}
		.section3 {float: left; width: 33%; height: 300px; background: #115db6;}
		.section4 {overflow: hidden; padding: 5%; background: #3594e9; }
		.section4 div {margin: 1%; height: 200px; width: 23%; float: left; border-radius: 5px;background: #1463b7; }
		footer {clear: both; background: #488fcc; width: 100%; height: 100px;}

		/* 화면 너비 0 ~ 1200 px*/
	    @media (max-width: 1240px){
		#wrap {width: 100%;}
		.section3 {display: none;}
		.section1 {width: 50%;}
		.section2 {width: 50%;}
		.section4 div {width: 31.3333%;}
		.section4 div:nth-child(4) {display:none;}
	}

		/* 화면 너비 0 ~ 768 px*/
		@media (max-width: 768px){
		.section1 {width: 100%;}
		.section2 {width: 100%;}

	}

		/* 화면 너비 0 ~ 480 px*/
		@media (max-width: 500px){
		aside {width: 100%;}
		.article1{width: 100%;}
		.article2{width: 100%;}
		.section4 div {width: 98%;}
	}

	</style>
</head>
<body>
	<div id="wrap">
		<header></header>
		<nav></nav>
		<aside></aside>
		<section class="article1"></section>
		<section class="article2"></section>
		<section class="section1"></section>
		<section class="section2"></section>
		<section class="section3"></section>
		<section class="section4">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</section>
		<footer></footer>
	</div>
</body>
</html>