calc( )

✅ calc( )

• CSS 속성값을 사칙연산(+, -, *, /)으로 정할 수 있게 하는 함수
• 괄호 안의 식을 계산한 결과를 속성값으로 사용

font-size

font-size : calc (10px + 10px);
// font-size : 20px;

font-size : calc (2px*10px);
// font-size : 20px;

❗ 곱셈과 나눗셈의 좌우에는 공백이 없어도 되지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 한다.

---

width

width: 80%;
width : calc (80% - 20px);
width : calc( ( 40% * 2 ) - 40px / 2 );