CSS 레이아웃
당신의 CSS 박스가 올바르게 위치하지 않았을 때 왜 그런지 이해하기는 어렵습니다. Firebug는 당신의 눈이 되어 그것을 측정하고 모든 offsets, margins, borders, padding, 그리고 사이즈를 표현합니다.
박스모델 표현
CSS를 사용하여, 모든 엘리먼트는 margin, border, padding, 그리고 content의 중첩된 박스들로 구성됩니다. Firebug의 탭안에서 HTML 엘리먼트에 마우스를 가져다대면, 페이지내에서 각각 다른 색상으로 표현되는 엘리먼트의 박스들을 볼 수 있습니다. margin과 padding의 차이를 시각화하여 보여주는데 이보다 빠른 방법은 없습니다.
각각의 가장자리 측정하기
Firebug의 레이아웃 탭은 박스모델에 의해 각각의 박스와 각각의 넓이를 분석하여 시각화하여 보여줍니다. 추가적으로, 가장 안쪽의 width와 height를 보여주고, 그 부모에 대해서 x, y offset도 보여줍니다.
자와 가이드
부끄러워하지 말고, 마우스를 layout탭 안의 박스에 가져가세요. 그렇게 하면, 자와 가이드가 페이지 위에 나타날 것입니다.
자는 현재 엘리먼트의 부모엘리먼트를 둘러싸고 나타나며 주변에 나타나 그 엘리먼트의 left, top, bottom, right CSS 속성에 대하여 보여줍니다. 이 가이드는 엘리먼트의 각 모서리에 접하고 픽셀 완벽주의자들에게 박스들의 정렬이 얼마나 가까이 되어있는지 보여주는 훌륭한 방법입니다.
이동하기
Firebug에서 모든 다른 탭처럼, Layout탭에서도 수정이 가능합니다. 보여지는 숫자를 클릭하면 작은 에디터가 나타날 것입니다. 이 CSS 에디터에서, 위 아래 방향키를 사용하여 1씩 숫자를 변경할 수 있고, 또는 page up 과 down 키를 이용하여 10단위로 변경할 수 있습니다.