Flexbox 및 Grid 레이아웃 검사기

Chrome DevTools는 요소 패널에서 DOM 노드 옆에 "flex" 배지를 표시하여 플렉스 컨테이너를 나타냅니다. 배지를 클릭하면 플렉스 상호작용 오버레이가 전환됩니다. 이 오버레이에는 주축, 교차축, 항목 경계, 간격을 나타내는 색상 선이 표시됩니다.

그리드 컨테이너에는 "grid" 배지가 표시됩니다. 이를 클릭하면 열, 행, 간격을 나타내는 색상 선이 있는 그리드 오버레이가 전환됩니다. 레이아웃 패널에 고정한 영구 오버레이는 뷰포트를 스크롤하거나 크기를 조정해도 계속 표시됩니다.

DevTools → 요소 → 레이아웃 탭에는 페이지의 모든 플렉스 및 그리드 컨테이너가 나열됩니다. 컨테이너 이름을 클릭하면 DOM에서 해당 컨테이너가 선택되고 오버레이가 전환됩니다. 오버레이 모양(선 색상, 레이블 표시 여부, 트랙 크기)은 여기에서 구성할 수 있습니다.

"트랙 크기 표시"를 활성화하면 오버레이에 트랙 이름과 크기가 표시됩니다. 고유 크기(auto, min-content, max-content)와 분수 단위(fr)는 계산된 픽셀값으로 표시되어 fr 단위가 사용 가능한 공간을 어떻게 나누는지 보여줍니다.

플렉스 항목(플렉스 컨테이너의 자식)을 선택합니다. 스타일 패널에는 flex 약식 속성의 확장 내용인 성장, 축소, 기준 크기가 표시됩니다. 오버레이는 항목의 주축 크기와 기준 크기, 적용된 성장 또는 축소를 강조 표시합니다.

grid-template-areas가 설정된 그리드 컨테이너에는 이름이 지정된 영역의 오버레이가 표시됩니다. 각 이름이 지정된 영역에는 레이블과 색상이 지정됩니다. 이 시각화 기능을 사용하면 그리드 영역 할당이 의도한 레이아웃 서식과 일치하는지 쉽게 확인할 수 있습니다.

DevTools에서는 서브그리드 컨테이너를 별도로 표시합니다. 서브그리드의 트랙 선은 부모 그리드의 트랙과 정렬되며, 오버레이에 이 정렬 상태가 시각적으로 표시됩니다. 이를 통해 서브그리드 항목이 부모 그리드의 좌표계에 참여하는지 확인할 수 있습니다.

항목이 어긋나는 원인은 대개 주축 정렬, 교차축 정렬 또는 자체 정렬 값이 잘못되었기 때문입니다. 플렉스/그리드 오버레이에는 축 선을 기준으로 한 항목의 위치가 표시됩니다. 스타일 패널에서 정렬 속성을 전환해 보고 오버레이가 실시간으로 어떻게 바뀌는지 확인해 보십시오.

오버레이는 항목 사이의 간격을 색이 있는 띠로 표시합니다. 이를 통해 간격 값을 쉽게 확인하고, 간격이 간격 속성에서 비롯된 것인지 아니면 여백에서 비롯된 것인지 식별할 수 있습니다. 플렉스 행에서는 여백이 예상치 않게 합쳐질 수 있습니다.

그리드 오버레이는 암시적 트랙(넘치는 항목을 위해 자동으로 생성됨)과 명시적 트랙(그리드 서식에 정의됨)을 구분합니다. 점선은 암시적 트랙을 나타냅니다. 콘텐츠로 인해 예상하지 못한 암시적 트랙이 생성되면 오버레이에서 넘침 패턴을 즉시 확인할 수 있습니다.

레이아웃 검사기를 기기 모드와 함께 사용하십시오. 뷰포트 크기를 조정하면서 플렉스 줄바꿈과 그리드의 자동 채우기/자동 맞춤 트랙이 실시간으로 다시 배치되는 모습을 관찰할 수 있습니다. 이렇게 하면 브라우저 창의 크기를 수동으로 조정하는 것보다 반응형 레이아웃의 문제를 더 일찍 발견할 수 있습니다.

DevTools 그리드 오버레이에는 렌더링된 페이지에서 볼 수 없는 어떤 정보가 표시됩니까?

DevTools Flexbox 및 그리드 레이아웃 검사기는 축 선, 트랙 크기, 간격, 이름이 지정된 영역과 암시적 트랙을 대화형 오버레이로 시각화합니다. 오버레이를 관리하는 레이아웃 패널과 함께 사용하면 CSS만 읽는 것보다 복잡한 CSS 레이아웃을 더 빠르고 직관적으로 디버깅할 수 있습니다.