CSS 10. 레이아웃 관련 스타일(1)

블럭요소 : 한줄로 영역 차지하고 있는 요소 / 줄바꿈 발생 ( div, p, pre, h1~h6)
인라인 요소 : content부분만 영역을 차지하고있는 요소 / 옆으로 배치 ( span, label. input, image, 글자관련태그..)

* 요소의 크기 : content 영역 + padding 영역 +border 영역
                        margin영역 (요소의 바깥쪽 영역)

---

레이아웃 관련 스타일 

 - width, height : 기본적으로 내용을 차지하는 content 영역의 가로, 세로 길이를 조절하는 스타일속성

 고정크기 (px) 

 

 <div id="test1" class="size-test"></div>
<style>
.size-test{border:20px solid red; }
#test1{width:400px; height:200px;}
</style>

 가변 크기 (%) - 화면의 크기에 따라 변경 

 <div id="test2" class="size-test"></div>
 <style>
.size-test{ border:20px solid red;}
 #test2{width:50%; height:150px;}
 </style>

---

- display :  화면 배치 방법 변경

선택자 { display : inline | block | inline-block;}

기존에 블럭요소를 인라인 요소로 바꾸기 : display:inline | display:inline-block

 <h4>display:inline</h4>
    <div class="display-test inline red">첫번째</div>
    <div class="display-test inline yellow">두번째</div>
    <div class="display-test inline pink">세번쨰</div>
    <div class="display-test inline green">네번째</div>
    <div class="display-test inline purple">다섯번째</div>
    <br>
    <b>display:inline만 하게되면 width와 height 속성은 적용되지 않음 </b>

<h4>display:inline-block</h4>
    <div class="display-test inline-block red">첫번째</div><div class="display-test inline-block yellow">두번째</div>
    <div class="display-test inline-block pink">세번쨰</div>
    <div class="display-test inline-block green">네번째</div>
    <div class="display-test inline-block purple">다섯번째</div>
    <br>
<style>
 .display-test{
            border:1px solid black;
            width:150px;
            height:150px;
        
        }
        .red{background: red};
        .yellow{background: yellow;}
        .pink{background: pink;}
        .green{background: green;}
        .purple{background: purple;}

        .inline{display:inline;}
        .inline-block{display:inline-block;}
</style>

display:inline

첫번째

두번째

세번쨰

네번째

다섯번째

display:inline만 하게되면 width와 height 속성은 적용되지 않음

display:inline-block

첫번째

두번째

세번쨰

네번째

다섯번째

 

기존 인라인 요소를 블럭요소로 바꾸기 

 <h4>display:block</h4>
   
    <span class="display-test block red">첫번째</span>
    <span class="display-test block yellow">두번째</span>
    <span class="display-test block pink">세번째</span>
    <span class="display-test block green">네번째</span>
    <span class="display-test block purple">다섯번째</span>
<style>
.block{display: block;}
</style>

display:block

첫번째 두번째 세번째 네번째 다섯번째