숫자 또는 숫자와 단위로 구성된 속성의 값을 수학 표현식으로 생성한다.
코드에서 사용되는 연산자의 사용 개념과 다르지 않다. 다만 피연산자들이 온전히 <number> 또는 <integer>만이 아니라는 것이 특징이다. 숫자와 단위가 함께 사용되는 <length>, <frequency>, <angle>, <time>, <percentage>등도 피연산자로 사용된다. 계산식에 사용되는 피연산자의 유형은 동일하지 않아도 된다. 이것은 대단한 장점이다. CSS는 다양한 형태로 숫자가 값으로 사용되는 속성이 많다. 그리고 서로 유기적인 작용을 해야 하는 경우도 발생한다. calc() 함수는 이러한 이유로 적용할 결과값을 산출하기 위한 복잡한 계산이 필요한 로직을 고민하는 수고를 덜어준다.
주의할 점은 단위가 함께 사용될 수 있다 보니 연산자 기호와 구분할 필요가 있으므로 연산자 양쪽으로 공백이 필요하다. 연산의 순서는 일반적인 연산자 우선 순위 규칙을 따르며 다른 유형의 코드처럼 괄호를 사용하여 우선 순위를 정할 수도 있다.
calc() 함수를 사용하기 위한 매개 변수의 유형을 나타낸다.
<funcdef-calc> = <calc-sum> <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*<calc-product> = <calc-value> [ '*' <calc-value> | '/' <calc-number-value> ]*<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) <calc-number-sum> = <calc-number-product> [ [ '+' | '-' ] <calc-number-product> ]*<calc-number-product> = <calc-number-value> [ '*' <calc-number-value> | '/' <calc-number-value> ]*<calc-number-value> = <number> | ( <calc-number-sum> )
calc() 함수에서 계산 표현식에 사용되는 <number> 또는 calc() 함수로 덧셈 혹은 뺄셈한 결과값을 나타낸다.
<number> | ( <calc-number-sum> )<number> 값으로 곱셈(*) 또는 나눗셈(/) 연산의 결과를 나타낸다.
<calc-number-value> [ '*' <calc-number-value> | '/' <calc-number-value> ]*
<number> 값으로 덧셈(+) 또는 뺄셈(-) 연산의 결과를 나타낸다.
<calc-number-product> [ [ '+' | '-' ] <calc-number-product> ]*
곱셈(*) 또는 나누기(/)의 결과값을 나타낸다.
<calc-value> [ '*' <calc-value> | '/' <calc-number-value> ]*
덧셈(+), 뺄셈(-)으로 계산되는 값을 나타낸다.
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
calc() 함수에서 연산 표현식에 사용되는 <number>, <dimension>, <percentage>, <calc-sum> 값을 나타낸다.
<number> | <dimension> | <percentage> | ( <calc-sum> )
left: calc(50% - 100px);
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Values and Units Module Level 3 | 편집자 초안 | Last review date: 2022-6-4 |