Firefox DevTools 내 border-box 요소의 Width/Height 편집 제약 해결

Context

Box Model 패널에서 box-sizing: border-box 속성이 적용된 요소의 크기 편집이 불가능했던 제약 상황. BoxModelMain.js 내의 명시적 편집 차단 로직으로 인해 UI 상의 상호작용이 제한된 상태.

Technical Solution

• BoxModelMain.js 내 border-box 요소의 편집을 차단하던 기존 조건문 제거를 통한 Edit 권한 확보
• border-box 모델의 특성을 반영한 Width/Height 값의 정규화 로직 구현
• 에디터 진입 시 padding과 border 값을 제외하여 순수 Content Size를 표시하는 연산 적용
• 값 변경 후 저장 시 제외했던 padding과 border 값을 다시 합산하여 정확한 CSS Value를 반영하는 역연산 처리
• UI 표시 값과 실제 CSS 적용 값 사이의 정합성을 맞추기 위한 데이터 변환 레이어 추가