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>