CSS Functional Notation 이란?

CSS Functional-notation 이란?

CSS 값 의 일종으로 특별한 데이터 처리 혹은 계산을 하거나 복잡한 데이터 값을 표현하는데 이용된다.

문법

selector {
  property: functional-notation([argument]? [, argument]!);
}

함수의 종류

애니메이션 타임라인

아직은 scroll() 밖에 존재하지 않는다. 이마저도 Experimental 이다.

• scroll()

변환

요소의 모양을 변환시키는 함수들이다.

• matrix()
  ...

수학

수학적인 계산을 도와준다.

• calc()

필터

이미지 등에 필터를 걸거나 색상을 변경하는데 유용하다.

• blur()

색상

다양한 기준을 통해 특정 색상을 잡는데 유용하다.

• hsl()

이미지

< image > 태그가 유효할 때 유용하게 쓰일 수 있다.

• linear-gradient()

카운터

li 태그로 표현되는 연속된 숫자들을 변환할 때 유용하다.

• counter()

폰트 (Font)

폰트에 관련된 함수들인데, 아직은 실험단계이다.

모양 (Shape)

section 태그로 지정된 내부에 동그라미 등을 그리는데 사용된다.

• circle()

레퍼런스 (Reference)

프로퍼티의 값 등을 참조하는데 사용될 수 있는 함수이다.

• var()

그리드 (Grid)

CSS 그리드 레이아웃 를 이용할 때 함께 사용되는 유틸성 함수이다.

• repeat()

레퍼런스

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions