CSS Box Model이란?

CSS Box Model이란?

CSS 박스 모델은 HTML element가 웹 페이지에서 차지하는 공간을 정의한 모델이다.

HTML element들은 각각 자신만의 영역을 갖고 있으며, 각 영역은 다시 여러개의 작은 영역으로 나뉜다.

 

각 element는 가운데 실제 element의 내용이 담긴 부분(content), element를 감싸는 경계(border),

border와 content 사이의 영역(padding), border 바깥의 영역(margin)으로 구성된다.

 

<style>
    h1{
        border:3px solid red;
        padding:20px;
        margin:20px;
        width:100px;
    }
</style>

각 영역들은 CSS의 property로 구현되어 있기 때문에 원하는 속성을 불러와 원하는 값을 넣어주면 된다.

 

이렇게 구현한 내용은 크롬에서 F12를 눌러 확인할 수 있다.

 

우리가 지정해준 CSS 속성들을 표시해줄 뿐 아니라 그림으로도 표현해주는 것을 볼 수 있다.

 

 

또, element들은 웹 페이지 전체 너비만큼의 영역을 차지하는 element를 block-level element,

컨텐츠가 있는 부분의 너비만큼의 영역을 차지하는 element인 inline element로 나뉜다.

 

<style>
    h1 {
        display:inline;
    }
</style>

이는 display 속성에 원하는 상태에 따라 block 혹은 inline 값을 넣어 바꿀 수 있다.

 

 

 

Reference

[생활코딩] WEB

https://opentutorials.org/course/3083