CSS로 단순한 아티클 레이아웃 이상의 복잡한 웹사이트 레이아웃을 스타일링하다 보면 코드가 순식간에 엉망이 되기 쉽습니다. 그 결과 다양한 레이아웃 문제가 발생하곤 하죠.
가장 흔히 겪는 CSS 레이아웃 문제는 다음과 같습니다.
- 요소가 서로 겹치는 현상 (대체로 overflow 문제)
- 요소가 무너지거나 붕괴하는 현상 (대체로 margin 문제)
- 불필요한 여백 발생 (원인은 매우 다양함)
이런 레이아웃 문제를 즉시 시각적으로 파악하는 아주 간단한 방법이 있습니다. 바로 CSS의 전체 선택자(universal selector) *를 사용해 모든 HTML 요소에 테두리를 입히는 것입니다.
스타일시트 최상단에 아래 코드를 추가해 보세요.
* {
border: 1px solid red;
}실제로 제 웹사이트에 적용해 본 결과, 레이아웃에 조정이 필요하다는 사실을 바로 알아차릴 수 있었습니다.
눈에 띄는 레이아웃 문제가 없더라도 이 테두리 트릭은 나중에 문제로 이어질 수 있는 잠재적 요소를 미리 드러내고 짚어 주는 데 큰 도움이 됩니다.
추가 팁: outline 속성 활용하기
border 속성 대신 outline 속성을 사용할 수도 있습니다. outline은 요소의 크기와 레이아웃에 영향을 주지 않고 공간을 차지하지 않기 때문에, 오히려 더 깔끔하고 안전한 해결책이 될 수 있습니다.