1.개요
CSS 문제를 디버깅할 때 해당 요소에 무슨 일이 일어나는지 정확히 확인하고 문제의 원인을 파악하는 데 도움이 되도록 특정 요소에 테두리를 추가하는 경우가 많습니다. 이는 레이아웃에 대한 보다 구체적인 가시성을 제공하기 때문에 종종 효과적입니다. 그러나 블록 수준 요소인 경우 문제가 발생할 수 있습니다. 블록 수준 요소에 1px 테두리를 추가하면 요소가 2px 더 넓어져 레이아웃에 영향을 미칠 수 있습니다.
개요 속성은 문서의 흐름에 영향을 주지 않고 개체를 렌더링하므로 완벽한 대체 속성입니다. 하지만 IE6, IE7에서는 개요 속성을 지원하지 않으므로 두 브라우저에서는 디버깅에 사용할 수 없습니다.
2. 상속(가치)
CSS 개발에는 이에 대한 많은 예가 있습니다. 특정 요소에 특정 스타일을 설정하여 해당 요소가 상위 요소의 추가된 모든 속성을 "상속"하도록 지시하면 상당한 양의 키보드 입력을 피할 수 있습니다.
상속을 설정하면 쉽게 달성할 수 있습니다. 이것은 유용할 수 있습니다. 예를 들어 배경 속성을 재정의할 때 속성(색상, 이미지 URL, 위치 등)에 많은 텍스트가 포함되는 경우가 많습니다. 따라서 이러한 값을 다시 작성하는 대신 문제의 요소가 상위 요소와 동일한 배경 속성을 가지기를 원할 수 있으며 상속 값이 트릭을 수행할 것입니다. 분명히 많은 키보드 입력을 절약할 수 있습니다.
아쉽게도 IE6, IE7에서는 상속값이 지원되지 않습니다(방향(텍스트 방향) 및 가시성 속성 제외).
3. 빈 셀
이 속성은 "display" 속성이 "table-cell"로 설정된 테이블이나 요소에만 사용됩니다. 테이블에 내용을 동적으로 추가하는 경우 특정 셀의 내용이 비어 있는 상황이 발생할 수 있으며, 이 빈 셀의 테두리, 배경색, 배경 이미지 등을 숨기고 싶지 않습니다.
"빈 셀: 숨기기"를 사용하면 이 문제를 해결할 수 있으며, 이 경우 이러한 상황이 발생할 수 있는 셀을 완전히 숨길 수 있습니다.
Internet Explorer는 빈 셀 속성을 지원하지 않습니다.
4.캡션측
테이블 속성에 대해 말하자면, 이 속성은 테이블의 측면 열에 표시되는 테이블 제목을 선언하는 데 사용됩니다. 위쪽, 아래쪽, 왼쪽, 오른쪽의 네 가지 값을 허용합니다. Internet Explorer는 이 속성을 지원하지 않습니다. 표 제목은 IE6 및 IE7에서 항상 표 상단에 표시됩니다.
5. 카운터 증가/카운터 재설정
순서가 있는 목록(
)은 숫자를 수동으로 추가하는 수고를 덜고 숫자를 변경하지 않고도 목록의 순서를 변경할 수 있으므로 매우 편리합니다.
CSS에는 카운터 증가(counter-increment) 및 카운터 재설정(counter-reset) 속성이 있어 정렬된 목록과 유사하게 거의 모든 HTML 요소에서 자동으로 증가하는 숫자를 생성할 수 있습니다.
그러나 IE6, IE7 및 Safari(버전 3.x까지)에서는 이러한 속성을 지원하지 않습니다. 물론 IE6은 :before 의사 요소도 지원하지 않습니다.
6.최소 높이
때로는 웹 사이트의 디자인이나 레이아웃 구조에 고정된 높이의 콘텐츠 영역이 필요한 경우가 있습니다. 그렇지 않으면 특정 시각적 효과가 손실됩니다. 이는 그라데이션 배경, 고유한 드롭다운 목록 때문일 수도 있고 Photoshop에서 제공되는 멋진 글로우 효과 때문일 수도 있습니다. 그런데 페이지에 내용이 많은데도 페이지가 예상대로 확장되지 않는 경우가 있습니다.
이때 min-height 속성을 사용해야 합니다. 콘텐츠의 실제 높이가 이 최소 높이에 도달하는지 여부에 관계없이 특정 블록 수준 요소의 최소 높이를 렌더링하도록 브라우저에 지시할 수 있기 때문입니다. 그런 다음 콘텐츠가 최소 높이를 초과하면 요소가 적절하게 확장됩니다.
min-height 사용에 관해 주의할 점은 IE6에서는 지원되지 않는다는 것입니다. 우리 모두는 IE6가 (천천히) 사라지고 있다는 것을 알고 있지만 일부 고객은 여전히 자신의 사이트에서 해당 브라우저를 지원하도록 요구할 수 있습니다.
좋은 소식은 IE6이 다른 브라우저가 "최소 높이"를 렌더링하는 방식과 정확히 동일하게 높이 값을 렌더링한다는 것입니다. 따라서 IE6 전용 해킹이나 특정 높이를 추가하는 독립형 스타일시트만 있으면 문제가 해결됩니다.
IE6은 min-width, max-height 및 max-width도 무시하지만 위의 방법은 이러한 속성에도 가능합니다.
7. :호버
기술적으로 :hover는 의사 클래스일 뿐이지만 IE6에서는 지원되지 않습니다(IE7 및 IE8에서는 지원됨). :hover 의사 클래스를 사용하면 요소에 마우스 오버 스타일을 추가할 수 있습니다. 이는 매우 유용하며 (적어도 어느 정도) JavaScript 사용을 방지합니다.
그러나 웹 사이트가 IE6을 완전히 지원해야 하는 경우, 특히 IE6가 하늘을 지배하는 중국에서 관련 태그에 태그와 같은 "href" 속성이 없는 한 이 의사 클래스의 사용을 취소하는 것을 고려해야 합니다. . 그리고 이 효과를 얻으려면 자바스크립트와 추가 스타일을 사용해야 할 수도 있습니다.
8.디스플레이
표시는 일반적으로 블록, 인라인 및 없음의 세 가지 값 중 하나로 설정됩니다. IE 덕분에 다른 디스플레이 값은 거의 사용되지 않습니다. 이러한 값에는 인라인 블록, 테이블, 인라인 테이블 및 테이블 셀 등이 포함됩니다. 이러한 속성은 일부 특수 레이아웃 문제를 해결하는 데 매우 유용합니다.
따라서 IE는 디스플레이의 세 가지 기본 속성을 지원하지만 기본적으로 다른 속성은 지원하지 않습니다.
실제로 IE8의 디스플레이 속성 지원은 매우 완벽합니다. 그러나 inline-block 속성의 경우 IE6/7은 자체적으로 인라인인 요소만 지원합니다.
다양한 브라우저의 디스플레이 지원에 대해 자세히 알아보려면 여기를 확인하세요. - Shenfei Note
9. 클립
이는 특별한 상황에서 유용할 수 있는 흥미로운 CSS 속성입니다. 예측할 수 없고 동적으로 생성된 콘텐츠와 결합될 수 있습니다. 간단히 말해서, 이 속성을 사용하면 특정 요소에 숨겨진 영역을 지정할 수 있습니다. 이는 절대 위치 요소에서 요소의 표시 영역이 특정 설정에 따라 잘리고 콘텐츠가 표시되는 것으로 이해할 수도 있습니다. 이 영역을 벗어나면 숨겨집니다.
기술적으로 말하자면, Clip 속성은 IE에서 지원되지만 다음과 같이 쉼표가 없는 구문만 지원합니다.
div.clipped {
패딩: 20px;
너비: 400px;
높이: 400px;
클립: 직사각형(20px 300px 200px 100px);
위치: 절대;
} 위 스타일(Rect 뒤의 대괄호 안의 속성은 쉼표로 구분되지 않음)은 대부분의 브라우저에서 실행될 수 있지만 명령문이 쉼표로 구분되지 않기 때문에 CSS 유효성 검사를 통과하지 못할 수 있습니다.
10. :초점
이는 IE가 아닌 모든 브라우저가 이 속성을 지원하기 때문에 여기서 언급해야 할 또 다른 의사 클래스입니다. :focus 의사 클래스를 사용하면 키보드(마우스) 포커스가 될 때 페이지 요소에 동적으로 적용되는 특수 스타일을 선언할 수 있습니다. 이는 입력 필드를 선택할 때 입력 필드에 테두리를 추가할 수 있으므로 양식 요소에 유용합니다.
