box-sizing : 박스 너비 기준 정하기
형식 - box-sizing : content-box | border-box
- content-box : width 속성 값을 콘텐츠 영역 너비 값으로 사용. 기본값
- border-box : width 속성 값을 콘텐츠 영역에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용
- 박스 모델의 width, height 속성 : 박스 모델 전체의 너비와 높이가 아니라 박스 모델 안에 있는 콘텐츠 부분과 너비의 높이를 말함.
- 웹 문서에 여러 요소를 배치하려면.. 각 요소의 너비 값을 기준으로 해야함.
즉, width 속성 값이 콘텐츠 영역의 너비만 나타내기 때문에 패딩이나 테두리는 따로 계산해야 함.
- box-sizing 속성을 사용하면 width 속성 값을 콘텐츠 영역 너비 값으로 사용할 지, 패딩이나 테두리까지 포함시켜 사용할 지 결정할 수 있음.