DIV+CSS를 사용하여 웹 페이지를 만들 때 흔히 발생하는 실수 요약_경험 교환

1. HTML 요소에 철자 오류가 있는지, 닫는 태그를 잊어버렸는지 확인하세요.
베테랑이라도 div의 중첩 관계에서 실수를 저지르는 경우가 많습니다. Dreamweaver의 확인 기능을 사용하여 오류를 확인할 수 있습니다.

2. CSS가 올바른지 확인하세요.
철자 오류가 있는지, 끝자리 }를 잊어버렸는지 등을 확인하세요. CleanCSS를 사용하여 CSS의 철자 오류를 확인할 수 있습니다. CleanCSS는 CSS의 무게를 줄이는 도구이지만 철자 오류도 확인할 수 있습니다.

3. 오류가 발생한 위치를 확인합니다.
오류가 전체 레이아웃에 영향을 미치는 경우 특정 div 블록을 삭제한 후 화면이 정상으로 돌아올 때까지 div 블록을 하나씩 삭제하여 오류가 발생한 위치를 확인할 수 있습니다.

4. 테두리 속성을 사용하여 오류 요소의 레이아웃 특성을 결정합니다.
부동 속성 레이아웃을 사용하면 주의하지 않으면 오류가 발생할 수 있습니다. 이때 요소의 경계를 결정하기 위해 요소에 border 속성을 추가하면 오류의 원인이 밝혀집니다.

5. float 요소의 상위 요소는 clear 속성을 지정할 수 없습니다.
MacIE에서 float 요소의 상위 요소에clear 속성을 사용하면 주변 float 요소의 레이아웃이 혼란스러워집니다. 이것은 MacIE의 유명한 버그입니다. 모르면 우회하게 됩니다.

6. float 요소는 너비 속성을 지정해야 합니다.
너비가 지정되지 않은 부동 요소를 표시할 때 많은 브라우저에 버그가 있습니다. 따라서 float 요소의 내용에 관계없이 width 속성을 지정해야 합니다.
그리고 요소를 지정할 때 단위는 px 대신 em을 사용해 보세요.

7. Float 요소는 여백, 패딩 등의 속성을 지정할 수 없습니다.
IE에는 여백과 패딩이 지정된 부동 소수점 요소를 표시할 때 버그가 있습니다. 따라서 float 요소에 여백 및 패딩 속성을 지정하지 마십시오(여백 및 패딩을 설정하기 위해 float 요소 내에 div를 중첩할 수 있음). 해킹을 사용하여 IE에 특수 값을 지정할 수도 있습니다.

8. float 요소의 너비의 합은 100% 미만이어야 합니다.
float 요소의 너비 합이 정확히 100%인 경우 일부 고대 브라우저에서는 이를 제대로 표시하지 않습니다. 따라서 너비의 합이 99% 미만인지 확인하시기 바랍니다.

9. 기본 스타일을 재설정하셨나요?
브라우저마다 여백, 패딩 등과 같은 특정 속성을 다르게 해석합니다. 따라서 개발하기 전에 모든 margin과 padding을 0으로, 목록 스타일을 없음으로 설정하는 등의 작업을 수행하는 것이 가장 좋습니다.

10. DTD 작성을 잊으셨나요?
다른 브라우저를 어떻게 조정하더라도 표시 결과가 여전히 다른 경우 페이지 시작 부분에 다음 DTD 줄을 작성하는 것을 잊었는지 확인할 수 있습니다.
nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">