[CSS]CSS Functions

• 다양한 CSS 프로퍼티의 값으로써 사용됩니다.
• CSS2 이후에 만들어졌으며, 현재의 모든 CSS 버전에서 사용가능합니다.

종류

• attr(): 선택된 요소의 어트리뷰트의 값을 리턴

a:after {content: " (" attr(href) ")";}

 

• calc(): CSS 프로퍼티 값 계산 수행

width: calc(100% - 100px);

 

• conic-gradient(): conic gradient를 생성

background-image: conic-gradient(red, yellow, green);

 

• cubic-bezier(): Bezier curb 정의

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

 

• hsl(): Hue-Saturation-Lighness model을 사용해 색상 정의

#p1 {background-color:hsl(120,100%,50%);} /* green */

 

• linear-gradient():  linear gradient 생성

#p1 {background-color:hsla(120,100%,50%,0.3);} /* green */

 

• max(): 콤마(,)로 구분된 리스트에서 가장 큰 값 사용

width: max(50%, 300px);

 

• min(): 콤마(,)로 구분된 리스트에서 가장 작은 값 사용

width: min(50%, 300px);

 

• radial-gradient(): radial gradient 생성

background-image: radial-gradient(red, green, blue);

 

• repeating-conic-gradient(): conic gradient를 반복

background-image: repeating-conic-gradient(red 10%, yellow 20%);

 

• repeating-linear-gradient(): linear gradient를 반복

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

 

• repeating-radial-gradient(): radial gradient를 반복

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

 

• rgb(): Red-Green-Blue 모델을 사용해 색상 정의

#p1 {background-color:rgb(255,0,0);} /* red */

 

• raba(): Red-Green-Blue-Alpah 모델을 사용해 색상 정의

#p1 {background-color:rgba(255,0,0,0.3);} /* red with opacity*/

 

• var(): 사용자 정의 프로퍼티의 값을 삽입

background-color: var(--main-bg-color);