display 속성을 이용한 박스 배치

10 months ago · eec1d76798
parent ca4796d945
commit eec1d76798
1 changed files with 56 additions and 0 deletions
--- a/positioning/3-6/default.html
+++ b/positioning/3-6/default.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width"/>
+    <style>
+        div,
+        span {
+            border: 2px solid lightgray;
+            margin: 3px 0;
+            padding: 5px;
+        }
+
+        .none {
+            display: none;
+        }
+
+        .block1 {
+            display: block;
+        }
+
+        .block2 {
+            display: block;
+            width: 250px;
+            height: 50px;
+        }
+
+        .inline {
+            /* inline의 width, height 무시됨 */
+            display: inline;
+            width: 200px; 
+            height: 50px;
+        }
+
+        .inline-block {
+            display: inline-block;
+            width: 200px;
+            height: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div>
+        <div class="block1">block1 box</div>
+        <div class="block2">block2 box</div>
+        <span class="inline">inline box</span>
+        <span class="inline-block">inline-block box</span>
+    </div>
+    <div class="none">
+        <h2>Hello</h2>
+    </div>
+    <div>
+        <h2>World</h2>
+    </div>
+</body>
+</html>