CSS : calc

calc()

📌 참고자료
MDN calc()
W3SCHOOLS CSS calc() Function
CODINGFACTORY calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수
Homzzang CSS - calc() 함수 ★ - 계산 수행해 CSS 속성값 결정. (= calc함수 = 캘크함수)
Stackoverflow Using calc() in MUI

calc() 함수를 사용하면 CSS 속성값을 계산할 수 있다.

즉, 괄호 안에 있는 계산 결과값을 속성값으로 사용한다.

⚙️ 구문

property: calc(expression);

⚙️ 연산자

• + : 덧셈
• - : 뺄셈
• * : 곱셈 ▶ 하나 이상의 피연산자가 <number>여야 한다.
• / : 나눗셈 ▶ 하나 이상의 피연산자가 <number>여야 한다.

🛑 주의

• 0으로 나누면 HTML 구문분석기에서 오류가 발생한다.
• +와 - 연산자는 좌우에 공백이 존재해야 한다.
• *와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋다.
• 표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 auto 키워드를 사용한 것과 동일하게 처리한다.
• calc() 함수를 중첩해서 사용하면 내부의 calc()는 단순한 괄호로 간주한다.

---

🗓️ 수정 및 추가

✅ 2022.04.30

• 참고자료 추가