content, padding, border, margin이 최종 크기를 만드는 방식을 배웁니다.
기본 content-box에서는 width가 콘텐츠만 뜻하고 padding과 border가 바깥에 더해집니다. border-box에서는 선언한 width 안에 padding과 border가 포함돼 레이아웃 계산이 직관적입니다.
이번 예제의 출발점은 box-sizing: border-box;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 두 요소의 실제 가로 크기를 개발자 도구에서 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
두 box-sizing 계산 방식을 섞으면 같은 width인데 실제 크기가 달라질 수 있습니다.
직접 바꿔보세요두 요소의 실제 가로 크기를 개발자 도구에서 비교하세요.