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

블럭요소

한줄로 영역을 차지하고 있는 요소 / 줄바꿈 발생 (div, p, pre, h)

인라인요소

content부분만 영역을 차지하고 있는 요소 / 옆으로 다른 속성이 올수 있음 (span, label, input, img, 글자...)

요소

content + padding + border

요소 바깥쪽 영역

margin

---

width,height

기본적으로 내용을 차지하는 content영역의 가로, 세로 길이를 조정하는데 사용하는 스타일

고정크기(px)

#test1{width: 400px; height: 200px;}

가변크기(%)

calc(xx% - xxpx)

#test2{width: calc(100% - 100px); height: 150px;}

---

display

화면 배치 방법 변경

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

: inline

.display-test{
   border: 1px solid black;
   width: 150px;
   height: 150px;
}

.red{background: red;}
.yellow{background: yellow;}
.pink{background: pink;}

.inline{display: inline;}

: block

/*css*/
.block{display: block;}

<!--html-->
<div class="display-test red block">첫번째</div>
<div class="display-test yellow block">두번째</div>
<div class="display-test pink block">세번째</div>

: inline-block

/*css*/
.inline-block{display: inline-block;}

<!--html-->
<div class="display-test red inline-block">첫번째</div>
<div class="display-test yellow inline-block">두번째</div>
<div class="display-test pink inline-block">세번째</div>