Sofia Emelianova
Chrome DevTools를 사용하면 다양한 시각화 옵션을 사용하여 CSS 그리드 레이아웃을 직관적으로 디버깅할 수 있습니다.
요소 패널에서 그리드 오버레이를 전환하고 이를 사용하여 다음을 수행하는 방법을 알아보려면 동영상을 시청하세요.
- 그리드 레이아웃 시각화 및 검사
- 그리드 항목을 배치할 때 참조할 행 및 열 번호를 확인합니다.
- 그리드 항목이 많고 숫자가 혼동되는 경우 선 및 영역 이름을 사용하여 오버레이에 표시합니다.
- 트랙 크기를 확인합니다.
또한 Elements > Styles 창에 있는 Grid Editor를 사용하면 CSS 규칙을 입력하는 대신 버튼 클릭 한 번으로 그리드 레이아웃에서 항목과 콘텐츠를 정렬할 수 있습니다.
더 실습적인 학습 경험을 원한다면 CSS 그리드 검사 튜토리얼을 따르세요.