CSS 박스 모델(Box Model)에서 `content-box`와 `border-box`의 차이점을 설명하고, 실제 웹 개발에서 `box-sizing` 속성을 어떻게 활용하여 레이아웃 문제를 해결할 수 있는지 구체적인 예를 들어 설명해주세요.

CSS 박스 모델에서 content-box와 border-box는 요소의 너비와 높이를 계산하는 방식에 차이가 있습니다. content-box는 기본값으로, width와 height 속성이 콘텐츠 영역의 크기만을 지정합니다. padding, border는 이 값에 더해져 최종 크기를 결정합니다.

반면 border-box는 width와 height 속성이 콘텐츠 영역, padding, border를 모두 포함한 크기를 지정합니다. 따라서 box-sizing: border-box;를 사용하면 요소의 전체 크기를 기준으로 너비와 높이를 설정할 수 있어 레이아웃 계산이 훨씬 직관적입니다.

예를 들어, 반응형 웹 디자인에서 두 개의 div를 나란히 배치할 때, width: 50%;를 주고 padding을 추가하면 content-box에서는 화면을 벗어날 수 있습니다. 하지만 border-box를 사용하면 padding을 추가해도 전체 너비가 50%를 유지하므로 레이아웃이 깨지지 않습니다. 컴포넌트 개발 시에도 일관된 크기를 유지하는 데 유용합니다.