(CSS) box-sizing이란?📦

컨텐츠의 크기 설정

• box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성이다.
  • content-box : 콘텐트 영역을 기준으로 크기를 정한다.
  • border-box : 테두리를 기준으로 크기를 정한다.
  • initial : 기본값으로 설정한다.
  • inherit : 부모 요소의 속성값을 상속받는다.

1) 기본(생략): box-sizing: content-box;

• 너비=width+border+padding
• 높이=height+border+padding

2) box-sizing: border-box;

• width값을 설정하면 border+padding까지 크기에 포함하는 설정이다.
• border값까지 포함
• 정해진 width값은 변하지 않는다.
• 너비=width+border+padding
• 높이=height+border+padding

+box-shadow

• 그림자
• box-shadow: 가로 세로 퍼짐 색상;