[CSS] CSS calc() 캘크함수?

 

calc() ?

 

calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수이다.

CSS 내부에서 길이 연산이 필요할 때 쓰는 함수이다.

 

calc(연산식)으로 사용할 수 있다.

-moz-calc()와 -webkit-calc() 로 브라우저 간 호환성을 높일 수 있다.

javascript로 계산하기 힘든 %와 px의 계산식도 수행할 수 있다.

각 수치와 부호 사이에 공백이 없으면 오류가 난다.

 

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

는 글자 크기를 20px로 만든다.

 

 

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

 

계산 순서

• 왼쪽에서 오른쪽으로 계산
• 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 나중에.
• 괄호가 있으면 괄호 안 부터 계산