Sofia Emelianova
Chrome DevTools를 사용하면 CSS Flexbox 레이아웃 디버깅을 직관적으로 수행할 수 있습니다. 요소 패널에서는 컨텍스트 인식 Flexbox 편집기와 맞춤설정 가능한 오버레이를 제공합니다.
다음 방법에 대해 알아보려면 동영상을 시청하세요.
- Flexbox 편집기를 사용하여 Flexbox 속성을 입력하는 대신 버튼 하나만 클릭하여 변경할 수 있습니다.
- 표시 영역에서 Flexbox 오버레이를 전환하면 변경사항을 즉시 확인할 수 있습니다.
- 요소 > 레이아웃 > Flexbox 섹션을 사용하여 모든 요소 목록을 확인하고 DOM 트리에서 찾을 수 있습니다. 또한 여기에서 오버레이 색상을 맞춤설정할 수 있습니다.
CSS Flexbox에 관한 일반적인 내용을 자세히 알아보려면 CSS > Flexbox 알아보기를 참고하세요.
DevTools에서 디버깅을 더 실습해 보려면 CSS Flexbox 레이아웃 검사 및 디버그 튜토리얼을 따르세요.