[CSS]boxmodel과 box-sizing

html요소는 content + padding + border + margin로 이루어져 있다.

content는 html요소의 내용이 들어가는 곳이다

padding은 content영역과 border 사이의 빈 공간이다.

border는 요소의 가장 바깥 테두리이다.

margin은 테두리밖 즉, 요소의 바깥 공간이다. 

다른 요소와 간격을 두기 위해,혹은 요소의 위치를 움직이기 우해 사용한다.

크기 설정 속기형

• 순서 위부터 시계방향

• 4개 top right bottom left

• 3개 top (right-botton) bottom

• 2개 (top-bottom) (right-bottom)

Box-sizing

기본값은 box-sizing: content-box

이때 요소의 크기는 width(height) + padding + border으로

padding이나 border의 크기가 바뀌면 요소의 크기가 변하는 단점이 있고,

일일히 요소의 크기를 구하기 위해  세가지 영역의 크기를 더해서 계산해야한다

box-sizing: border-box 일때 요소의 크기는 width(height)고정으로 

padding이나 border크기가 바뀌면 그에 맞게

content영역의 크기가 width(height) - (padding+ border) 으로 바뀌어

width(height)의 크기는 고정된다.