Dev/HTML, CSS
[css] calc 함수 사용법
bskyvision.com
2021. 1. 15. 09:39
어떤 웹사이트들의 CSS를 보면 가끔 calc라는 이름의 함수를 만나곤 합니다. 이름(calculation)으로 예측할 수 있듯이 속성의 값을 계산을 해주는 함수입니다. + - * / 사칙연산을 지원합니다. calc 함수는 CSS3 버전부터 제공되는 함수입니다.
calc 함수는 브라우저의 크기에 따라 요소의 너비가 높이가 변화해야하는 경우 사용하기 적절합니다. 아래 예제 코드를 보시면 쉽게 이해하실 수 있을 것입니다.
See the Pen CSS calc 함수 사용법 예제 by kyohoonsim (@kyohoonsim) on CodePen.
주의하실 점은 + 또는 -를 해줄 때 +와 - 양 옆에 띄어쓰기를 해줘야합니다. 붙여서 쓰면 작동하지 않습니다.