Box model

이번시간에 배울 프로퍼티들임… width, height… margin-top 등

그런데 box모델이 무엇인가? 브라우저의 개발자모드에 들어가보자.

이렇게 렌더링된 각각이 네모의 틀안에 표현된걸 알 수 있다.

즉 html에 있는 모든 엘리먼트들은 CSS로 표현될떄 위의 네모틀을 기준으로 표현되는데, 이들을 BOX라고 한다.

특히 이 모델이 바로 각각의 엘리먼트들의 박스 모델이다.

박스 모델은 크게 4개의 층으로 이루어져있다.

1. Content

이 컨텐트의 가로를 표현하는 속성이 width, 세로가 height이다.

1. Padding

그리고 컨텐트와 border사이의 공간이 padding이다.(안쪽 여백)

1. border

말 그대로 테두리, 바깥 여백이다.