css 속성값을 계산식으로 전달하려면? calc()를 사용해보자.

https://developer.mozilla.org/ko/docs/Web/CSS/calc() 

calc() - CSS: Cascading Style Sheets | MDN

calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.

예시1
height: calc(100vh-50px)

전체 스크린에서 50px을 뺀 값을 적용합니다.

 

예시2
height: calc(100vh-50px)

부모컴포넌트의 100%값에서 50px 뺀 값을 적용합니다.

 

 

이렇게 calc()를 사용하면 자동적으로 계산해주기때문에, 반응형 디자인을 할 때, 유용하게 쓸 수 있을 것으로 보입니다.