DevTools 팁: CSS 그리드 검사 방법

Sofia Emelianova

Chrome DevTools를 사용하면 다양한 시각화 옵션으로 CSS 그리드 레이아웃을 직관적으로 디버그할 수 있습니다.

동영상을 시청하여 요소 패널에서 그리드 오버레이를 전환하고 다음 작업을 하는 방법을 알아보세요.

• 그리드 레이아웃을 시각화하고 검사합니다.
• 그리드 항목을 배치할 때 참조할 행 및 열 번호를 확인하세요.
• 그리드 항목이 많고 숫자가 혼란스러운 경우 선 및 영역 이름을 사용하고 오버레이에서 확인합니다.
• 트랙 크기를 확인합니다.

또한 요소 > 스타일 창의 그리드 편집기를 사용하면 CSS 규칙을 입력하는 대신 버튼을 클릭하여 그리드 레이아웃에서 항목과 콘텐츠를 정렬할 수 있습니다.

실습 위주의 학습 환경을 원한다면 CSS 그리드 검사 튜토리얼을 따르세요.