[코딩 공부_31] CSS 박스 모델

CSS 박스 모델에 대해 알아보자

박스모델이란 무엇일까? HTML 태그들은 모두 박스모델을 갖고 있다 

F12를 누르고 Elements 탭으로 가서 아무 태그나 눌러 style탭을 보면 아래와 같은 그림이 나온다

 

이것이 바로 박스모델이라 한다

margin - border - padding - content 순으로 둘러싸고 있는 박스모델에 대해 자세하게 설명하도록 하겠다 

 

①  margin  : 다른 태그와의 거리를 나타낸다 

- box-sizing, border-box, content-box는 width에 포함되지 않는다!

 

②  border  : 테두리를 말한다

- width에 포함되지 않으며, 굳이 padding을 넣지 않아도 생긴다!

 

③  padding  : 내용과 테두리 사이의 간격이다 

- background-color 속성으로 설정하는 배경색의 영향을 함께 받는다 

 

④  content  : 태그가 차지하는 공간

- width, height가 차지하는 공간이다