너비 숫자와 그 숫자가 가리키는 영역을 함께 읽습니다
AI에게 “width: 180px인 상자는 180픽셀 너비인가?”라고 물으면 조건을 더 확인해야 합니다. width(위드, 너비)는 상자의 가로 크기를 지정하는 속성입니다. 웹의 상자는 내용 영역을 중심으로 안쪽 여백인 패딩(padding), 테두리인 보더(border), 바깥 여백인 마진(margin)이 이어집니다. width가 어느 경계까지를 뜻하는지는 box-sizing(박스 사이징, 크기 기준) 속성이 정합니다.
content-box(콘텐츠 박스)는 내용 영역의 너비를 지정합니다. width 180픽셀에 좌우 패딩 20픽셀씩, 테두리 5픽셀씩을 더하면 테두리 바깥 너비는 180 + 20 + 20 + 5 + 5 = 230픽셀입니다. 같은 숫자를 모든 경계의 너비로 읽으면 50픽셀의 차이를 놓칩니다.
border-box는 안쪽 여백과 테두리를 지정 너비 안에 넣습니다
border-box(보더 박스)로 바꾸면 보통 지정한 width가 테두리 바깥 경계까지의 너비가 됩니다. 같은 180픽셀 가운데 좌우 패딩과 테두리가 합계 50픽셀을 차지하므로 내용 영역은 130픽셀입니다. 바깥 너비를 유지하는 대신 글을 넣을 수 있는 폭이 좁아집니다.
활동의 기본 설정에서 크기 기준만 바꾸세요. 선언한 너비와 패딩·테두리는 그대로인데 실제 상자의 바깥 너비가 230픽셀에서 180픽셀로 줄어듭니다. ‘브라우저 실측’ 값은 설명에 적힌 답을 복사한 값이 아니라 브라우저가 실제로 배치한 요소의 경계를 잰 값입니다.
내용 영역은 음수 너비가 될 수 없습니다
border-box라면 어떤 조건에서도 바깥 너비가 width와 같을까요? 선언 너비를 40픽셀, 좌우 패딩을 30픽셀씩, 테두리를 5픽셀씩으로 바꾸면 패딩과 테두리만 70픽셀입니다. 내용 영역을 −30픽셀로 만들 수 없으므로 내용 영역은 0이 되고 실제 바깥 너비는 70픽셀이 됩니다.
활동에서 이 경계 조건을 직접 선택해 보세요. “border-box는 지정한 너비를 지킨다”라는 짧은 설명에는 내용 영역이 0 아래로 줄지 않는 조건이 빠져 있습니다. 수치가 극단으로 갈 때도 예측이 맞는지 시험하면 AI의 설명이 적용되는 범위를 알 수 있습니다.
바깥 여백과 화면 배치까지 한꺼번에 단정하지 않습니다
테두리 바깥 너비를 알아도 이웃 요소까지 차지하는 공간을 모두 안 것은 아닙니다. 마진은 box-sizing이 포함하는 영역 밖에 있습니다. 또한 실제 페이지에서는 최소 너비, 부모 요소, 플렉스 배치, 배율과 변형 등이 눈에 보이는 결과에 관여할 수 있습니다.
AI가 화면 넘침을 고칠 때에는 먼저 해당 요소의 계산된 box-sizing과 너비, 좌우 패딩·테두리를 확인해야 합니다. 그다음 실제 경계를 측정하고, 예상과 다르면 다른 배치 조건을 조사합니다. 이 활동은 원인을 한 가지씩 분리하기 위해 그런 추가 조건을 제거한 작은 시험입니다.
예측과 실측이 맞아야 설명을 채택합니다
패딩을 바꾸기 전에 바깥 너비가 얼마나 달라질지 먼저 적으세요. content-box에서 양쪽 패딩을 각각 5픽셀씩 늘리면 바깥 너비는 10픽셀 늘어납니다. border-box에서 내용 영역이 충분하다면 바깥 너비는 같고 내용 영역만 10픽셀 줄어듭니다.
계산값과 실측값이 같다는 결과는 이 요소와 이 설정에서의 확인입니다. 모든 웹페이지가 같은 배치라는 증거로 확대하지 마세요. 원문 규칙, 입력한 스타일, 실제 측정값을 함께 남기면 다른 사람이 같은 조건으로 다시 확인할 수 있습니다.