CSS 기능이있는 8 가지 영리한 트릭-CSS 튜토리얼-php.cn

를 사용하여 툴팁에 링크의 "href"속성의 값을 표시 할 수 있습니다.

집

웹 프론트엔드

CSS 튜토리얼

CSS 기능이있는 8 가지 영리한 트릭

William Shakespeare

Feb 21, 2025 pm 12:25 PM

8 Clever Tricks with CSS Functions CSS의 힘은 많은 웹 개발자의 상상력을 훨씬 뛰어 넘습니다. 시간이 지남에 따라 스타일 시트 언어는 점점 더 강력 해져서 원래 JavaScript를 달성 해야하는 브라우저에 기능을 제공합니다. 이 기사는 JavaScript가 필요하지 않은 8 개의 영리한 CSS 기능 팁을 소개합니다.

키 포인트

CSS 기능은 JavaScript없이 툴팁, 썸네일 제목, 카운터 및 프로스트 유리 효과와 같은 다양한 효과와 기능을 만드는 데 사용될 수 있습니다. 기능은 더 똑똑한 그리드 시스템을 생성하고 고정 위치 요소의 정렬을 만들어 설계의 유연성과 정밀도를 더 많이 제공 할 수 있습니다. CSS 함수는 또한 함수를 사용하여 창의적인 애니메이션을 허용 할뿐만 아니라 HTML 요소를

함수를 사용하여 배경 이미지로 사용할 수있는 잠재력을 허용하지만, 후자는 현재 Firefox에 의해서만 지원됩니다.

calc() 순수한 CSS 툴팁

많은 웹 사이트에서 여전히 JavaScript를 사용하여 툴팁을 작성하지만 실제로 CSS를 사용하는 것이 더 쉽습니다. 가장 쉬운 솔루션은 HTML 코드의 데이터 속성을 사용하여 와 같은 툴팁 텍스트를 제공하는 것입니다. 이 태그를 사용하면 다음을 CSS에 넣어

기능에 툴팁 텍스트를 표시 할 수 있습니다. cubic-bezier() 매우 간단하고 명확합니다. 물론, 실제로 툴팁을 실제로 스타일링하기 위해서는 더 많은 코드가 필요하지만 걱정하지 마십시오.이 목적으로 Hint.css라는 훌륭한 순수한 CSS 라이브러리가 있습니다. element()

(남용) 사용자 정의 데이터 속성 및 attr () 함수

를 사용했지만 다른 사용 사례가 있습니다. 데이터 속성을 결합하여 HTML 코드의 한 줄만 사용하여 제목 및 설명으로 축소판 이미지를 빌드 할 수 있습니다.
이제 함수를 사용하여 제목과 설명을 표시 할 수 있습니다. 이것은 호버 디스플레이 애니메이션이있는 썸네일의 작동 예입니다. 제목 : [CodePen 예제 링크] (CodePen 링크가 여기에 삽입되어야한다고 가정) 참고 : 생성 된 컨텐츠는 접근성에 문제가있을 수 있습니다. CSS 생성 컨텐츠에 대한 접근성 지원에 대한이 기사는이 주제에 대한 유용한 해석을 제공합니다.

data-tooltip="…" attr() CSS 카운터
당신은 마술처럼 보이는 CSS 카운터를 사용할 수 있습니다. 그것은 가장 잘 알려진 기능이 아니며 대부분의 사람들은 그것을 잘 지원하지 않는다고 생각할 수도 있지만 실제로 모든 브라우저는 CSS 카운터를 지원합니다. [CSS-Counters를 사용할 수 있습니까?] 여기 링크) 주문 목록 ()에 CSS 카운터를 사용해서는 안되지만 카운터는 갤러리의 항목 아래에 페이지 매김 또는 숫자를 표시하는 데 적합합니다. 또한 선택한 항목의 수를 계산할 수 있습니다. 코드가 거의 필요하지 않다는 점을 고려하면 매우 인상적입니다 (및 JavaScript 없음) : [CodePen Sample Link] (CodePen 링크가 여기에 삽입되어야한다고 가정).
CSS 카운터는 프로젝트 목록에서 동적으로 변경된 숫자에 적합하며 드래그 앤 드롭으로 재정렬 할 수 있습니다. <ol></ol> 마지막 예와 마찬가지로 생성 된 컨텐츠는 접근성에 문제가있을 수 있습니다.

