CSS 팁_CSS/HTML

CSS를 사용하여 웹사이트를 구축하다 보면 다양한 레이아웃 문제에 부딪히게 되고, 막판에는 당황스러울 수도 있습니다. 이 기사의 목적은 디자인 프로세스를 더 쉽게 만들고 문제가 발생할 때 빠른 참조를 제공하는 것입니다.

의심스러운 경우 먼저 확인하세요.
디버깅할 때 코드를 먼저 확인하면 많은 수고를 덜 수 있습니다. 잘못된 XHTML/CSS는 많은 레이아웃 오류를 일으킬 수 있습니다.
다른 브라우저에서 테스트하기 전에 가장 진보된 브라우저에서 CSS 코드를 작성하고 테스트하세요.
손상된 브라우저에서 작성하고 테스트하는 경우 코드는 해당 손상된 브라우저의 열악한 표시에 의존한 다음 표준 호환 브라우저에서 테스트하고 표시 결과가 "비정상적"인지 확인해야 합니다. 매우 좌절할 것입니다. 대신, 먼저 코드를 다듬은 다음 낮은 수준의 브라우저에 맞게 준비해야 합니다. 이렇게 하면 코드가 처음부터 표준을 준수하므로 다른 브라우저 지원에 대해 걱정할 필요가 없습니다. 물론 현재 표준을 준수하는 브라우저는 의심할 여지 없이 Mozilla, Safari 또는 Opera입니다.

원하는 효과가 실제로 존재하는지 확인하세요.
많은 브라우저별 CSS 확장 프로그램이 공식 표준에 존재하지 않습니다. 필터나 스크롤 막대에 스타일을 지정하면 IE 이외의 다른 브라우저에서는 효과가 없는 전용 코드를 사용하게 됩니다. 유효성 검사기에서 코드가 정의되지 않았다고 말하면 개인 스타일을 사용하고 있을 가능성이 높으며 이로 인해 다양한 브라우저에서 일관된 결과를 얻기가 어렵습니다.

레이아웃에 플로팅 개체를 사용해야 한다면 적시에 지우기 속성을 사용하는 것을 잊지 마세요.
떠다니는 물체는 쉬워 보일 수도 있지만 어렵고 항상 원하는 것이 아닐 수도 있습니다. 플로트가 컨테이너 경계를 넘어 확장되거나 예상한 대로 표시되지 않는 경우 예상이 올바른지 확인하세요. 이 문제에 대해서는 Eric Meyer의 튜토리얼

을 참조하세요. 여백 병합: 패딩이나 테두리를 사용하여 이를 방지할 수 있습니다.
추가(또는 원치 않는) 공백으로 인해 당황스러울 수도 있습니다. 여백을 사용하는 경우 여백 병합이 문제의 원인일 수 있습니다. Andy Budd의 설명이 도움이 될 수 있습니다.

같은 요소에 패딩/테두리와 고정 너비를 동시에 적용하지 마세요.
IE5의 블록 모델은 잘못되어 문제가 발생합니다. 이에 대한 해결 방법이 있지만 이 문제를 해결하고 하위 요소의 너비가 고정된 경우 상위 요소에 패딩을 지정하는 것이 더 좋습니다.

IE에서 지정되지 않은 스타일 콘텐츠가 깜박이는 것을 방지하세요.
외부 스타일 시트를 입력하기 위해 @import에만 의존한다면 조만간 IE에 "깜박임" 문제가 있다는 것을 알게 될 것입니다. 서식이 지정되지 않은 HTML 텍스트는 CSS 스타일이 적용되기 전에 잠시 나타납니다. 이는 피할 수 있습니다.

IE에서는 min-width가 유용할 것이라고 기대하지 마세요.
IE에서는 지원하지 않지만 너비를 최소 너비로 처리하므로 일부 IE 필터링 기술을 통해 동일한 최종 효과를 얻을 수 있습니다.

CSS 필터를 최후의 수단으로 사용하세요. CSS 기술과 필터를 사용하면 특정 요소를 선택적으로 적용(또는 적용하지 않을)할 수 있습니다. 가능하면 매번 필터에 의존하기보다는 원하는 효과를 얻기 위한 표준 크로스 브라우저 솔루션을 찾아야 합니다. 절망적일 때 생명을 구하는 도구로 생각하십시오. 여기에서 수많은 CSS 필터링 팁을 찾을 수 있습니다. [주석: 여기의 필터와 IE의 필터를 혼동하지 마십시오. 브라우저마다 CSS 표준에 대한 지원 수준이 다르기 때문에 사람들은 브라우저가 해석할 수 없거나 잘못 해석하는 스타일 시트나 규칙을 차단하는 많은 기술을 발견했습니다. 이것을 CSS 필터 또는 트릭이라고 합니다. ]

