[CSS] Box Model

Box Model은 Content > Padding > Border > Margin 으로 구성된다.

Box Model의 크기는 Content, Padding 그리고 Border의 합이다.

 

* Margin Collapsing (마진 상쇄)

https://seungwoohong.tistory.com/26

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

 

1. Block-level Element

혼자 한 줄을 차지하는 요소이며, 줄바꿈이 일어난다.

블록레벨 요소들은 모두 박스 모델 요소이다.

스타일 속성(Style Attribute) 중에 width, height가 박스모델의 콘텐츠(Content) 크기를 정의한다.

 

ex) div, hn, hr, p, ul, ol, form, table

 

2. Inline Element

혼자 한 줄을 차지하지 않는 요소이며, 줄바꿈이 일어나지 않는다.

스타일 속성(Style Attribute) 중에 width, height 속성이 없다.

 

ex) span, br, img, input, button, label

 

3. box-sizing 속성

content-box ... width, height 속성값을 콘텐츠의 너비값으로 사용(기본값)

border-box ... width, height 속성값을 콘텐츠, 패딩 그리고 테두리를 포함한 영역의 너비값으로 사용

 

4. display 속성

block ... 해당 요소를 블록레벨로 지정

inline ... 해당 요소를 인라인으로 지정

inline-block ... 배치는 인라인, 사이즈는 블록레벨 속성유지

none ... 해당 요소를 표지하지 않음(차지했던 공간도 없어짐)

 

5. float 속성

left ... 위로 띄워 부모 요소의 왼쪽으로 배치

right ... 위로 띄워 부모 요소의 오른쪽으로 배치

none ... 띄우지 않음

 

float 속성을 적용한 블록레벨 요소끼리는 줄넘김이 없어짐.

이후에 생성된 나머지 요소들은 float된 요소가 없다고 생각하고 배치됨. (이전 요소들은 영향없음)

(박스배치는 float한 요소에 영향을 받지 않으나, 텍스트는 float한 박스에 영향을 받는다.)

 

float 속성을 적용한 요소에 영향을 제거 (더이상 겹치지 않음)

div { clear: both; }

 

6. position 속성

static ... 문서 흐름대로 배치 (기본값, float 속성을 이용하여 좌우배치는 가능)

relative ... static 위치를 기준으로 위치지정(이동에 따른 다른요소 영향없음)

absolute ... 조상요소중 속성값 relative인 요소(없으면 브라우저 창)를 기준(좌측 상단이 0, 0)으로 위치지정

fixed ... 브라우저 창을 기준으로 위치지정

 

* static을 제외한 나머지 속성값은 top, bottom, left, right 속성을 가진다.

<style>
    div {
        border: 1px solid red;
    }

    #wrap {
        height: 1000px;
        position: relative;
    }

    #wrap div {
        width: 40px;
        height: 40px;
    }

    #wrap .box {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -20px;
        margin-top: -20px;
    }

    #wrap .top {
        position: fixed;
        bottom: 20px;
        right: 20px;
    }
</style>
<div id="wrap">
    <div class="box"></div>
    <div class="top"></div>
</div>