JavaScript

간단한 calc() 사용하는 법

citron031 2022. 11. 1. 08:53

calc는 css함수로 css 속성값에 계산식을 지정할 수 있게 해준다.

더하기, 빼기, 곱하기, 나누기 연산이 가능하다.

연산자 좌우에 공백이 필요하다.

0으로 나누면 HTML 구문분석기에서 오류가 발생한다.

곱셈과 나눗셈에는 피연산자에 하나 이상의 숫자가 있어야 한다.

중첩해서 사용할 시 내부의 calc()은 ()로 취급된다.

width: calc(50% - 8px);
  • scss에서 calc 내부에 변수를 넣고 싶다면, #을 사용해야 한다.
$len: 8px;

width: calc(50% - #{$len});