200820_ienlab_microsite

05 edu.goorm.io/learn/lecture/16942/웹퍼블리싱-실습-반응형-사이트-만들기/lesson/813675/05-반응형-레이아웃-유형-3
ienground · Aug 20, 2020 · 9070c85 · 9070c85
1 parent ec4a31e
commit 9070c85
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 14 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/index.html b/index.html
@@ -5,13 +5,31 @@
     <title>200820_05</title>
     <style>
         * { margin: 0; padding: 0;}
-        #wrap { width: 100%; margin: 0 auto; }
-        .header { width: 60%; height: 100px; background: #90caf9; margin: 0 auto;}
-        .aside { width: 30%; height: 600px; background: #64b5f6;}
-        .article1 { width: 70%; height: 200px; background: #42a5f5;}
-        .article2 { width: 70%; height: 200px; background: #2196f3;}
-        .article3 { width: 70%; height: 200px; background: #1e88e5; }
-        .footer { width: 60%; height: 100px; background: #1976d2; }
+        #wrap { width: 80%; margin: 0 auto; }
+        .header { width: 100%; height: 100px; background: #90caf9; margin: 0 auto;}
+        .aside { float: left; width: 30%; height: 600px; background: #64b5f6;}
+        .article1 { float: left; width: 70%; height: 200px; background: #42a5f5;}
+        .article2 { float: left; width: 70%; height: 200px; background: #2196f3;}
+        .article3 { float: left; width: 70%; height: 200px; background: #1e88e5; }
+        .footer { clear: both; width: 100%; height: 100px; background: #1976d2; }
+
+        @media (max-width: 1200px) {
+            #wrap { width: 100%; }
+            .aside { height: 400px; }
+            .article3 { clear: both; width: 100%; height: 150px;}
+        }
+
+        @media (max-width: 768px) {
+            .aside { clear: both; width: 100%; height: 80px; }
+            .article1 { float: top; width: 50%; height: 200px; }
+            .article2 { float: top; width: 50%; height: 200px; }
+        }
+
+        @media (max-width: 480px) {
+            .article1 { clear: both; width: 100%;}
+            .article2 { clear: both; width: 100%;}
+            .article3 { display: none;}
+        }
     </style>
 </head>
 <body>