Computed 탭
요소에 실제로 적용된 CSS를 확인할 수 있습니다.
window.getComputedStyle()이 반환하는 값과 동일합니다.
각 속성명 왼쪽의 펼치기 아이콘을 누르면 해당 속성에 지정된 값들을 볼 수 있습니다.
순서는 CSS 우선순위에 따라 위에서 아래로 나열되며, 가장 맨 위의 값이 적용된 값입니다.
각 속성값 왼쪽의 화살표 아이콘을 누르면, Styles 탭에 해당 속성이 포함된 CSS 규칙으로 이동합니다.
실시간으로 계산된 값은 옅은 텍스트로 표기됩니다.
별도로 지정하지 않았으나 계산된 값 등은 옅은 텍스트로 표기됩니다.
- 부모의 width 만큼 width를 차지하게된 자식 div의 width
- 자식들의 크기만큼 width나 height 값이 계산된 부모 요소의 width, height
Show all 기능을 통해 모든 속성을 볼 수 있습니다.
기본적으로 Computed 탭은 적용된 값이 없는(초기값인) 속성과 커스텀 속성(CSS 변수)를 보여주지 않습니다. Show all을 활성화하면 모든 속성을 볼 수 있습니다.
속성들을 그룹화하여 볼 수 있습니다.
Group을 활성화하면 속성들을 성격에 따라 그룹화하여 볼 수 있습니다(제가 제일 좋아하는 기능 중 하나입니다. 여러 속성들과 익숙해짐에 있어서도 도움이되곤 합니다).
