DevTools 팁: CSS Flexbox 검사 및 디버그 방법

Sofia Emelianova

Chrome DevTools를 사용하면 CSS flexbox 레이아웃을 직관적으로 디버그할 수 있습니다. 요소 패널에는 컨텍스트 인식 Flexbox 편집기와 맞춤설정 가능한 오버레이가 제공됩니다.

동영상을 시청하여 다음 작업을 수행하는 방법을 알아보세요.

• Flexbox 편집기를 사용하면 입력하는 대신 버튼 클릭으로 Flexbox 속성을 변경할 수 있습니다.
• 뷰포트에서 flexbox 오버레이를 전환하면 변경사항을 즉시 확인할 수 있습니다.
• 요소 > 레이아웃 > 플렉스박스 섹션을 사용하여 모든 요소의 목록을 확인하고 DOM 트리에서 요소를 찾습니다. 또한 여기에서 오버레이 색상을 맞춤설정할 수 있습니다.

CSS Flexbox에 관해 자세히 알아보려면 CSS 학습 > Flexbox를 참고하세요.

DevTools에서 더 실용적인 디버깅 환경을 사용하려면 CSS flexbox 레이아웃 검사 및 디버그 튜토리얼을 따르세요.