웹페이지 제작 시 마스터해야 할 CSS 레이아웃 기술 8가지_경험교류

1. 궁금한 점이 있으면 바로 확인

오류 발생 시 원본 코드를 간단하게 확인해볼 수 있다면 머리 아픈 일을 많이 줄일 수 있습니다. W3C에는 XHTML 및 CSS에 사용할 수 있는 탐지 도구가 있습니다. http://validator.w3.org를 참조하세요. 파일 시작 부분의 오류는 부적절한 구조 및 기타 요인으로 인해 더 많은 오류를 유발할 수 있습니다. 가장 눈에 띄는 오류 중 일부를 먼저 수정한 후 다시 확인하면 오류 수가 줄어들 수 있습니다.

2. 플로팅 기능을 사용할 때는 지침을 적절하게 삭제해야 합니다.

플로팅은 위험한 기능이며 예상한 결과를 얻지 못할 수도 있습니다. 주변 컨테이너의 경계를 넘어 확장되는 부동 요소나 기타 비정상적인 상황이 발생하는 경우 올바르게 수행하고 있는지 확인하세요. Complex Spiral Consulting Web에서 Eric Meyer의 튜토리얼을 참조하세요.

3. 테두리가 겹치지 않도록 패딩이나 테두리를 사용하세요.

있어야 할 작은 공간 때문에 애쓰거나, 작은 공간이 필요한 경우에는 그럴 수 없습니다. 무슨 일이 있어도 짜내십시오. 여백을 사용하면 경계가 겹치기 쉽습니다. Andy Budd가 자신의 웹사이트에서 가능한 일을 설명합니다.

4. 요소에 패딩/테두리와 높이 또는 너비를 동시에 지정하지 마세요.

Windows 버전의 IE에서는 너비와 높이 계산 문제가 자주 발생합니다. 이 문제를 해결하는 방법은 여러 가지가 있으나, 상위 요소에서 높이와 너비를 지정해야 하는 경우에는 상위 요소 내의 하위 요소에 마진을 적용하거나, 하위 요소에서 높이와 너비를 지정해야 하는 경우에는 마진을 적용하는 것이 가장 좋습니다. 이를 달성하려면 상위 요소에 패딩을 적용하세요.

5. 최소 너비/최소 높이에 의존하지 마세요

Windows 버전의 IE는 두 구문을 모두 지원하지 않습니다. 하지만 Windows 버전의 IE는 어느 정도 최소 너비/최소 높이와 동등한 효과를 얻을 수 있으므로 IE에서 필터링만 하면 원하는 결과를 얻을 수 있습니다.

6. 의심스러우면 먼저 백분율을 줄여보세요

때때로 일부 오류로 인해 50%+50%가 100.1%가 되어 웹페이지에 문제가 발생할 수 있습니다. 이때 이 값을 49% 또는 49.9%로 변경해 보세요.

7. "TRouBLed"의 작성 방법을 기억하세요

Border, margin 및 padding의 약어 구문은 위에서 시작하여 시계 방향으로 위쪽, 오른쪽, 아래쪽, 따라서 margin :0 1px 3px 5px; 결과는 상단에 테두리가 없고 오른쪽에 1픽셀이 되는 식입니다. "TRouBLe"을 기억하면 순서가 틀리지 않을 것입니다.

8. 값이 0이 아닌 한 단위를 지정해야 합니다.

CSS에서는 글꼴, 여백 및 기타 값마다 단위를 지정해야 합니다. (유일한 예외는 줄 높이입니다)