box-sizing

• border의 크기와 padding의 크기를 합쳐주느냐, 따로보느냐

div 300px이 300px이 아니다.

• div를 만들다보면 안의 내용을 300px로 설정하고 padding과 border를 추가하고 나면 한 엘리먼트의 크기는 300px이 아니게 된다.
• box의 전체 크기
  : div크기 + padding크기 + border크기이다.
• div의 기본속성은 box-sizing: content-box;이기 때문에
  div크기 + padding크기 + border크기가 그 div의 크기가 된다.
  부모의 영역의 크기에 딱 맞게 div의 크기을 주고 난뒤 padding과 barder를 주고 나면 부모의 영역크기보다 커지기 때문에 부모의 영역을 벗어나게 됨

모든 크기를 포함해서 크기를 주고 싶다면

• box-sizing: border-box;를 주면 된다
• box-sizing: border-box;를 주게 되면 padding크기 + border크기가 합해지는 것이 아닌
  엘리먼트의 크기로 조정되게 된다.

즉 크기를 줄때
1. div크기+padding크기 + border크기를 생각해서 크기를 조절하기
2. 한 영역의 div의 크기를 주고 padding크기, border크기 넣고 div 크기로 맞추려면 box-sizing: border-box; 주기

box-sizing에 대한 참고 사이트
box-sizing에 참고 사이트1(벨로그)
box-sizing에 참고 사이트1(mbn)