꼭 알아야 할 세 가지 CSS 팁

다양한 브라우저 간의 경쟁이 치열해지면서 점점 더 많은 사람들이 최신 W3C 웹 표준을 지원하는 장치를 사용하여 보다 대화형 방식으로 인터넷에 액세스하고 있습니다. 이는 마침내 더 강력하고 유연한 CSS를 활용하여 더 간단하고 유지 관리가 더 잘되는 브라우저 프런트엔드 코드를 만들 수 있다는 것을 의미합니다. 이제 아직 알지 못할 수도 있는 몇 가지 흥미로운 CSS 기능을 살펴보겠습니다.

CSS에서 HTML 속성 값을 표시하려면 attr()을 사용하세요

attr() 이 기능은 CSS 2.1 표준부터 등장했지만 아직은 이제 일반적으로 인기를 얻고 있습니다. 이는 CSS의 HTML 태그에 속성을 사용하는 영리한 방법을 제공하며, 많은 경우 이전에 Javascript 처리가 필요했던 프로세스를 저장하는 데 도움이 될 수 있습니다.

이 기능을 사용하려면 세 가지 요소, 즉 :before 또는 :after CSS 의사 클래스 스타일, .content를 사용해야 합니다. 속성 및 사용하려는 HTML 속성의 이름이 포함된 attr() 표현식입니다. 예를 들어 684271ed9684bde649abda8831d4d355 제목에 data-prefix 속성 값을 표시하려면 다음과 같이 작성하면 됩니다.

h3:before {
    content: attr(data-prefix) " ";
    }

    <h3 data-prefix="Custom prefix">This is a heading</h3>

분명히 이 예제는 그것이 얼마나 유용한지는 보여주지 않고 단지 기본적인 사용법을 보여줍니다. 좀 더 유용한 예를 들어보겠습니다. attr()의 훌륭한 적용은 사용자가 페이지를 인쇄할 때 페이지에 대한 링크를 표시하는 것입니다. 이를 달성하려면 다음과 같이 작성할 수 있습니다.

@media print {
    a:after {
    content: " (link to " attr(href) ") ";
    }
    }

    <a href="example.com">Visit our home page</a>

이 기술을 알고 나면 이 기술이 업무에 얼마나 편리하게 작용하는지 여러 번 놀라게 될 것입니다!

팁: CSS3 표준의 새 버전에서는 attr() 함수가 확장되어 다양한 CSS 태그에서 사용할 수 있습니다. CSS2.1에서 attr()은 항상 문자열을 반환합니다. CSS3에서는 attr()이 다양한 유형을 반환할 수 있습니다.

counter()를 사용하여 목록에 자동으로 일련번호를 추가하세요

CSS 2.1에서 이미 지원되는 또 다른 기능은 counter()입니다. 페이지 제목, 블록 및 기타 다양한 연속 페이지 콘텐츠에 번호를 매깁니다. 이를 사용하면 이 효과를 얻기 위해 c34106e0b4e09414b63b2ea253ff83d6만 사용하도록 제한할 필요가 없습니다. 페이지에서 사용자 정의 숫자 시퀀스를 보다 유연하게 사용할 수 있습니다.

카운터 재설정 정의 및 사용법

카운터 재설정 속성은 특정 선택기의 발생 횟수에 대한 카운터 값을 설정합니다. 기본값은 0입니다.

이 속성을 사용하면 카운터를 양수 또는 음수 값으로 설정하거나 재설정할 수 있습니다. 숫자가 제공되지 않으면 기본값은 0입니다.

참고: "display: none"을 사용하는 경우 카운터를 재설정할 수 없습니다. "visibility: hided"를 사용하면 카운터를 재설정할 수 있습니다.

참고: Internet Explorer 8(이상)은 !DOCTYPE이 지정된 경우 카운터 재설정 속성을 지원합니다.

카운터 재설정 가능 값

값

설명

없음

기본값. 선택기 카운터는 재설정할 수 없습니다.

值	描述
none	默认。不能对选择器的计数器进行重置。
id number	id 定义重置计数器的选择器、id 或 class。 number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。
inherit	规定应该从父元素继承 counter-reset 属性的值。

id number

id 카운터를 재설정하려면 선택기, ID 또는 클래스를 정의하세요. . number

는 이 선택기의 발생 횟수에 대한 카운터 값을 설정합니다. 양수, 0 또는 음수일 수 있습니다.

inherit

counter-reset 속성의 값이 상속되어야 함을 지정합니다. 상위 요소에서.

핵심은 정말 간단하다는 것입니다.

:before

의사-의 content counter()에 추가된 class 속성:

body {
    counter-reset: heading;
    }

    h4:before {
    counter-increment: heading;
    content: "Heading #" counter(heading) "."; 
    }

이 카운터 영점화 및 증가 방법에 대해 더 자세히 알고 싶으면 이 주제에 대한 Mozilla

개발자 네트워크 페이지를 참조하세요. 중첩된 카운터를 사용하는 방법에 대한 훌륭한 예가 있습니다.

calc()를 사용하여 산술 계산

마지막으로

calc()

함수에 대해 이야기해 보겠습니다. Calc는 영어단어 계산(calculate)의 약어로 CSS3의 새로운 기능으로 요소의 길이를 지정하는데 사용됩니다. 이 기능을 사용하면 유지 관리하기 어려운 Javascript 코드를 작성하지 않고도 요소의 길이와 너비 계산과 같은 간단한 산술 계산을 수행할 수 있습니다. 이 기능은 덧셈, 뺄셈, 곱셈, 나눗셈을 포함한 모든 간단한 기본 산술 연산을 지원합니다. 식에 "+"와 "-"가 있는 경우 앞뒤에 공백이 있어야 합니다. 예를 들어 "widht: calc(12%+5em)"는 공백 없이 쓰면 잘못됩니다. 표현 "*", "/"가 있는 경우 앞뒤에 공백이 있으면 안 되지만 공백을 두는 것이 좋습니다. 브라우저의 calc() 호환성은 꽤 좋습니다. IE9+, FF4.0+, Chrome19+, Safari6+에서 잘 지원되며, 앞에 각 브라우저 제조업체의 식별자를 추가해야 하지만 안타깝게도 대부분의 모바일에서는 그렇지 않습니다. 브라우저는 아직 이를 지원하지 않으며 현재 "안드로이드 14.0용 Firefox"만 지원합니다. 너비가 상위 요소의 전체 너비를 차지하는 요소를 생성하고 다른 용도로 사용할 수 있도록 너비를 일부 픽셀로 남겨둔다고 가정해 보겠습니다.

.parent {
    width: 100%;
    border: solid black 1px;
    position: relative;
    }

    .child {
    position: absolute;
    left: 100px;
    width: calc(90% - 100px);
    background-color: #ff8;
    text-align: center;
    }

멋지죠? CSS가 일부 방법에서 JavaScript를 대체하여 웹 개발자의 작업을 크게 단순화할 수 있을 정도로 성숙해졌음을 점점 더 명확하게 알 수 있습니다. 이러한 기능을 활용하지 않는 것은 어리석은 일입니다.

위 내용은 꼭 알아야 할 세 가지 CSS 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!