AI가 CSS의 width만 보고 화면의 상자 너비를 말해도 될까?
같은 width에 안쪽 여백과 테두리를 더하고 box-sizing을 바꾸어, 선언한 너비와 실제 테두리 바깥 너비를 비교합니다.
그림에서 무엇을 볼까요?
width 180픽셀, 좌우 padding 20픽셀과 border 5픽셀에서 content-box의 바깥 너비는 230픽셀, border-box는 180픽셀인 비교도
AI에게 “width: 180px인 상자는 180픽셀 너비인가?”라고 물으면 조건을 더 확인해야 합니다. width(위드, 너비)는 상자의 가로 크기를 지정하는 속성입니다. 웹의 상자는 내용 영역을 중심으로 안쪽 여백인 패딩(padding), 테두리인 보더(border), 바깥 여백인 마진(margin)이 이어집니다. width가 어느 경계까지를 뜻하는지는 box-sizing(박스 사이징, 크기 기준) 속성이 정합니다.
content-box(콘텐츠 박스)는 내용 영역의 너비를 지정합니다. width 180픽셀에 좌우 패딩 20픽셀씩, 테두리 5픽셀씩을 더하면 테두리 바깥 너비는 180 + 20 + 20 + 5 + 5 = 230픽셀입니다. 같은 숫자를 모든 경계의 너비로 읽으면 50픽셀의 차이를 놓칩니다.
함께 확인할 점
CSS(씨에스에스, 웹의 모양을 정하는 규칙)의 고정 픽셀 너비를 사용하는 단순한 블록입니다. 바깥 여백, 최소·최대 너비, 변형, 가변 배치의 수축은 제외하며 계산값과 getBoundingClientRect의 실측값을 비교합니다.
생각해 볼 질문
같은 width에서 두 크기 기준의 내용 너비·바깥 너비·실측값을 기록하세요. 계산과 실측이 다르면 다음에 확인할 배치 조건도 한 가지 적어 보세요.
평균이 같으면 모습도 같을까?
더 많이 수료한 반이 성공률도 높을까?
반납함 두 곳은 어디에 놓아야 할까?