앵커를 사용하는 경우 하이퍼링크 스타일을 적용할 때 특히 주의하세요.
코드에서 기존 앵커()를 사용하는 경우 :hover 및 :active 의사 클래스도 함께 작동하는 것을 확인할 수 있습니다. 이를 방지하려면 id를 사용하거나 잘 알려지지 않은 구문을 사용할 수 있습니다: :link:hover, :link:active

"LoVe/HAte"(사랑/증오) 링크 규칙을 기억하세요
Link, Visited, Hover, Actve 순서로 하이퍼링크 의사 클래스를 지정합니다. 다른 주문은 부적절합니다. :focus가 사용되는 경우 순서는 LVHFA여야 합니다("Lord Vader's Handle Formerly Anakin", Matt Haughey 제안).

'TrouBLED' 경계선을 기억하세요.
Border, Margin, Padding의 약식 순서는 위에서부터 시계방향, 즉 Top, Right, Bottom, Left 입니다. 예를 들어 margin: 0 1px 3px 5px는 위쪽 여백이 0이고 오른쪽 여백이 1px임을 의미합니다.

0이 아닌 값의 단위를 지정합니다.
CSS로 글꼴, 여백, 크기를 지정할 때 사용되는 단위를 지정해야 합니다. 일부 브라우저는 지정되지 않은 단위를 제대로 처리하지 못합니다. 0은 0입니다. px든 em이든 무엇이든 단위가 필요하지 않습니다. 예: padding: 0 2px 0 1em;

다양한 글꼴 크기를 테스트하세요.
Mozilla 및 Opera와 같은 고급 브라우저에서는 사용하는 단위에 관계없이 글꼴 크기를 조정할 수 있습니다.일부 사용자는 확실히 귀하의 기본 글꼴 크기와 다를 수 있으므로 이를 수용하기 위해 최선을 다하십시오.

게시 시 삽입된 테스트를 사용하고 입력으로 변경하세요.
HTML 소스 코드에 스타일시트를 포함하면 특히 일부 Mac 브라우저에서 테스트할 때 많은 캐싱 오류를 제거할 수 있습니다. 하지만 게시하기 전에 스타일 시트를 외부 파일로 이동하고 @import 또는 을 사용하여 소개하는 것을 잊지 마세요.

명확한 테두리를 추가하는 것은 레이아웃 디버깅에 도움이 됩니다.
div {border: solid 1px #f00;}과 같은 전역 규칙을 사용하면 일시적으로 레이아웃 문제를 찾아낼 수 있습니다. 특정 요소에 테두리를 추가하면 찾기 어려운 인터레이스 또는 공백 문제를 찾는 데 도움이 될 수 있습니다.

이미지 경로에 작은따옴표를 사용하지 마세요.
배경 이미지를 설정할 때는 큰따옴표를 사용하세요. 중복되는 것처럼 보일 수도 있지만 이렇게 하지 않으면 IE5/Mac이 질식하게 됩니다.

향후 스타일 시트(예: 휴대용 장치 또는 인쇄 스타일 시트)를 위해 "빈 공간"을 남겨두지 마십시오.
Mac IE5는 빈 스타일 시트에 관심이 없으므로 페이지 로딩 시간이 늘어납니다. MacIE가 막히는 것을 방지하려면 스타일 시트에 최소한 하나의 규칙(주석 포함)을 포함하는 것이 좋습니다.
특정 기능에 국한된 것은 아니지만 개발 과정에서 주의해야 할 몇 가지 이론이 있다는 점도 언급할 가치가 있습니다.

CSS 파일을 잘 정리하세요
블록 단위로 CSS에 적절하게 주석을 달고, 유사한 CSS 선택자를 그룹으로 그룹화하고, 일관된 명명 습관과 공백 형식(플랫폼 간 고려 사항을 위해 탭 대신 공백 문자를 사용하는 것이 좋습니다.)과 적절한 순서를 개발합니다.
선택기 결합
다운로드 시간을 줄이려면 CSS를 짧게 유지하는 것이 중요합니다. 선택자를 그룹화하고, 상속을 활용하고, 단축어를 사용하여 중복성을 줄이세요.

이미지 교체 기술을 사용할 때 친화성을 고려하세요
기존 FIR은 이미지 표시를 끄는 스크린 리더와 브라우저에서 문제를 일으키는 것으로 나타났습니다. 이 문제에 대한 다른 해결 방법이 있으며, 이는 특정 상황에 따라 주의해서 사용해야 합니다.