[CSS] 박스모델

1. 박스모델이란? 

: 박스 형태로 된 모든 HTML요소

거의 99퍼센트의 HTML 태그는 박스모델을 따른다. 

 

한개의 요소를 브라우저가 view port화면에 렌더링 할때 실은 box형태이다. 

 

2. 박스의 속성

-content : 실제 내용이 표현되는곳

-padding: 콘텐츠와 테두리 사이의 여백

-border: 박스의 테두리 두께

-margin: 테두리와 박스의 최종 경계 사이의 여백

속성은 시계방향으로 적용된다. top->right -> bottom -> left

HTML 태그들은 크게 두가지로 나뉜다. 

 

1. Block-level Element (=tag)

: Block-Level Element는 한번 뷰포트 영역에 생성되면 한 행의 영역을 온전히 차지하는 요소이다.

다음에 나오는 태그는 무조건 밑으로 내려가게 하여 세로로 쌓게 된다. 즉, 위에서 아래로 배열시킨다. 

 

대표적으로 h1부터 h6까지 있다. 

 

2. Inline-Level Element (=tag)

: Inline-level Element는 왼쪽에서 오른쪽으로 쌓이게 하는 성질이 있다. => 컨텐츠 크기만큼 차지한다. 

대표적으로 img 태그가 있다. 

 

*<br> 태그는 box모델을 따르지 않는다.