[CSS] calc() - 스타일 사용 시에 사용하는 계산식

❓calc() 를 사용하는 이유?

반응형 웹을 구축하기 위해서는 고정 단위가 아닌 em, %와 같은 상대적인 단위를 이용하게 된다.

만약 전체 width 100wv에서 20px을 제외한 길이만큼 영역 지정을 하고 싶다면 이 경우 어떻게 해야할까?

고정된 영역에서 20px을 빼거나 더하는 것은 간단하지만 반응형 웹에서는 상대적인 단위를 사용하기 때문에 %, em 등의 수치에 px, pt를 계산해야만 한다. 이때 css의 calc()를 이용하면 손쉽게 계산해서 그 값을 나타내줄 수 있다.

div {
   width: calc(100wv - 20px);
}

화면을 최소화할 경우, 최소한 20px의 여분을 주어 안의 내용에 영향을 주지 않도록 도와준다. (화면 조정해서 확인해보세요!)

calc이용

 

📌 calc() 이용 방법

모든 사칙연산자 사용 가능합니다.

단, + 와 - 연산자는 좌우에 공백이 있어야 합니다. (붙여서 쓸 경우, 음수/양수로 판별하기 때문에 주의할 것!)

중첩하여 이용가능합니다. (calc() 안의 calc()는 그냥 괄호와 같음)

.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}

width 속성의 값은 calc( ( 100px / 2) / 2), 25px이 됩니다.