브라우저가 HTML 요소를 화면에 배치하는 가장 근본적인 물리 법칙인 박스 모델의 구조와 계산 방식을 정밀하게 분석했다.
모든 웹 요소가 사각형 박스로 처리된다는 원리를 바탕으로 콘텐츠 영역부터 외부 여백까지의 유기적인 관계를 파악하여 레이아웃을 설계했다.
Content, Padding, Border, Margin으로 구성된 4대 요소의 역할을 정의하고 이들이 합쳐져 실제 점유 공간이 결정되는 과정을 추적했다.
기본적인 content-box 방식에서 발생하는 크기 계산의 혼란을 방지하기 위해 패딩과 테두리를 너비에 포함시키는 border-box 속성을 전면 적용했다.
인접한 블록 요소 사이에서 발생하는 마진 상쇄 현상의 원인을 분석하고 레이아웃 설계 시 의도치 않은 간격이 생기지 않도록 방어적인 코드를 작성했다.
박스 모델에 대한 정확한 이해가 기기별로 일관된 화면을 구현하는 최적화의 시작점임을 깨달았다.
전역 스타일 시트에 border-box 설정을 기본으로 적용하여 레이아웃의 예측 가능성을 높이고 개발 효율을 향상시켰다.
한 치의 오차도 없는 견고한 웹 레이아웃을 구축하기 위한 기술적 기초를 탄탄히 다졌다.
정확한 수치 계산이 사용자에게 정갈한 UI를 제공하는 출발점임을 다시 한번 가슴에 새겼다.
