キャプチャ3/8(月)FrontEnd/スクリーン構造

1.領域に関する属性の復習

1)content領域:要素内のコンテンツ領域

2)border領域:要素の境界領域

3)塗りつぶし領域:内容と枠線の間の領域(余白)

4）margin領域：要素の外部領域

(1)別のdivをdivに入れる

[HTML]
<div class="test">
        <div class="inner">
        </div>
</div>

[CSS]
<style>
.test{
	/* border영역 */
	border:20px solid blue;

        /* content영역 */
        width: 300px;
        height: 300px;
        /* width, height는 기본적으로 content영역에 해당하는 길이 */

        /* padding영역 */
        padding:10px;

        /* margin영역 */
        margin:20px;
	}
.inner{
        border:20px solid red;

        /* width:260px; 260px + 40px = 300px 
        height:110px; 110px + 40px = 150px */

        width:100%;
        height:100%;

        /* box-sizing: 내가 지정한 width와 height를 어느 영역까지의 범위로 할껀지 지정 */
        box-sizing: border-box;
	}
</style>

(2)他の2つのdivをdivに入れる

上下2等分

[HTML]
<div class="wrap">
        <div class="test1"></div>
        <div class="test2"></div>
</div>

[CSS]
.wrap{
            border:5px solid red;
            width: 400px;
            height: 200px;
        }

        .wrap>*{
            border: 5px solid blue;
            box-sizing: border-box;
            width:100%
        }

        .test1{height: 70%;}
        .test2{height: 30%;}

左右2等分

[HTML]
<div class="wrap2">
        <div class="test3"></div>
        <div class="test4"></div>
</div>

[CSS]
.wrap2{
       border:5px solid red;
       width:400px;
       height:200px;
	}
.wrap2>*{
          border:5px solid blue;
          height: 100%;
          float:left;
          box-sizing: border-box;
	}
.test3{width: 30%;}
.test4{width:70%;}

2.Webドキュメントの基本構造

[HTML]
<div class="wrap">
	<div id="header"></div>
	<div id="content">
		<div id="content_1"></div>
		<div id="content_2"></div>
	</div>
    <div id="footer"></div>
</div>
    
[CSS]
    <style>
        div{
            border: 1px solid red;
            box-sizing: border-box; 
            //size를 border에 딱 맞게끔 설정
        }
        .wrap{
            width:1000px;
            height:800px;
            margin:auto; 
            /* margin auto는 해당 컨텐츠를 웹에 가운데에 배치 */
        }

        .wrap>div{ /* #header, #content, #footer */ 
            width:100%;

        }
        #header{height: 20%;}
        #content{height: 60%;}
        #footer{height: 20%;}
        #content>*{
            height: 100%;
            float:left;
        }
        #content_1{width: 20%;}
        #content_2{width: 80%;}

    </style>