🌱 기초 프론트엔드
CSS에서 calc() 함수란?
쉽게 이해하기
레고 블록을 조립할 때 '전체 길이에서 손잡이 두 개 빼기' 같은 계산을 해야 할 때가 있죠. calc()는 CSS에서 이런 계산을 자동으로 해주는 계산기예요.
핵심 정리
calc()를 사용하면 CSS에서 계산식을 직접 작성할 수 있어요.
자세히 알아보기
calc()는 CSS에서 수학 계산을 할 수 있게 해주는 함수예요. 더하기, 빼기, 곱하기, 나누기를 모두 지원하고, 단위가 다른 값도 섞어서 계산할 수 있어요.
예를 들어 width: calc(100% - 20px); 처럼 쓰면 '전체 너비에서 20px 뺀 만큼'이라는 의미가 돼요. 반응형 레이아웃에서 특히 유용하죠. 화면 크기에 따라 자동으로 계산되거든요.
사이드바가 있는 레이아웃을 만들 때, 메인 콘텐츠 영역을 width: calc(100% - 250px); 로 설정하면 사이드바 너비를 빼고 나머지 공간을 차지하게 돼요.
font-size: calc(16px + 2vw); 처럼 고정값과 가변값을 조합하면 화면 크기에 따라 자연스럽게 커지는 글자 크기도 만들 수 있어요. 복잡한 JavaScript 없이도 유연한 레이아웃을 구현할 수 있는 강력한 도구예요.