5가지 유용한 CSS 기능(공유)

CSS에는 많은 기능이 포함되어 있으며 이전에 JavaScript로 수행해야 했던 많은 작업을 수행할 수 있습니다. 매년 새로운 기능이 추가되어 개발이 더 쉬워지고 JavaScript에 대한 의존도가 줄어듭니다. CSS 기능은 CSS의 가장 강력한 기능 중 하나이며, 이 기사에서는 유용하다고 생각되는 몇 가지 기능을 다루겠습니다.

(학습 영상 공유: css 영상 튜토리얼)

attr()

attr 함수는 선택한 요소의 속성 값을 가져오는 데 사용됩니다. 속성 이름, 유형 및 기본값이라는 세 가지 매개변수를 허용합니다. attr 函数用于获取所选元素的属性值。 它接受三个参数，属性名称，类型和默认值。

语法：

attr( attribute-name <type-or-unit>? [, <fallback> ]? )

事例：

<p data-text="the attr function"
  data-tooltip="Hi from attr!" class="attr">This text is combined with</p>

css

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

效果：

源码：https://codepen.io/protic_milos/pen/GRpYJKd

calc()

这个函数使我们能够计算CSS值，而不是指定确切的值。通常用于计算元素的大小或位置。它支持加法、减法、乘法和除法。

需要特别注意重要一点是+和-运算符必须用空格隔开，不然无法正常工作。*和/运算符不有这限制，但出于一致性的考虑，建议添加空格。

另外，很棒的是，我们可以混合CSS单位，例如，我们可以减去百分比和像素。

我们可以用calc构建一个带有居中元素的示例:

<p class="calc">Centered with calc</p>

css

p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}

效果：

源码：https://codepen.io/protic_milos/pen/GRpYJKd

var()

通过这个函数，我们可以使用一个自定义属性的值作为另一个CSS属性的值。简单地说，我们可以定义一个颜色，例如，将它放在自定义属性(CSS变量)中，然后通过调用var函数重用该属性值。

与CSS变量一起，该函数提高了可维护性并减少了重复。一个用例是为网站创建主题。

此函数接受两个参数，即自定义属性和一个默认值，如果出现问题，将使用它们。

:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}

效果：

源码：https://codepen.io/protic_milos/pen/GRpYJKd

counter()

就我个人而言，我从未使用过这种方法，但它看起来是很有趣。这个函数返回指定计数器的当前值，需要与 counter-reset和counter-increment 配合使用。

我们可以用它来计算其他元素，比如有序列表。

<div class="counter">
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>

源码：https://codepen.io/protic_milos/pen/GRpYJKd

circle()

这个函数创建一个圆形区域来屏蔽它所应用的元素。你可以指定它的半径和位置。通常与图像一起使用来创建圆角形状。此函数是clip-path

문법:

<img class="circle lazy"  src="/static/imghw/default1.png"  data-src="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png"   
  
/>

예:

img.circle {
  clip-path: circle(30%);
}

css

rrreee 효과:

소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd

calc()

이 함수를 사용하면 CSS 값을 계산할 수 있습니다. , 정확한 값을 지정하는 대신. 일반적으로 요소의 크기나 위치를 계산하는 데 사용됩니다. 덧셈, 뺄셈, 곱셈, 나눗셈을 지원합니다. 중요한 점은 + 및 - 연산자를 공백으로 구분해야 한다는 것입니다. 그렇지 않으면 제대로 작동하지 않습니다. * 및 / 연산자에는 이러한 제한이 없지만 일관성을 위해 공백을 추가하는 것이 좋습니다.

🎜또한 좋은 점은 CSS 단위를 혼합할 수 있다는 것입니다. 예를 들어 백분율과 픽셀을 뺄 수 있습니다. 🎜🎜 calc를 사용하여 중앙 요소가 있는 예제를 만들 수 있습니다: 🎜rrreee🎜css🎜rrreee🎜효과: 🎜🎜🎜🎜🎜🎜소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜 var ()🎜🎜이 함수를 통해 사용자 정의 속성의 값을 다른 CSS 속성의 값으로 사용할 수 있습니다. 간단히 말해서 색상을 정의할 수 있습니다. 예를 들어 이를 사용자 정의 속성(CSS 변수)에 넣은 다음 var 함수를 호출하여 속성 값을 재사용할 수 있습니다. 🎜🎜CSS 변수와 함께 이 기능은 유지 관리성을 향상시키고 중복을 줄입니다. 한 가지 사용 사례는 웹사이트용 테마를 만드는 것입니다. 🎜🎜이 함수는 사용자 정의 속성과 문제가 발생할 경우 사용되는 기본값이라는 두 가지 매개변수를 허용합니다. 🎜rrreee🎜효과: 🎜🎜🎜🎜🎜🎜소스코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜counter()🎜🎜개인적으로 이 방법을 사용해본 적은 없지만 재미있어 보이네요. 이 함수는 지정된 카운터의 현재 값을 반환하며 counter-reset 및 counter-increment와 함께 사용해야 합니다. 🎜🎜순서가 지정된 목록과 같은 다른 요소를 계산하는 데 사용할 수 있습니다. 🎜rrreee🎜🎜🎜 🎜🎜소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜circle()🎜🎜이 함수는 적용되는 요소를 마스크하기 위해 원형 영역을 만듭니다. 반경과 위치를 지정할 수 있습니다. 둥근 모양을 만들기 위해 이미지와 함께 자주 사용됩니다. 이 함수는 clip-path 속성의 값입니다. 🎜🎜또한 원 외에도 타원과 다각형 모양도 만들 수 있다는 점을 언급할 가치가 있습니다. 🎜rrreee🎜css🎜rrreee🎜🎜🎜🎜🎜🎜소스 코드: https://codepen.io/protic_milos/pen/GRpYJKd🎜🎜Summary🎜🎜앞서 여러 번 언급했듯이 개발자들은 가능성 없이 무시하는 경우가 많습니다. CSS, 웹사이트의 단순함이 사라졌습니다. 매년 우리는 필요한 디자인 기능을 제공하기 위해 CSS에 의존할 수 있습니다. 정말 좋은 일입니다. JavaScript는 디자인 대신 다른 것에 집중해야 합니다. 🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 5가지 유용한 CSS 기능(공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!