계산된 스타일 및 박스 모델 검사기

Chrome DevTools → 요소 → 계산됨 탭에는 계단식 적용, 상속, 우선순위 해결이 끝난 뒤 선택한 요소의 모든 CSS 속성에 대한 최종 계산값이 표시됩니다. 이는 "무엇이 실제로 적용되었는가?"라는 질문에 답하며, "무엇을 작성했는가?"를 보여주는 것이 아닙니다.

계산됨 패널에는 선택한 요소의 콘텐츠, 패딩, 테두리, 여백 크기를 보여주는 대화형 상자 모델 다이어그램이 표시됩니다. 크기를 클릭하면 해당 크기를 설정한 CSS 규칙이 강조되고 스타일 패널로 이동합니다.

필터 상자에 입력하면 특정 계산 속성을 빠르게 찾을 수 있습니다. 상속된 속성과 브라우저 기본 속성까지 포함하려면 "모두 표시"를 선택하십시오. 선택을 해제하면 기본값이 아닌 속성만 표시되어 실제로 적용된 관련 스타일을 가장 빠르게 확인할 수 있습니다.

계산됨 패널에서 회색으로 표시되는 속성은 부모 요소에서 상속된 것입니다. 상속된 속성을 클릭하면 해당 속성을 설정한 요소와 규칙으로 이동하므로, 마크업에서 부모 요소를 수동으로 검사하지 않고도 계단식 적용을 추적할 수 있습니다.

margin: 16px 8px를 작성하면 margin-top, margin-right, margin-bottom, margin-left라는 네 가지 계산값으로 확장됩니다. 계산됨 패널에는 항상 개별 세부 속성이 표시되므로 비대칭 간격 문제를 디버깅하는 데 유용합니다.

계산된 색상값은 작성 방식과 관계없이 항상 rgb() 또는 rgba() 형식으로 표시됩니다. 스타일 패널에서 색상 견본을 클릭하면 표시 형식(hex, hsl, rgb)을 전환할 수 있습니다. 계산됨 패널에는 항상 최종적으로 결정된 색상이 표시됩니다.

계산된 글꼴 크기, 글꼴 모음, 줄 높이, 자간을 검사하여 타이포그래피 토큰이 올바르게 적용되었는지 확인하십시오. 요청한 글꼴을 불러오지 못하면 브라우저 글꼴 대체가 계산된 글꼴 모음에 표시됩니다.

box-sizing: border-box는 너비에 패딩과 테두리를 포함하고, box-sizing: content-box(기본값)는 이를 제외합니다. DevTools의 상자 모델 다이어그램에는 적용된 모델이 반영됩니다. 콘텐츠 너비와 전체 너비를 비교하여 상자 크기 지정 동작을 확인하십시오.

블록 요소 사이의 세로 여백은 두 값 중 큰 값으로 축소됩니다. 상자 모델 다이어그램에는 실제로 적용된 여백이 표시됩니다. Layout Inspector와 함께 사용하여 작성된 값과 다른 축소된 여백을 식별하십시오.

스타일 패널에는 요소를 대상으로 하는 모든 규칙이 우선순위 순서로 표시됩니다. 취소선이 그어진 규칙은 다른 규칙으로 덮어쓰인 것입니다. 속성 충돌에서 어떤 규칙이 적용되는지 확인하려면 스타일 패널에서 취소선이 없는 가장 위의 선언을 찾으십시오.

브라우저 사용자 에이전트 스타일시트 규칙은 스타일 패널 하단에 "user agent stylesheet"라는 레이블로 표시됩니다. 계산됨 패널에는 해당 규칙의 최종 계산값이 표시됩니다. CSS 초기화 또는 Normalize.css로 이를 초기화하여 브라우저 간에 일관된 기준을 설정하십시오.

계산된 스타일 패널에는 스타일 패널에 없는 어떤 정보가 표시됩니까?

계산된 스타일 패널과 상자 모델 다이어그램은 계단식 적용이 해결된 후 모든 CSS 속성의 최종 결정값을 보여줍니다. 이를 사용하여 상속을 추적하고, 단축 속성 확장을 디버깅하며, 상자 크기 지정을 조사하고, 모든 요소에서 우선순위 충돌을 해결하는 규칙을 식별하십시오.