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