[CSS] cal()

cal()

연산값을 값으로 할당하고 싶을 때 사용하는 메서드이다.

반드시 cal() 안에 연산식을 넣어줘야 의도대로 할당된다.

파라미터는 ""이나 '' 로 감싼형태의 문자열이 들어가면 안된다!!!!

반드시 연산자 양 옆에 공백이 있어야 한다.

부모의 width가 3의 배수가 아니고
일정한 크기의 자식 3개를 가로로 넣을 경우
정적으로 넣으려면 33.333333% 처럼 소수점을 길게 적어야하는 불편함이 있다.

cal() 를 이용해서 나누기 연산을 사용하면 정확해진다.

.test {
	width: cal(800px / 3);
    /* 중첩 cal */
    width: cal(1000px - calc(200px + 100px));
}

사용 가능한 연산자

• + : 더하기
• - : 빼기
• / : 나누기
• * : 곱하기