CSS 필터를 사용하여 서리로 된 유리 효과
를 달성하십시오 iOS 7이 출시되면서 Apple은 우리에게 "Frosted Glass"효과를 제공합니다. Apple의 구현에서 영감을 얻은이 효과는 여러 곳에서 나타나기 시작했습니다. CSS 필터를 갖기 전에이 효과를 재현하는 것은 약간 까다로울 수 있습니다. 서리로 덥은 유리 효과를 만들려면 흐릿한 이미지를 사용해야합니다. 이제 거의 모든 주요 브라우저는 CSS 필터를 완전히 지원 하므로이 효과를 재현하기가 훨씬 쉽습니다. [CSS-Filters를 사용할 수 있습니까?] (여기에 링크를 삽입해야한다고 가정) 앞으로 및 기능을 사용하여 유사한 효과를 만들 수 있지만이 두 기능은 현재 Safari에서만 지원됩니다.
HTML 요소를 배경 이미지
로 사용하십시오 일반적으로 JPEG 또는 PNG 파일을 배경 이미지 또는 그라디언트로 지정합니다. 그러나 함수를 사용하여 를 배경 이미지로 사용할 수도 있다는 것을 알고 있습니까? 현재 함수는 Firefox에서만 지원됩니다. [CSS- 요소 기능을 사용할 수 있습니까?] 가능성은 거의 무한합니다. 여기 MDN의 예입니다.

calc () 로 더 똑똑한 그리드를 만듭니다 유체 메쉬는 큰 일이지만 심각한 문제가 있습니다. 예를 들어, 상단과 하단 사이의 간격을 왼쪽과 오른쪽 사이의 간격과 같은 크기로 만들 수 없습니다. 또한 사용중인 그리드 시스템에 따라 마킹이 매우 혼란 스럽습니다. Flexbox 자체조차도 최종 솔루션은 아니지만 함수 (CSS의 값으로 사용할 수 있음)를 사용하면 그리드가 더 좋아질 수 있습니다. 이 웹 사이트 의이 튜토리얼에서 George Martsoukos는 완벽한 간격이있는 갤러리 그리드와 같은 실제 예를 보여줍니다. Sass와 같은 CSS 전 처리기를 사용하면 창의적인 메쉬 시스템을 구축하는 것은 매우 간단하고 유지 관리가 쉽습니다. 브라우저 지원은 거의 완벽하기 때문에 backdrop-filter는 분명히 사용해야하는 편리한 기능입니다. [calc를 사용할 수 있습니까?] (여기에 링크를 삽입해야한다고 가정) filter()
CSS CALC ()를 사용하여 위치를 정렬하십시오. 고정 요소
기능의 또 다른 사용 사례는 요소를 고정 위치와 정렬하는 것입니다. 예를 들어, 유체 간격으로 왼쪽과 오른쪽에 컨텐츠 래퍼가 있고 해당 래퍼 내부의 고정 요소를 정확하게 정렬하려면 "오른쪽"또는 "왼쪽"속성 선택을 결정하는 데 어려움을 겪게됩니다. ? 를 사용하면 상대 및 절대 값을 결합하여 요소를 완벽하게 정렬 할 수 있습니다.
이것은 예입니다. [CodePen 예제 링크] (CodePen 링크를 여기에 삽입해야한다고 가정) calc() calc()
입방-베 지어 () 로 애니메이션
웹 사이트 또는 응용 프로그램의 UI를 더 매력적으로 만들려면 애니메이션을 사용할 수 있지만 표준 완화 옵션은 매우 제한적입니다. 예를 들어, "선형"또는 "편안한 인 아웃"입니다. 표준 옵션에서도 튀는 애니메이션과 같은 것은 불가능합니다.
기능을 사용하면 원하는대로 요소를 정확하게 애니메이션 할 수 있습니다.
```
.tooltip::after {
  content: attr(data-tooltip);
}
```
로그인 후 복사
를 사용하는 두 가지 방법이 있습니다.
솔직히, 나는 후자를 선택할 것이다.
결론
CSS 기능의 숙련 된 사용은 알려진 문제를 해결할뿐만 아니라 (예 : 더 똑똑한 그리드 시스템 구축) 창의적인 자유를 제공합니다. 브라우저 지원이 향상되면 CSS를주의 깊게보고 와 같은 기능을 사용하여 개선해야합니다.
CSS 기능에 대한 자주 질문
cubic-bezier() 초보자로서 어떤 기본 CSS 기능을 이해해야합니까?
CSS 함수는 CSS 속성의 값을 설정하는 데 사용됩니다. 모든 초보자가 알아야 할 일부 기본 기능에는 ,
, , cubic-bezier(), cubic-bezier 및 가 포함됩니다. 함수는 색상을 정의하는 데 사용되는 반면 및

함수는 색조, 채도 및 밝기를 기반으로 색상을 정의하는 데 사용됩니다. 함수를 사용하면 계산을 수행하여 CSS 속성 값을 결정할 수 있습니다.
CSS에서 calc () 함수를 사용하는 방법은 무엇입니까?