박스 크기와 CSS 적용

왜 100%인 카드가 밖으로 나가나요

지역 행사 소개와 검색 폼은 앞 모듈에서 완성했습니다. 이번에는 목록에 테두리와 여백을 더합니다. 디자인 시안의 카드 너비만 복사하면 작은 화면에서 가로 스크롤이 생길 수 있습니다. 너비가 무엇을 포함하는지 설명할 수 있어야 원인을 찾습니다. 눈으로 조금씩 줄이는 대신 부모 공간, 카드의 내용 영역, 안쪽 여백, 테두리, 바깥 여백을 나눠 확인합니다.

실습의 카드에는 긴 제목, 긴 주소, 큰 원본 이미지가 들어 있습니다. 첫 레슨은 상자 자체의 크기만 고칩니다. 긴 문자열과 이미지 때문에 생기는 넘침은 다음 레슨에서 따로 다룹니다. 여기서 한 속성을 바꾸고 모든 화면 문제가 해결됐다고 판단하면 원인이 다른 실패를 놓칩니다. 수정 후 어떤 상자의 계산이 달라졌는지 설명하는 것이 이번 목표입니다.

무엇이 카드의 너비에 포함되나요

content-box에서 지정한 width는 내용 영역의 너비입니다. width가 288px이고 좌우 padding이 각각 16px, 좌우 border가 각각 1px라면 테두리까지의 너비는 322px입니다. 부모가 288px여도 width:100%에 같은 여백을 더하면 부모보다 커집니다. margin은 이 계산 밖에서 주변 요소와의 거리를 만듭니다. 테두리까지의 크기와 주변 공간을 구분합니다.

border-box에서는 지정한 width에 padding과 border가 포함됩니다. 같은 조건에서 width가 288px이면 내용 영역은 254px입니다. margin까지 포함되는 것은 아닙니다. 아주 작은 상자에 여백과 테두리가 과도하면 내용 영역을 음수로 만들 수는 없으므로 이 속성만으로 어떤 크기도 보장한다고 생각하지 않습니다. 텍스트가 잘 들어가는지도 확인합니다.

width:100%는 뷰포트 전체가 아니라 해당 요소의 포함 블록을 기준으로 합니다. main에 좌우 여백이 있고 그 안에 카드가 있으면 카드의 기준 공간은 main의 내용 영역입니다. max-width는 큰 창에서 읽는 줄이 지나치게 길어지는 것을 제한합니다. 가변 width와 상한을 함께 사용하면 작은 창에 맞추면서 큰 창에서는 가운데 정렬할 수 있습니다.

어떻게 적용 규칙을 찾나요

CSS는 선택자로 요소를 고르고 선언으로 표현을 정합니다. .card는 card 클래스를 가진 요소를, main은 main 태그를 선택합니다. 쉼표로 구분한 선택자는 같은 선언을 여러 대상에 적용합니다. 실습에서는 모든 일반 요소와 가상 요소에 border-box를 적용합니다. box-sizing은 기본적으로 상속되지 않으므로 부모에만 선언한 뒤 자식도 같을 것이라고 기대하지 않습니다.

같은 출처와 중요도 등의 조건에서 선택자 우선순위가 높은 선언이 적용됩니다. id 선택자는 클래스보다, 클래스는 태그보다 우선합니다. 우선순위가 같다면 뒤에 쓴 선언이 이깁니다. 스타일이 안 바뀌면 개발자 도구에서 취소선이 있는 선언과 실제 적용 선언을 비교합니다. 모든 상황을 파일의 마지막 줄만으로 설명하지 말고 인라인 선언, 중요 표시, 적용된 규칙도 확인합니다.

실습 starter의 마지막 TODO 블록에 고정 너비가 있습니다. 앞부분에 정상 선언을 추가하고 TODO를 남겨 두면 같은 클래스의 뒤 선언이 다시 고정 너비를 적용할 수 있습니다. 해당 실패 블록을 교체합니다. !important를 추가해 덮는 방식은 다음 수정 때 규칙 관계를 복잡하게 만들 수 있습니다. 문제의 출처를 찾고 필요 없는 선언을 제거하는 연습을 합니다.

직접 계산과 화면을 연결합니다

작은 화면 320px에서 main의 좌우 padding을 16px씩으로 가정하면 내용 공간은 288px입니다. 이 숫자는 기본 글꼴 크기 16px에서 1rem을 사용한 계산 예입니다. 사용자의 글꼴 설정이 다르면 실제 값도 달라지므로 개발자 도구에서 확인합니다. rem은 루트 글꼴 크기를 기준으로 하는 단위이며 px 숫자와 항상 같은 것으로 바꿔 적지 않습니다.

개발자 도구 요소 탭에서 카드를 선택하고 박스 모델 그림을 확인합니다. computed에서 box-sizing, width, padding, border를 읽습니다. getBoundingClientRect의 width는 테두리까지의 사각형 폭을 볼 때 도움이 됩니다. 변형이 있는 경우 화면 좌표 측정 의미가 달라지므로 이번 실습처럼 transform 없는 상자에서 비교합니다. 계산한 내용 폭과 테두리 폭을 뒤섞지 않습니다.

요소 탭에서 임시로 너비를 바꾸는 것은 원인 확인용입니다. 편집기의 assets/site.css에 저장하고 새로고침해야 압축 파일을 받은 동료에게 같은 결과를 전달할 수 있습니다. 스타일 요청 경로가 틀리면 계산 자체가 적용되지 않습니다. 카드가 그대로라면 먼저 link의 상대 경로와 현재 연 파일을 확인하고, 그다음 적용된 선언을 살핍니다.

실패 메시지와 완료 기준

FAIL 카드 padding을 포함하는 가변 너비는 제공 계약의 .card 너비나 여백이 맞지 않는다는 뜻입니다. Python traceback이나 npm ENOENT는 레이아웃 실패와 다른 환경 문제입니다. package.json 폴더에서 실행했는지 먼저 확인합니다. 검사를 삭제하거나 기대값을 바꾸면 카드가 고쳐지지 않습니다. 첫 FAIL의 대상 선택자를 찾아 정상 파일과 비교한 뒤 다시 검사합니다.

자동 검사는 제공된 선택자의 CSS 선언과 HTML 계약을 읽습니다. 실제 CSS 엔진의 모든 우선순위와 렌더링을 계산하지 않습니다. PASS는 이 레슨에서 요구한 선언을 작성했다는 증거입니다. 320px에서 실제 카드 폭을 확인하고 남은 넘침 원인이 글인지 이미지인지 분리해 LAYOUT.md에 적습니다. 아직 하지 않은 화면 관찰은 미확인으로 남깁니다.

이 레슨에서는 예쁜 색보다 재현 가능한 크기를 먼저 만듭니다. 기존 검색어 이름 q, 지역 이름 region, GET 목적지 results.html을 유지합니다. 스타일을 바꾸는 과정에서 HTML을 새로 만들어 폼 계약을 잃으면 앞 단계의 기능이 후퇴합니다. document-check.py가 이전 모듈의 검사 18개를 함께 실행하는 이유입니다. 파일 전체를 다음 실습으로 넘길 수 있는 상태를 유지합니다.

더 읽기와 설명 연습

테두리 포함 여부는 MDN box-sizing 설명으로 확인할 수 있습니다. 아래 서재 연결은 긴 콘텐츠와 Grid 최소 크기를 확장해 다룹니다. 이 레슨을 마치면 부모 내용 공간이 288px인 상황에서 322px 카드가 만들어진 이유와 border-box 적용 후 내용 공간이 달라지는 이유를 동료에게 설명합니다.