[TIL] calc() 함수 - 반응형 사이트 만들 때

 

 

 

가변적으로 변하는 페이지나 반응형 사이트를 만들 때, width/ height 값을 주기 까다로운 경우에 사용하면 좋은 calc() 함수 

calc() 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다 !

 

 

 

전체 너비를 3등분 하고 싶은 경우

 

 

전체 너비에서 중간 60px만 띄우고 싶은 경우

 

 

위 경우 말고도 사칙연산을 이용하여 width, height, font-size, margin, padding 등등으 값을 조정하거나 각도, 수치, 변형등에도 사용할 수 있다 

 

calc() 함수의 특징

🍞  사칙연산과 마찬가지로 곱하기, 나누기가 먼저 연산된다.

🍞 +와 - 연산자는 좌우에 공백이 있어야 한다. calc (50% -8px)은 백분율 값과 음수로 해석하여 유효하지 않음 

🍞 *와 / 연산자는 공백을 요구하지 않지만, 추가하는 편이 일관성을 유지하기에 좋다.

🍞 함수를 중첩하여 사용할 수 있다. 이 때 내부의 calc() 함수는 단순한 괄호로 간주한다.