CSS 워크플로, 레이아웃을 빠르게 디버깅하기 위해 테두리 사용

CSS(간단한 기사 레이아웃 이상)로 복잡한 웹 사이트 레이아웃의 모든 수준을 스타일링할 때 상황이 빠르게 지저분해질 수 있습니다. 이로 인해 다양한 레이아웃 문제가 발생하는 경우가 많습니다.

가장 일반적인 CSS 레이아웃 문제는 다음과 같습니다.

• 겹치는 요소(종종 오버플로 문제)
• 요소 축소(종종 여백 문제)
• 여백의 공백(여러 가지 원인으로 인해 발생할 수 있음)

레이아웃 문제에 대한 즉각적인 시각적 신호를 얻는 간단한 방법은 CSS의 범용 선택기 \*

CSS 스타일시트 상단에 다음을 추가하세요.

\* { 
    border: 1px solid red; 
}

나는 내 웹사이트에서 그것을 했고 내 레이아웃에 약간의 조정이 필요할 수 있다는 것을 즉시 깨달았습니다.

레이아웃에 시각적 문제가 없더라도 이 테두리 트릭은 향후 문제로 이어질 수 있는 사항을 노출하거나 지적하는 데 도움이 될 수 있습니다.

수정

이는 outline으로도 수행할 수 있습니다. border 속성 대신 속성. 윤곽선은 공간을 차지하지 않으므로 더 나은 솔루션일 수 있습니다.